Visualizing the Heartbeat of Twilio
Time to read: 2 minutes
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.
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.
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.
Related Posts
Related Resources
Twilio Docs
From APIs to SDKs to sample apps
API reference documentation, SDKs, helper libraries, quickstarts, and tutorials for your language and platform.
Resource Center
The latest ebooks, industry reports, and webinars
Learn from customer engagement experts to improve your own communication.
Ahoy
Twilio's developer community hub
Best practices, code samples, and inspiration to build communications and digital engagement experiences.