PBS NewsHour

We built custom web components for PBS NewsHour to use during the 2020 election season. These components were used to display election results, maps, and other data in real time.

    Role

  • Lead Engineer

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 that are good enough to use live on air?

Well, that's what we did.

The 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.

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 just bar graphs and charts--we worked with a data visualization expert to create graphics that showed clusters of votes, broken down by county. These graphics should be able to tell us when a winner is declared and update appropriately.

So, we went to work building custom components with plain JS, HTML Canvases, and a lot of math.

Web Components

We worked together to develop graphics for the 2020 election season. 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. Build a centralized app and easy workflow that empowers the NewsHour for future election seasons.

Most importantly, these components needed to do everything on their own. They should take care of API requests, updating graphics, and controlling the logic for when a winner is called. They also had to be agnostic of site styles, as these were used on PBS NewsHour's site but also partner sites, with different layouts and stylesheets. Web components allowed us to encapsulate everything into one piece of UI and all our client had to do was copy and paste an HTML element.

The suite of components includes race results tables, “winner called” graphics, maps that let users explore county-by-county results, and visualizations of voter survey responses. All of these are populated in real time by a data feed from the Associated Press. Editors access a dashboard where they can power broadcast graphics, download perfectly-sized social images, and copy small code snippets to use the live-updated graphics anywhere on the web. Read more about our web component approach.