The Wall Street Journal relied on groundbreaking visual storytelling throughout the 2016 election. Our graphics gave readers unprecedented information they needed to navigate the torrent of political coverage.
Our ambitious analysis framed the election with historical context and data-driven evidence. Our live results package excelled at mainstays our readers expect: elegant maps and bar charts to illustrate results. But we also served up innovative ways to guide users, such as the “What to Watch” feature. Editors updated this tool throughout the night, allowing readers to zoom into counties and states showing surprising or interesting returns while providing sharp context.
By focusing our work on the needs of our audience, we moved away from the typical dashboards and trackers that simply display data—and instead reported stories through our graphics, guiding users through the nuances of the campaign.
In order to achieve these lofty goals, we redesigned the structure of our team and our technology. We created a team of graphics developers tasked to conceive of and build elections-related content in collaboration with our colleagues in Washington, D.C. They created not only journalistically-compelling stories, but frameworks and code standards that went on to raise the standards of the entire team.
Each elections “module” such as a map, bar-chart, or even the “What We Know” feature were built as discrete libraries, allowing us to call and modify them as needed. The entire project was built in ES6, compiled with webpack and babble. We focused on object-oriented code, taking advantage of JavaScript’s new Class structure. Each module was released in versions, allowing us to run simple command line code to update to the latest. Full pages, such as a results dashboard, simply included these libraries and in only a handful of config options, we could create a flexible map or chart.
Following Election Day, we were able to take those lessons and technology and build them into our team’s template and culture. All of our projects are now built using ES6 and discrete modules for code, sass and even HTML.
