To recreate these simple styles, upload the state’s boundaries in Studio to lighten the area you wish to focus on and then darken the background layer. You can find state and county boundaries on the U.S Census site.

If you want to create a more minimalist map, add your boundaries to a style in Studio and turn off all the other layers and voila! It’s that simple. You can also create a blank style in Studio and add your GeoJSON on the client-side.

Both maps are choropleths using the classic color binary to match the political parties. However, the New York Times’ version manages to convey more information by using different shades of blue and red. Using data-driven styling in both Studio and Mapbox GL, you can recreate this map by using an interporlate

Unique maps

Visualizing election results doesn’t mean you always have to use a choropleth. You may want to explore voting tendencies, compare results from one year to another, or visualize leads rather than vote counts. In these cases, using symbol layers or circle radii makes more sense than using binary fill-colors.

With Studio or Mapbox GL JS, you can use data-driven styling to recreate some of the examples above. For the Washington Post map which shows gains with blue or red arrows, you can use the function and use a conditional expression to determine which symbol to use. For the New York Times map which shows the size of the lead, you can use a step or extrapolate expression to size the radius of a circle.

Wait, is that even a map?

Some journalists and data scientists argue that geographically accurate maps can be misleading when it comes to showing electoral results because they tend to favor geographic accuracy over important patterns in electoral data. I tend to agree with Soo Oh, a visual reporter from the Wall Street Journal formerly of Vox. In her article for Vox, she writes, “we have to weigh the trade-offs in what we make to ensure clarity, accuracy, and fairness.” In other words, choosing a mode of visualization is always going to leave some information out. Depending on the data and the story you’re trying to convey, some design will be better suited than others.

So what if you want to make a cartogram? Well, think about it this way. Maps are just arbitrary shapes with coordinates. But these maps do not have to be geographically accurate for you to use Mapbox GL JS.

First, you will want to create your SVG and add ids to each of the path. Then, you will convert your SVG into a GeoJSON. This can be very tricky because the polygon winding could get messed up or multi-polygons could be encoded improperly. There are tools out there to help you achieve that like this one, but you can also take a shot at writing your own script.