2013-10-10

Co.Labs

Our 3-D Interactive Map Shows Fast Company Traffic In Real Time

A hacked Xbox Kinect camera, eight LCD screens, and some open source software are the ingredients to our in-house experiment with a wall-sized traffic visualizer.



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).

Jihyun’s diagram showing how FC Globe works.

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:

Depth view. Taller spikes mean more traffic is coming from that city.

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.




Add New Comment

2 Comments

  • David H Deans

    This Fast Company Labs project is a very creative use of low-cost building blocks to deliver meaningful operational business value -- kudos to the Co.Labs development team!

  • juliana_chartbeat

    This is a stunning project that really hits the nail on the head when it comes to making data beautiful, functional and accessible to everyone. It's always fascinating to see what people can do with the Chartbeat API.

    We're actually starting to explore our data with touch screens, beginning with a project called Chartbeat Rising – check it out here: https://chartbeat.com/labs/ . 
    Congrats and I can't wait to see what you guys do in the future.