By: Lo Bénichou

Today, Virginia’s 5,489,530 registered voters head to 2,476 polling stations across the state to elect their next governor. This gubernatorial race is a closely contested bellwether in a key swing state.

The New York Times’ graphics team built an election map that is interactive, fast, and visually compelling. The map takes a different view of the votes — examining results by precinct, estimated votes remaining, lead margin, and electoral shift — and provides a real-time view as counts are reported.

Behind the design

To build a basemap that provides context without competing with their data, the graphics team used Studio to simplify the map’s color palette and remove all but the key geographic references, like city labels, highways, and waterways.

As votes come in, the map uses data-driven styling to fill the color of each precinct based on multiple properties, including percentage of votes counted, winning party, and margin of victory.

Expressions for responsive maps

To understand whether and how voter sentiments have shifted since the 2016 presidential election, the graphics team used GL JS expressions to create an electoral “wind map.”

The color, direction, and length of the arrows show the winning party in this election and the magnitude of the electoral shift since the 2016 presidential election.

Similarly, the graphics team used expressions to style circles that show the margin of the leading candidate’s lead in each precinct.

In both cases, GL JS adjusts the arrow and circle sizes based on map parameters like viewport and zoom to ensures readers have a balanced view of the data no matter their device or view.

See the results of the at the New York Times’ site and try Mapbox for your next data journalism project.