B-Reel develops HTML5-based US election data map for CNN and Google

International creative agency and production company B-Reel has created an interactive microsite called Campaign Explorer for CNN's coverage of the 2012 US Presidential election. It's designed to increase the average voters' overall understanding of this year's election cycle, while feeding into CNN.com.

As well as running on CNN's site, the Campaign Explorer can runs as as a Chrome application for desktop and tablet devices, showcasing the agency's skills with cutting-edge HTML5 and Google-based tech.

“We wanted to create a tool that allows users to easily dive deep into the details of the 2012 presidential elections and explore all the data in a visual manner” says Patrick Ehrlund, creative director at B-Reel. “We approached this project more from a user-interface and design angle, rather than building something completely determined by the data. We spent a lot of time in design, figuring the best way to present this data and how to structure the different levels of the tool.”

The goal was to take the data available from the CNN API and translate it into a design that was clear and digestible to any level of user. The project was built from scratch in just four weeks. During this time B-Reel put together hundreds of designs, wireframes, animation tests, data visualizations and prototypes.

The team created an SVG vector sheet based on the traditional bitmap sprite-sheet approach that helps to reduce file size and server requests. They also combined Cloud SQL and Django (“non-appengine philosophy”) with blob store (100% appengine), and used XHR2 and typed arrays on the browser to do the B64 decoding and upload of snapshots.

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Elsewhere on IDG sites

Read Next...