Visualizing the Heartbeat of Twilio

Visualizing the Heartbeat of Twilio
December 11, 2012
Written by
Nina Mehta
Twilion

Voxlineas is a live visualization of phone calls being made on Twilio. We built this as a way to show the heartbeat of one call and of all calls being made on API in context of each other. This data installation gives form and tangibility to Twilio’s complex yet otherwise invisible system. It shows an anonymized view of calls routing through the Twilio platform.

The calls were initially designed to crawl down the canvas like blue rain drops but instead looked like dripping paint and dropped calls. We switched to a landscape crawl and later the color from blue to yellow for better visibility in our space.

Twilio visualization sketch

Twilio dark visualization

Twilio live calls

Live Twilio calls sparse

The call lines grew in both length and width as the call duration increased. Doing this let us show long very long calls that filled the canvas without trumping short calls. But once we began working with live, heavy call data we had adjust the ratios of length, width and speed of the lines related to the calls as well as the brightness of the line once the call ended.

We made color, speed and duration iterations onsite to adjust for the size of the physical space and light that would be changing throughout the day. Once we could let the lines flow freely, we had a powerful way to share the story about your code.

Live Twilio calls evolution of visual

Twilio calls visual with overlay label

During the process I learned how valuable it was to have a clear and precise vision of what we intended to build. Starting with an idea, followed by paper sketches and sample data prototypes let us iterate by on the concept much faster. Voxlineas uses HTML, CSS and processing and is built to run in Chrome.

Projecting the visualization on a large wall instead of a computer screen created new challenges. But the browser-based code made coordinating with the Twiliocon A/V team and doing onsite iterations faster. Once we got to the venue, we needed to adjust for the brightness and size of the space by changing the colors of the lines, speed of the of their growth and placement of the description label.

Voxlineas (voice of the lines) was hosted at Twilicon 2012 at the San Francisco Design Center from October 16-18. There are plans to host the living visualization in the Twilio office.