HTML5 ARTICLE

November 06, 2012

B-Reel’s HTML5 Election Data Map Runs on the Web and as Chrome App


It’s always interesting to see what new technologies are going to pop up around election time. Four years ago, for example, CNN famously used hologram technology to report on the Obama/McCain election, but that didn’t really add much to election coverage.

For the 2012 U.S. Presidential election, though, international creative agency B-Reel has leveraged HTML5 and a handful of other Web technologies to augment CNN’s coverage – while not as flashy as holograms, it is much more informative.

B-Reel’s interactive microsite, Campaign Explorer, is designed to increase the average voter’s awareness of this year’s election cycle, feeding into CNN.com. In addition to running on CNN’s site, though, the Campaign Explorer also runs as a Chrome app for both desktops and tablets.

“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” Patrick Ehrlund, creative director at B-Reel, said in a statement. “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.”

Basically, the site takes data available from the CNN API and translates it into a design that is easily readable and understandable to pretty much anybody. Impressively, the project was built from the ground up in about a month’s time, which consisted of hundreds of designs, wireframes, data visualizations and prototypes before ending up at the finished stage.

Being a Web-based app, though, means that Campaign Explorer had to run efficiently, and it does by way of an SVG vector sheet based on the traditional bitmap sprite-sheet approach, reducing files size and server requests. B-Reel also leveraged Cloud SQL, Django and blob store , along with XHR2 and typed arrays on the browser to do B64 decoding and handle snapshot uploading.

In September, B-Reel launched a mobile app called "Escape the House – a 3D Sound Experience" to promote Relativity’s House at the End of the Street.




Edited by Braden Becker





HTML5 RESOURCES

HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos.... Learn More

HTML5 GAMES

HTML5games.com is the largest and most comprehensive directory of HTML5 games on the internet... Learn More

The HTML5 test

How well does your browser support HTML5?... Learn More

Working Draft (WHATWG)

This is the Editor’s Draft from WHATWG. You can use it online or print the available PDF version... Learn More

HTML5 Flip Book

Free jQuery and HTML5 flip book maker for PDF to online page turning book conversion... Learn More