After 300 days, Spain is still on a political deadlock. After the last election (which took place at the end of June) everyone was wondering two things: will this result allow a new government, and what are the differences between now and December?
Tools: Leaflet, Tilemill, GDAL, D3.js, Canvas, R. With Jorge Galindo.Go to the interactive
A sample of the custom cartography created for this piece.
I already made several election maps, including one for the previous election, but this time I wanted to try something new.
At the beginning I was overwhelmed. But this project taught how to deal with details. For example, instead of filling each city according to the winning party I calculated the margin of victory of each party and applied a scale.
Looking at other maps was essential to start understanding the fine line between typography, relief and the use of color. The tiles feature several layers. First, an Elevation Model. Then, rivers, lakes and roads. I used a mix of sources: the Spanish Government and OpenStreetMap.
After having filling a canvas with an elevation model, highways and waterways, I started working in the most challenging aspect of cartography: labeling. Every zoom level needs a different balance between province capitals, cities, and small villages. I designed every label category using different font variants, text shadows and cases.
A detail of the coast of A Coruña.
The final maps are composed by two layers: the tiles, hosted on several S3 buckets, and a TopoJSON, which contains the election data and the city borders outlined on hover.
Leaflet handles the navigation, zooming and search (powered by Mapzen), while D3 triggers the tooltip.
At the beginning we only wanted to include a map with the main results. Later we thought of including a map for every major party. This is one of the things that didn’t work out: it was simply too much work. We had all the data, yes. But instead of designing one map I suddenly had to create four divergent color scales, handle transitions between different map styles and generate and upload ten tilesets (to support retina screens you need to create a scaled tileset for each map). We shipped the five maps, but it took much more time than we thought at the beginning.
All the maps side by side: the results and each party comparison.
Slippy maps have some drawbacks. One of the biggest pains is that they don’t work quite well on the phone. Instead of feeling integrated, they feel alien: an external widget that behaves according to its own, strange rules. It’s slower to navigate between each zoom level and they make the user scroll and click again and again inside the map. The upside? It’s possible to create detailed maps with custom cartography. While vector tiles are great, it’s not easy to integrate them with DEMs and are complicated to manage outside of propietary solutions (Mapbox, Google Maps).
After designing the maps I built two jitter charts using the data from the TopoJSON. I worked with Canvas to show more than 8.000 cities at once. The first represents the vote to each party according to city size. The second, the difference between this election and the previous. This was traditional D3 work, but I spent some hours working with the SVG axes, improving the legend and the transitions.