[MapBox](http://mapbox.com/) worked with [USA Today](http://www.usatoday.com/) to build their election night maps that tracked results as they came in from across the country. USA Today’s primary goals for their digital-mapping content was it should have multiple forms of embeddable maps for the home page, articles and landing pages, it should be sharable with persistent links to different races and states, as well as fast and show results as they are available — but above all, it cannot fail. Given the record traffic a presidential election can bring to a news website, that first one — and the last — is a particularly exciting challenge.
- How we prepared for record-high web traffic
Our solution was to offload as much as possible of the heavy lifting to visitors’ web browsers. There are a bunch of ways to make a web map, from joining the results with geographic data to render flat image tiles to dynamically drawing vector images in the browser from streaming data. However, often these implementations include one or more web servers that process data or render images while severing content to visitors. With proper testing, we can usually be pretty certain about how a web application will perform. But we can never be completely sure that web servers under an extreme load will be able to do their jobs — so we wanted to avoid that problem altogether.
Using D3.js, an open-source JavaScript vector drawing library, we built a web application that pulled data from geographic and results APIs and joined them to render dynamic maps. The hard work of actually building the maps took place in each visitor’s web browser — not on a web server. The more visitors who came to the site, the more web browsers would download the data and JavaScript code to render the maps. Getting the maps to render well in all browsers was its own challenge. But we had plenty of time to work on that, and adding it would not be amplified by the traffic load of election night.
The key to making a client-side system like this work, where all processing is done on each visitor’s own computer instead of centralized servers, is to pre-process and cache all data to its most basic form. For this application, we had two types of data: geographic shapes of the states, counties, and congressional districts, and the latest electoral results for each of those geographic areas. Since the former group would not change during the course of election night, there was no need to keep it in a database or have it be processed by any server application.
We rendered all of the geographic data to flat text geoJSON files, and we even did this for several versions of each file so our web application had the ability to adjust the resolution of the map’s features depending on zoom level. The entire geographic API was made up of static files that could be hosted on any web server, even application-less environments like Amazon S3 or Akamai NetStorage.
The results did change throughout election night, so we handled them through a different API. The USA Today team set up a database to ingest the XML feeds from the Associated Press and had a server-side application that returned data to our web application through a predictable JSON schema. We designed the JSON schema to be highly cacheable, so the server-side application was protected from almost all public traffic. As soon as a visitor’s browser requested the data for a particular API endpoint, a CDN cached it until an update to the data became available.
- The coverage
The elections maps were a centerpiece of USA Today’s election night coverage, automatically updating as voting results came in every eight minutes.
Building a client-side web application with static or cacheable APIs to deliver real-time election maps successfully ensured that our maps would not go down, despite record-setting traffic. It also made it easy for us to adapt the code to display the nearly dozen different map formats for embedding across USAToday.com and mobile apps.
For more details on how we built the actual maps, see the [MapBox.com](http://mapbox.com/blog/election-mapping-usatoday/) blog.
Dave Cole is a project lead at Development Seed, an R&D shop that specializes in building online maps, data visualizations, and open-source tools. In this role, Dave leads key projects, working closely with the Development Seed team and partners to manage open data and mapping work from the strategy and needs assessment phase through a successful launch. He is highly involved with MapBox, a suite of open-source mapping tools, and works directly with the development team and current users as Development Seed rolls out its first products.