Effectively Visualizing US Election Results

USA 2016 presidential election result represented in a map chart

Election results lend themselves well to thematic maps. So in the spirit of web interactivity I thought I would recreate the map from the 2016 Presidential Election by Popular Vote Distribution Among States using Highmaps.

And after an unspecified amount of coffee, here is the result:

 

(I could also have superimposed votes by the electoral college for additional context, but why ruin a perfectly good story with more facts).

A closer look at the code

The underlying choropleth map is a fairly basic example of using data classes with Highmaps, with the most complicated piece of code being the custom HTML tooltip formatter.

The formatter is reused for the pies with an additional hover effect that adds a layer of complexity. It also sorts the votes before listing them. Note that despite there being no states with Libertarian or Green majority of votes, I´ve still included data classes for these votes to ensure that they are shown in the legend. I have disabled the legend for pies, so the colorAxis for the map functions as a legend for the pies as well.

Also of note is the use of “yAxis.minRange” to limit the level of zoom. Which axis is used is not important here, but limiting the range of either axis will limit how deep the reader is allowed to zoom. I recommend setting a sensible limit whenever enabling zoom to prevent the reader from accidentally zooming to a level that is not readable.

Once the choropleth map is rendered, the pies are added dynamically. This is done by looping through the choropleth data, and adding a new pie series to the chart for each data point. Instead of using a standard pie series, I defined a new “mappie” series tailored for use with maps. This series type allows center specifications with latitude/longitude, and a dynamic size formatter. It also has clipping enabled for use with map navigation.

CODE:

 centerLat = parseFloat(state.properties.latitude),
 centerLon = parseFloat(state.properties.longitude);

Conveniently, the “us-all” map used (found at https://code.highcharts.com/mapdata) has latitude and longitude properties for each state, so I used these as the center locations for the pies. The size formatter ensures that the size of the pie remains constant relative to the map when zooming. This allows readers to get a better look at the pies when zooming in. As mentioned, the tooltip formatter from the choropleth map is reused, sending in a dummy point as the “this” context.

CODE:

 // Data sample:
['California', 8577206, 4390272, 467370, 271047, 13705895, 1, {
  lon: -1,
  drawConnector: false
}], 
['Colorado', 1338870, 1202484, 144121, 38437, 2723912, 1], 
['Connecticut', 897572, 673215, 48676, 22841, 1642304, 1, {
  lat: -1.5,
  lon: 1
}],

The ever-present dataviz problem of the smaller US states is solved here by hard-coding offsets for the pies in the data. The offsets are parsed and added to the calculation of the pie centers. Connectors are then automatically drawn between the pie centers and the centers of the belonging states. The connector lines are drawn using a standard mapline series.

There is also some code to hide pies and connectors when the legend items are clicked. This is done by overriding the undocumented “setVisible” method on the legend items, and searching for all pies and connectors that belong to the map points that are hidden or shown by the click. The visibility of the affected pies and connectors are then set manually with the “setVisible” method.

This map is a good example of an advanced Highmaps visualization, as it gives a quick overview of the data, while still providing access to more details for inquisitive readers.

If you have demos that you would like to share with fellow Highcharts enthusiasts, please do so by visiting our Community Pages.