Visualizing data

Remember the scenes from The Matrix where Neo and the others look at monitors raining green symbols and see a whole world instead? For this month’s wallpaper, I set out to use metadata from our servers to create a similar gestalt of the world inside our datacenters.

At any given time we handle thousands of HTTP requests, ranging from a browser fetching a simple, static CSS file to a customer completing a checkout on a Clockwork platform e-store. This “May-trix” (forgive me) is a way to visualize that activity.

Read on to learn more about how it was made, or skip straight to the downloads.

Speed

We care about speed at Clockwork. We obsess over it. Specifically, we look at the time (in thousandths of a second) it takes for the first byte of our response to reach a user’s browser. Every day, the product and operations team receives a report of the slowest sites and pages so we can investigate. We want the first byte of a homepage to arrive in a couple of eyeblinks.

And so, this wallpaper is also about speed. Each of the “drops” falling represents a single web request, traversing one row in the image every 250ms. The drops are color-coded according to the time-to-first-byte measurement, ranging from Clockwork yellow (very fast) to orange (needs improvement). These first-byte times in milliseconds are also rendered into the falling drops themselves—look for the numbers.

Watch it in action.

How it’s made

For the technical-minded: our syslog sends messages to a NodeJS service, which extracts first-byte times. The NodeJS service then emits these times to its connected clients via websockets. I wrote a simple HTML5 browser app to connect to the websocket, listen for timings, and render them into a canvas element in realtime. This browser app allows the viewer to save the canvas out to a PNG image when it looks good.

Downloads

Desktop
Tablet
Mobile
Facebook Cover: