Real-time server visualization with canvas and processing.js

This is a guest blog post by Logan Welliver, Chief Creative at Cloudkick. He is a graphic designer by training and a web designer in practice.

Cloud management company Cloudkick has released a real-time server monitoring visualization based on canvas and processing.js, that was co-developed with Alastair McDonald of processing.js fame. The product is designed to let users keep a finger on the pulse of their infrastructure, quickly identify problem nodes, and visualize aggregate performance with an easy-to-digest interface.

The tool uses canvas and processing.js to plot servers as stylized circles in 3 dimensions, with axes mapped to one of three performance metrics: CPU usage, memory usage, and ping latency. Each server’s radius is determined by it’s relative prowess (i.e. an EC2 extra large is bigger than 256mb Slice), and colors are customizable via the Cloudkick dashboard. Each server sparkles when the monitoring system returns data, and servers with problems identify themselves by flashing an angry red.

Canvas and processing.js take care of all the presentation, powered by a slew of back-end services that do everything from monitoring servers to pushing data in real-time back to the user.

Here’s a brief overview of the back-end architecture: instances of the Cloudkick Agent (running on individual servers) report metrics to an endpoint, which talks to Reconnoiter, which then publishes messages to RabbitMQ. An internal service called Livedata consumes these messages, finds the ones applicable to an account, and publishes messages back to RabbitMQ. Orbited consumes these messages and sends them to the browser. From agent to browser, the round-trip time is less than a second.

Cloudkick has partnered with Mozilla to provide the visualization for their servers. You can see how they’re behaving in a live demo of the visualization here: infrastructure in Cloudkick Viz.

Get the visualization for your own servers. Cloudkick is offering 20% off for the first 100 Mozilla Hacks readers, using promo code “mozhacks01”.

About Jay Patel

I strive to make the web better by making sure those that develop and drive it are happy campers.

More articles by Jay Patel…


  1. Brian

    What workflows are you trying to solve with this visualization? 3-D scatterplots are hard to navigate and orient in. Also, because the servers will move around based on their performance characteristics, it makes it almost impossible to check the status of a specific server. Finally, your servers seem to be hierarchically grouped (pm-app-*, pm-web-*, cn-*), but this grouping is not represented anywhere. This seems like a case where a carefully designed dashboard would be much more useful (although I’m still not sure what workflow problems you’re trying to solve!).

    I hope you didn’t pay any money or time for this visualization!

    April 28th, 2010 at 08:01

  2. Chris

    Obviously this is an experiment being posted in hacks so the comment about time and money makes no sense… anyway it looks kinda cool.. but the navigation kinda sucks… i cannot rotate around it properly.

    April 28th, 2010 at 19:39

  3. Max

    It’s damn slow! Is it a Linux problem?

    April 29th, 2010 at 03:11

    1. b_i_d

      Runs pretty smooth on Chrome under Debian Testing.
      (Yeah, I know that I’m on a Mozilla site… ;) )

      I think the representation is good to have a quick look. But it “works” only on certain angles. You can rotate it, but it keeps rotating by itself. I think it would be way better if it stayed like you rotate it. Or maybe have a checkbox to lock the current view.

      May 12th, 2010 at 10:40

Comments are closed for this article.