How do you create graphics for a news website with election results that update in real time? Can you make it robust enough to work on any website, regardless of tech stack? Can you also create a system that generates live graphics good enough to use on air? Well, that's what we did.
three questions. one deadline. Iowa. →
01The 2020 Election
To say that the 2020 election was contentious would be an understatement. When the primaries began there were a dozen candidates, and as we prepared for Iowa we needed to make sure we got our ducks in a row.
NewsHour has been a standard-bearer for careful political coverage since the MacNeil/Lehrer Report covered Watergate in 1975, and millions of people still tune in every night. The bar for accuracy was not optional. Upstatement had already rebuilt NewsHour's website and visualized the 2018 midterms' shifting Balance of Power, so 2020 was about going further: no more hand-edited graphics on election night.
PBS NewsHour wanted graphics that took data from the Associated Press in real time and presented it in a way that was easy to understand. This was more than bar graphs and charts: we worked with a data visualization expert to create graphics that showed clusters of votes, broken down by county. They needed to know when a winner was declared and update appropriately. So we went to work building custom components with plain JS, HTML Canvases, and a lot of math.
02Web Components
We set out to design clear, informative graphics that work everywhere NewsHour audiences might encounter them (on the broadcast, the web, and social media), replace a laborious and error-prone workflow of manual edits with automated, always-up-to-date components, and build a centralized app that empowers the NewsHour for future election seasons.
Most importantly, these components needed to do everything on their own: API requests, updating graphics, and the logic for when a winner is called. They also had to be agnostic of site styles, since they ran on NewsHour's site and on partner sites with different layouts and stylesheets. Web components let us encapsulate everything into one piece of UI. All our client had to do was copy and paste an HTML element.
The suite includes race results tables, “winner called” graphics, maps that let users explore county-by-county results, and visualizations of voter survey responses, all populated in real time by the AP feed. Editors get a dashboard where they can power broadcast graphics, download perfectly-sized social images, and copy small code snippets to use the live graphics anywhere on the web.