Spanish General Election 2015

Spanish General Election 2015

Organisation: El Español (Spain)

Publication Date: 04/10/2016

Description

Our election map covered the last Spanish General Election. It was updated in real time, providing results to thousands of visitors at that moment. The goals were simple: to create a mobile-friendly map, well designed and interesting for the user. It covers the election in national, regional and local level. Apart from the double zoom, the user can also search for a city. This news app is complemented by a depth analysis of results published in few hours. It is an exercise in data journalism realized by automating processes and real-time analysis. It is available in the "resumen" tab.

What makes this project innovative? What was its impact?

We spent a lot of time thinking and analysing how election maps were done in other countries such as the US. We decided to use a double zoom instead of reloading the page again, as a way to improve the coherence and the speed of the website. This is the opposite of the usual database-driven map, where you click on a region and then you have to load another website with that set of results. The speed was crucial, and also the design. We focused a lot on designing a good map, choosing the right colors and annotating it with roads, country boundaries and labels. There’s also a low simplification level. Instead of compressing the map and losing geographical accuracy, we decided to produce a quality map. This level of polishment isn’t common in Spain, where over-simplified elections maps are the norm.

Technologies used for this project:

The map makes a heavy use of Canvas, a web technology to paint graphics in the browser. To render it we created a customised pipeline that combined heavy compression of every asset with Protocol Buffers (https://github.com/google/protobuf) with a rendering process with Javascript and D3.js. We will open source soon a library extracted from this project, to make it easier to create Canvas-based maps.. Usually, maps with D3 are done with SVG, a vector-based technology. Canvas paints images instead, reducing the overall cost of the rendering. For example, while SVG creates thousands of nodes on the DOM, Canvas just renders a plain image. This allows us to create a speedy map with a very high resolution for the country, regional and local level. Another technology innovation is the use of a customised map projection for Spain (https://github.com/rveciana/d3-composite-projections). This allow us to create a very accurate map on a cartographic level. Instead of using hacks to position the Canary Islands near the Peninsula, we have a normal map which then gets transformed on-the-fly by D3.js. For reducing the size of the assets, we combined every zoom level (regions and their cities) into the same JSON. This reduces the number of requests.
Follow this project
Wait
Comment

Comments (0)

You have to be connected to contribute

You have to be connected to follow

Leave this project and no longer be informed about this project

By joining this project, you will be informed by email when an update or a new contribution is posted on the website.

Thank you for your active participation !
Best,

The GEN Community Team