Aug. 22, 2017

How we built the VOA Election Map in 2016

Despite working for a large international news organization, our digital budget is never quite what it really ought to be.  Even thinking about purchasing AP election map interactives or API access is always a challenge.  So, whenever it comes to election maps, often enough we roll our own.

It's not always a matter of budget, but also some very specialized circumstances.  We can't apply the same technology and interface from Western elections to places like Nigeria or Iran, and our prioritizes are to ensure support in 40-something languages, keeping text to a minimum.

Every four years I get an opportunity to explore new technologies for an election map.  Several elections ago (defensively, before my time here), it was static images updated by Photoshop and sent hourly to 40-something translators.  The election after that, we developed a database-driven SVG solution powered by RaphaelJS.  At that time, D3.js hadn't picked up speed yet, mobile traffic was low, IE6 was still dominant and RaphaelJS had a VML fallback for it.

But this past year, I was excited to pursue something new.  IE6 usage had dropped off a cliff, and WebGL support had finally gotten to a point where you could expect it to work on mobile devices and most desktop browsers.


The above picture shows a 3D election map prototype I built from scratch, using three.js.  There was some potential there to do fun things like extrude states and give them weight by their population (and therefore number of electoral votes).  You could pan and zoom camera to anywhere you like, even inverting the map.

States could be animated as you explore previous elections, literally flipping visually as their votes flipped from one party's dominance to the other.  It could have been an engaging way for reporters to explain complexity of the U.S. Election system.  Take it for a spin below.

  • Right-Click and drag: pans the map
  • Left-Click and drag: changes the camera angle
  • Mousewheel: zooms in and out

A quick walk-through: click on different years, and click on the 'show voting power' to make the states pop out.


Unfortunately, closer we got to the election, we had some reservations about the map so we defaulted to an SVG version shown up top with the reporters.

List of reasons is huge: performance, size, data transfer amount, development time for mobile-responsive compatibility, and general browser rendering compatibility.  And sadly, even the potential interactivity was confusing to users.  As standard as 3D camera controls are to nerds, we're still a very limited cross-section of users, and regular users today still struggle with drag and drop despite it being around for decades.  I'm convinced a virtual camera gimbal would have been a challenge.

The barrier to entry for WebGL-inexperienced developers was a bit disorienting (for example, logical events like interacting with a U.S. state required a projection solver, and importing the map coordinates was a projection systems chore).    Thankfully, there were tons of code examples out there and even an amateur could wade through it.

WebGL just wasn't ready yet for the 2016 U.S. election, but I'm hopeful that by the next one WebGL support will be more widespread, libraries such as three.js and BabylonJS will get leaner, and more scene-oriented and event driven.

Find this interesting, or useful? Consider sharing the post.

Leave a Reply

Your email address will not be published. Required fields are marked *

Posts on this blog solely represent my personal opinions and technical experience.

© 2009-2019 Edin (Dino) Beslagic