Digital journalists are obsessed with traffic. Jihyun Lee, one of our creative technologists, thought it might be fun to project our traffic in an interactive map on the wall--across 8 LCD displays, using an Xbox Kinect camera as the interface. This article is about how it works.
The idea here is to give people a snapshot of who is on the site now and what they’re reading. There are three metrics in the display: trending stories, people on the site right now, and a map showing where these readers are located. After about 8 weeks of experimenting, it’s done--now anyone can play with the FC Globe, seeing a glimpse of our performance in real time.
The ingredients: raw data from Chartbeat, one of the analytics services we use, plus an Xbox Kinect camera, an old Mac tower, 8 LCD screens, and the power of open source (Greenhouse in particular).
After stumbling across Greenhouse, Jihyun began building the globe. Greenhouse provides users with a library that comes packaged with an API for hand gestures on the XBOX kinect. Their goal is to make all projects spatially interactive. You can check out Greenhouse’s downloadable library here.
The raw data Chartbeat provides on their API includes the latitude and altitude (the geolocation!) of our readers. The raw data came formatted in JSON--you can read our JSON tutorial here--but since the Greenhouse application was in C++ she realized she needed a wrapper to manipulate and parse the data. After searching Github, she a found repository of exactly what she needed.
She then constructed the class “Reader” that generated a reader with attributes like from the Chartbeat data. The attributes for a given reader (latitude and longitude) are obtained through an HTTP request to Chartbeat’s API. On the FC Globe, the information updates by timer trigger every three seconds. An event requests a real-time update of information on Chartbeat.
The screenshot of the FC Globe above shows a panned out view of the globe which is zoomed into the United States, each dot representing a reader. A user can simply zoom in by moving their fist forward when they stand in front of the globe, or vice versa.
In high population areas, squares start to form because there are so many readers and the dots begin to overlap. To solve this, FC Globe implements a third variable: depth. We are able to get a true picture of how many readers are on a given location by making an L shape on your left hand. This tells the map to show us a side view, allowing us to see readers by stacking the dots on top of one another:
As if virtually spinning the globe, hand gestures allow you to zoom into different areas to focus in particular regions. You can view the world upside down, on its side, or focus on a specific region--traffic has never looked so beautiful. Whether in Singapore or Ohio, live analytics allow us to look at you reading this right now.
If you have questions about how we implemented our traffic visualizer, tweet at us @FastCoLabs. And look out for more Co.Labs in-house projects in the future.