Visualizing Data for Facebook Live
How AJ+ visualized the 2016 Presidential Election results
AJ+ took an anti-polls, data-first stance toward covering the 2016 presidential election, from the beginning of the campaign season to Election Day.
When AJ+ journalists were not in the field talking to voters or streaming live video on Facebook, the channel’s election coverage was characterized by branded visualizations and social media graphics of election results and the debates.
As the editorial team began to plan for Election Day, we knew we wanted to track more than just the race for the presidency.
The Problem
How do we update viewers on the results of the election during our Facebook Live election special?
Our objective was to display the live results of the electoral vote and the popular vote, state level results, trackers for the House and Senate, governors races and key ballot initiatives.
The process for visualizing results for the primaries involved using templates made in Adobe Illustrator and giving them to producers to edit. While some templates worked great for producers making quote cards and fact checks, when it came to live results this method was just plain inefficient.
Solution & Process
For Election Day, we decided on building a digital dashboard that connected straight to state-by-state election results from the Associated Press elections API. Our visualizations were designed to closely follow our stark, minimal elections branding and development was completed by our internal engineering team.
The AJ+ Facebook Live coverage was an 7-hour extravaganza that included interviews with activists, journalists, comedians and more. In between segments, we updated viewers with the status of the election using the visualizations.
Iterations
Since we had an electoral vote count on screen throughout our coverage, we chose not to include a count on the map view. We also dedicated an entire screen to the electoral vote and popular vote.
A major design hurdle was text size. At AJ+, all design is mobile first, so we always design our videos and graphics to be viewed on mobile devices. The typography in this project was selected with clear intentions—to be refined and purposeful. However when we translated the style to the live feed, legibility and visual impact were a major concern for the producers of the project.
Our solution was to use as little text as possible, make sure text was bold and clear, and minimize use of a few type weights and styles. Following the branding of previous graphics, we used the Intro font family but restrained ourselves to two weights (Bold and book) and a few controlled type sizes.
AP’s elections API was integrated into all of the screens except one, the “Issues to Watch” page which looked at three major topics that Americans were voting on across the nation. In order to update this page we created a Google Slides document with the image of the slide in the back. As soon as the results were called on an issue, we would update with a (check mark) or (x). We connected this page to the overall dashboard and used the Chrome extension Revolver to control the duration each page played on screen, the extension also allowed for automatic updates for the “Issues to Watch” slide.
Results
The live election data dashboard had a significant impact into the overall traffic of the Facebook Live. When we first showed the dashboard during our live show there were about 2.2k more viewers joining than dropping off in a span of five minutes.
This also led to the creation of a new content type for AJ+. Since we use social media as our main publishing platform, we don’t have an easy space to share and create data visualizations. Facebook doesn’t support this type of data journalism but we were able to ingest web pages displaying the visualizations into the live stream and display results in real time.
Takeaways
The visualizations were a success, and going forward, the digital platforms and editorial teams at AJ+ will continue to collaborate on quick turnaround projects that leverage technology to create more engaging and informative experiences.
