Election hex mapping
At ODI Leeds we're big fans of hexagon-based maps for visualising certain types of data. I first started thinking about them a few years ago when I saw Chris McDowall's hexagonal map of the New Zealand election results that had been inspired, in turn, by an image of 1895 London that the British Library had released into the public domain.
Released by the British Library to the Public Domain
Why a hex map?
Traditionally, election maps have showed a standard map and colour-coded each constituency by the colour of the winning party. These sorts of visualisations have, to an extent, been misleading our impression of the results. Chris's hex map was an attempt to reduce the distortion. At least for New Zealand.
For a general election the end result is to have elected representatives. In the UK, each Member of Parliament is elected by around 50,000-100,000 constituents and, in theory, has the same voting weight in Parliament. However, when we show the genuine geography of the country, every constituency is given a size dependent on its physical size, not its political influence. What our brain sees is affected by how much of each colour is on the map and geography biases that impression. Rural constituencies such as Richmond in North Yorkshire have far more impact than, say, Birmingham Yardley even if their MP's votes count the same. This geographic bias, on something that isn't about geography, gives us a distorted view. Benjamin Hennig has some maps of the 2015 general election results where he distorts the constituencies to give every voter the same impact in the visualisation. That is the fairest representation but can look quite ugly.
A hex map is a suitable compromise because it gives every constituency the same visual weight but also looks fairly tidy. Squares would work too but they have only 4 neighbours that share an edge whereas hexagons give us 6 potential neighbours. Obviously, in real life, constituencies can have any number of neighbours sharing borders including none e.g. islands such as Orkney and Shetland.
With a new general election announced, we felt we needed an open hex-map of UK constituencies to be able to do better visualisations. As it turns out, I had already made one but, and this is where it gets ideological, it was made with flat-topped hexagons. Tom Forth and I have been having a battle for the past two years over which orientation was the best; flat-topped or pointy-topped. Having finally lost the battle (long live the pointy-topped hexagons!), we needed to recreate the map of 650 constituencies in the new orientation.
Creating a map
We started with a pretty low-tech solution. I printed out small hexagons with the constituency names and regions (North West, East Anglia, Scotland etc) on them. With the help of our work placement student, Yaro, and other people visiting ODI Leeds during the Leeds Digital Festival, we cut them out and started constructing a map on one of our large whiteboards. This is a very labour-intensive process that requires constant readjustment as the map gets built. We had several arguments over exactly what to put where especially when York Central ended up on the coast at one point.
One of the problems is that the cities expand. Keeping their border constituencies together can be quite tricky. Sometimes there aren't enough rural constituencies to fill in gaps in the grid. In doing the job we've tried to keep the end result looking vaguely like the country as that helps people find constituencies they are interested in. So, we've tried to keep the main regions together as distinct groups e.g. we didn't want "islands" of the West Midlands stuck in the middle of the East Midlands. The main regions border each other in a similar way to how they do geographically e.g. High Peak (East Midlands) sits between Yorkshire & Humber and the West Midlands.
We've tried to keep coastal constituencies on the coast as much as possible. We tried to preserve the Wash, the Thames Estuary, the Severn, the Forth, and the Humber. We've tried to keep obvious neighbours together e.g. Kensington is next to Chelsea and Fulham.
Open and editable
The end result isn't perfect and other people may have tweaks they'd like to see. We clearly have a Yorkshire bias so other parts of the country that we know less well may not feel right. However, we've released the map under an MIT license so that others can adjust it. In fact, to make it easier to build in the first place, I made the map editable by default. Clicking on a constituency selects it and then clicking on an empty hexagon will move the selected constituency there. That only updates the map in your own web browser and I really wanted a way for people to share their versions. So, I've defined a JSON format for sharing hex maps and added a button to let you save your adjusted version. At the moment only my display tool can read the format but it is openly licensed so others can build tools use it too.
Displaying data
Now that we have a map, we can play with it. The obvious thing is to use it to display the results as they come in on June 8th/9th. But we can do interesting things before then too. We've used it to create a live heat map of the number of candidates in Democracy Club's dataset. One obvious feature that pops out of this view is Manchester Gorton where I used to live. It has a lot of candidates. That isn't so surprising given that it will have an entirely new MP for the first time in decades so everyone from the Official Monster Raving Loony Party to the Christian Peoples Alliance are contending it.
We can show other datasets too. So far I've added the 2015 general election results, estimates for the 2016 EU referendum, and a heat map showing the variations in electorate in each constituency.
View the constituency hex map and get the code on Github.
Update 2017-05-17:
After we released the hexmap we had a contribution from Bob Harper at ODI Belfast. He adjusted Northern Ireland to make the layout better including leaving a gap for Lough Neagh. This is the advantage of open licensing; we can get improvements from people who know more about specific things than we do.
Leeds-based mapping company parallel have created an extruded 3D view that can be rotated to prioritise the focus and a view showing majorities.
Leeds-based developer Daniel Wright has also created a 3D view using three.js which currently shows votes by party, electorate size, and gains.
Update 2017-05-19:
Oli Hawkins has created a plugin to read HexJSON files with D3.js.
