How the NYT created its “512 Paths to the White House” data tool

When Shan Carter, the New York Times’ interactive graphics editor, started thinking about how to design a new electoral vote calculator for the 2012 election, he decided two things: “It shouldn’t include electoral votes or calculations.”

At the Visualized Conference in New York City Friday, Carter explained how he and the NYT’s graphics team came up with their “Paths to the White House” tool. Carter began by looking at past tools the paper had used — all the way back to the 1896 election, in which William McKinley defeated William Jennings Bryant. The morning after the election, the NYT ran a color-coded electoral map on its front page: white states for McKinley, black for Bryant. “They got some states wrong,” Carter said, but “everyone knows how to read this.”

There are several problems with color-coded electoral maps, though, Carter said. First, there’s the “area problem” (many states that are large in geographic size have a small number of electoral votes). The maps may also look very similar across elections even when the results are different. Carter showed red and blue electoral maps from the past four elections and at a glance they all look the same. If you make a color-coded map more interactive — allowing a user to click a state and fill it with a new color, for example — that overrides any information the New York Times has added: “The more you use it, the less useful it is.” Finally, Carter said, these maps are just “boring” and “not very fun.” (Which isn’t to say that the NYT abandoned them completely — the “President Map” illustrating this post is another tool the paper offered this year.)

Carter and the graphics team ultimately came up with “512 Paths to the White House” (when he showed it on the projector, the audience cheered). Users could create their own paths. “We struggle a lot with stepping people through things or letting them explore themselves,” Carter said. The NYT decided that users could test their own paths, but there were annotations for highlighted paths at the bottom of the page to help them get context.

Disclosure: GigaOM is a media partner for the Visualized Conference.


GigaOM