How to make a map of US election results

This tutorial demonstrates how to make a map of US election results. You can also:

Read about election mapping with MapTiler
See a full screen Demo

In this tutorial, we will create a map to show the results of the 2020 elections in the US. We have obtained the data from Hardvard Dataverse. To use this data in our application we have transformed the downloaded CSV files into JSON. Here you can download the transformed JSON files 2020 president by state y 2020 president by county

^{Click on the map to get the election results. Zoom in to view results by county}

Copy the following code, paste it into your favorite text editor, and save it as a .html file.
Install the npm package.
Include the CSS file.

If you have a bundler that can handle CSS, you can import the CSS or include it with a <link> in the head of the document via the CDN
Include the following code in your JavaScript file (Example: app.js).
Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.
The next is up to you. You can center your map wherever you desire (modifying the starting position) and set an appropriate zoom level (modifying the starting zoom) to match your users’ needs. Additionally, you can change the map’s look (by updating the source URL); choose from a range of visually appealing map styles from our extensive MapTiler standard maps, or create your own to truly differentiate your application.
Add an event handler for the map ready event. You will add code to create your map in this handler.
Add the MapTiler countries data source.
Find the id of the first symbol (text) layer in the map style. This is useful for adding polygon or line layers below the map labels.
Add the US state’s layer
Load the US election results data by states
...
...
Add the election result data to the states layer features. We will use the sourcedata event to know when the data loading into the map is finished.
...
...
Change the US state’s layer fill-color to the color of the winning party.
Reload the page to see the map with the states colored according to the winner.
In the previous step, we have assigned the election results to the states. We’ve only done this for the states that are visible on the map. If we move the map towards Alaska we will see that the state remains in gray (it does not have any electoral results assigned). To avoid this we are going to use the move and idle events to assign the results to the rest of the states as we move around the map.
The last thing we will do is use the map’s click event to show the election results corresponding to the state where the user clicks.
To display the information we will use a popup.
We will create the popup content with the showInfo function. The information displayed is the name of the state, a table showing the results according to the candidates and a graph showing the percentages of votes obtained and the winner’s margin of victory.
To create the graph we need to load the d3.js library.
Create the graph.
Finally, style the information displayed in the popup so that it is more attractive and easier to understand.
Reload the map and click on a state to see the election results.
Congratulations, you have made a map that shows the US election results by state.

View complete source code

Optional: add the county layer

Below we will explain the steps to add the results by county to the map.

Look the steps to add the results by county

Add the US counties layer
Load the US election results data by county
...
...
Add the election result data to the county layer features.
Show the election results corresponding to the county where the user clicks.
Animate the transition between the state and county visualization.
...
Congratulations, you have made a map that shows the US election results by state and county.