Case Study 2: The FiveThirtyEight Election Dashboard and the Art of Complex Interactive Layouts

FiveThirtyEight, founded by Nate Silver in 2008, became famous for its election forecasts — probabilistic predictions of the 2008, 2012, 2016, and 2020 US presidential elections. The forecasts were delivered through interactive dashboards that combined maps, probability distributions, scenario sliders, and historical comparisons into a single scrollable page. The design of these dashboards is a case study in how to pack enormous amounts of information into a usable interactive experience — and in how Plotly Graph Objects (or equivalent tools) can reproduce most of what made them work.

The Situation: Polls Are Noisy, and Readers Want Certainty

Nate Silver was a statistician who had built his reputation forecasting baseball player performance for the Baseball Prospectus website. In 2008, he started applying similar methods to political polling. The core insight was that no single poll is reliable — polls have margins of error, methodological biases, and sampling variance — but a carefully weighted average of many polls can be much more informative than any individual poll. Silver built a model that aggregated polls, adjusted for methodology and pollster reliability, and produced a probability distribution for election outcomes.

The challenge was communication. Silver's model produced a rich output: a probability for each candidate winning, a distribution of electoral college outcomes, state-level probabilities, tipping-point predictions, scenario analyses. How do you convey all of this to a general audience without either oversimplifying or overwhelming?

The 2008 version was mostly text with a few static charts. By 2012, FiveThirtyEight (then part of the New York Times) had evolved into a dashboard: an interactive page with a map, probability gauges, and charts. By 2016, the dashboard was the main product. A reader who visited fivethirtyeight.com during the election season would land on a page full of interactive visualizations, with the written analysis as a secondary layer. The dashboard was updated several times a day as new polls came in.

The Visualization: Layered Interaction for Multiple Audiences

The FiveThirtyEight election dashboard had several key components, each designed to answer a different question for a different type of reader.

The national headline. At the top of the page was a large probability display — "Clinton 71% to win, Trump 29% to win," or similar. This was the number most casual readers wanted. It was displayed prominently, in large type, with visual emphasis.

The electoral vote distribution. Below the headline was a histogram (or bell-curve distribution) showing the probability of each possible electoral vote total. The median was marked, and the distribution shape communicated uncertainty: a narrow spike meant confidence, a wide distribution meant uncertainty. This chart was mostly for readers who understood probabilities and wanted to see the range.

The state-level map. The map showed all 50 states (plus DC), colored by the favored candidate and shaded by confidence. Hovering over a state revealed the exact probability and the projected margin. Clicking a state drilled down to a state-level page with the polls and model details.

The tipping-point analysis. A table or chart showed which states were most likely to determine the outcome — the "tipping-point" states where small polling shifts would flip the election. This was for sophisticated readers who wanted to understand the electoral strategy.

The historical comparisons. Charts comparing the current forecast to past forecasts (how Obama's 2012 forecast looked at the same date, for example) and to final outcomes. This provided context and anchoring.

The scenario slider. Some versions of the dashboard had a slider that let the reader simulate "what if Trump's national polling shifted by X points" and see how the map and probabilities would change. This was the most interactive element — the reader was no longer a passive viewer but an active explorer.

Each of these components was a separate chart or display. They were arranged on the page so readers could skim the top layer (headline + map) and drill down into the detail layers (distributions, tipping points, scenarios) as desired. The design followed Shneiderman's mantra closely: overview, zoom, filter, details on demand.

The Technology: Custom D3, Not Off-the-Shelf

Like the NYT COVID tracker (Chapter 20 Case Study 2), FiveThirtyEight's dashboards were built with custom D3.js code. The team included developers with deep D3 expertise, and they built internal libraries for common patterns (animated transitions, consistent typography, shared color palettes). The output was fast-loading, precisely styled, and tuned for the publication's brand.

Plotly was not used for the primary dashboards, but Plotly and similar tools were used for secondary analysis — sensitivity tests, explanatory sidebar charts, blog post visualizations. For rapid prototyping and exploratory analysis, off-the-shelf tools like Plotly were faster. For the production dashboard, the custom D3 approach gave fine control over every detail.

This split is worth noting. A large media organization with D3 expertise can afford to build custom tools for their flagship products. A smaller team or individual developer cannot. For most projects, Plotly Graph Objects is the right choice — you get 90% of the capability in 10% of the development time. The Graph Objects API includes everything the FiveThirtyEight dashboards needed: multi-subplot layouts, interactive controls, hover tooltips, animations, custom colorscales, annotations. A Plotly reconstruction of the dashboard would not match the visual polish of the original, but it would convey the same information with similar interactivity.

A Plotly Graph Objects Reconstruction

What would a FiveThirtyEight-style election dashboard look like in Plotly Graph Objects? Let us walk through the main components.

The headline display would be a simple text annotation at the top of the figure. Plotly does not have a dedicated "big number" chart type, but add_annotation with a large font size works well. Or you can use go.Indicator (a specialized trace type for gauge and big-number displays).

The electoral vote distribution would be a go.Histogram with explicit bins, or a go.Bar trace built from a pre-computed histogram. The median line would be a vertical add_vline. The "270 to win" threshold would be another vertical line with an annotation.

The state-level map would be a go.Choropleth trace with locationmode="USA-states", custom colorscale (red-blue diverging for partisan lean), and hover templates showing state-level details. Chapter 23 goes deeper into geospatial.

The tipping-point table would be a go.Table trace with state names and probabilities. Plotly's Table trace renders a simple tabular display with sortable columns.

The historical comparison would be a regular go.Scatter line chart with multiple traces — one line per historical election — overlaid on the current forecast.

The scenario slider would use the sliders layout property. Each slider step would correspond to a different polling shift, and clicking a step would update the traces (via restyle method) to show the scenario. This is the most complex piece to build, but it is all possible with the Graph Objects tools covered in this chapter.

Putting it all together requires make_subplots with a custom layout (probably specified via specs), multiple trace types per subplot, annotations and shapes for the headline and reference lines, and updatemenus or sliders for the interactive controls. The result would be a single go.Figure with several dozen elements — more complex than most Plotly examples but not fundamentally harder than anything in this chapter.

A realistic estimate: a skilled Plotly developer could build a Graph Objects reconstruction of the FiveThirtyEight dashboard's main features in a few days to a week. A polished version suitable for a production site would take longer, because the polish details (typography, animation smoothness, responsive layout) accumulate. But the core capability is there.

Theory Connection: The Scrollable Dashboard as a New Medium

The FiveThirtyEight election dashboard is an example of what might be called the scrollable dashboard — an interactive page that combines multiple linked visualizations with explanatory text, arranged so the reader can scroll through at their own pace and drill down on demand. The format became common in data journalism in the 2010s (the NYT, Washington Post, Bloomberg, ProPublica, and The Pudding all produce scrollable dashboards regularly) and has since spread to business dashboards and academic publications.

The scrollable dashboard is distinct from both a traditional article (text + static images) and a traditional BI dashboard (grid of live KPIs). It inherits from both: the article's narrative flow, the BI dashboard's interactive exploration. It is a new medium enabled by the combination of fast web rendering, rich interactive libraries, and the expectation (post-COVID) that data journalism should be interactive.

Plotly Graph Objects is one of the tools that makes building scrollable dashboards feasible for smaller teams. You do not need a D3 expert; you need someone who can write Plotly code and style the result. The threshold of entry for producing FiveThirtyEight-quality work is lower than it was in 2016, and it is continuing to drop.

The threshold concept of this chapter — "figures are data structures" — supports this democratization. A dense, complex, interactive figure is still a data structure. You can build it piece by piece, inspect it with to_dict(), and debug it by reading the JSON. You do not need to hand-write D3 or understand the plotly.js internals. You just need to describe what you want, and the tools handle the rendering.

The Impact: Probability in the Public Imagination

FiveThirtyEight changed how the general public thinks about election forecasts. Before 2008, election coverage mostly reported on the "horse race" — who is leading in the polls, who is gaining, who has "momentum." After FiveThirtyEight, readers became familiar with the concept of a probabilistic forecast: "Candidate X has a 72% chance of winning" rather than "Candidate X leads by 4 points." The distinction matters because a 72% chance is not a certainty — it means you should expect the "favorite" to lose about 28% of the time.

The 2016 election, where FiveThirtyEight gave Hillary Clinton a 71% chance of winning and she lost, was a famous test of this framing. Many readers interpreted 71% as "she will definitely win," and when she did not, they concluded that the model was wrong. Silver and his team spent years arguing that 29% is not small — you should not be shocked when a 29% event happens any more than you should be shocked when a weather forecast of 29% rain produces rain.

This is a lesson in the difficulty of communicating uncertainty. The interactive dashboards with their probability distributions, scenario sliders, and confidence intervals were genuinely trying to convey the uncertainty honestly. But readers anchored on the headline probability and tuned out the nuance. The dashboard worked for some readers (sophisticated ones) but not for others (the majority who just wanted a "yes or no" answer).

The takeaway for visualization designers: interactive affordances are not sufficient to convey nuance. A reader who wants a simple answer will find one even in a complex dashboard, often by ignoring the complexity. Designing for nuance requires more than affordances; it requires text, framing, education, and sometimes the discipline to say "we don't know" rather than "X is 71% likely."

Discussion Questions

1. On custom tools vs. libraries. FiveThirtyEight built its dashboards with custom D3. A Plotly Graph Objects version would be faster to build but less polished. Where is the right trade-off for a small team working on election visualization today?

2. On probability communication. The 2016 "71% Clinton" forecast was accurate in terms of calibration but was widely misinterpreted. How should an interactive dashboard communicate uncertainty to readers who want a single number?

3. On scrollable dashboards as a medium. The format has spread widely in the 2020s. What other news topics would benefit from the scrollable-dashboard treatment? What topics would not?

4. On layered interaction. The FiveThirtyEight dashboard had layers for casual readers (the headline) and sophisticated readers (the distributions and tipping points). How do you design layered interaction so that each layer is complete on its own?

5. On Plotly's capacity. The chapter suggests Plotly Graph Objects could build 90% of the FiveThirtyEight dashboard. Which 10% would be hardest, and why?

6. On the reader's response. The 2016 election taught the FiveThirtyEight team that their careful probability communication did not land with most readers. If you were redesigning the dashboard, what would you change?

The FiveThirtyEight election dashboards are some of the best-known examples of complex interactive visualization in modern journalism. They are also a reminder that even excellent tools and careful design cannot fully overcome the reader's desire for simple answers. When you build a complex Plotly Graph Objects figure, think about what the reader will take away at each layer — and consider whether your affordances are designed to support understanding or just to display data.