Choropleth Experiments

25 April 2019 // 4 min read

This post was written whilst I was still using the ghost blogging platform. I haven't had time during migration to get this experiment working within my new Gatsby setup bu if you are interested you can still see the results over at this static page on github

So I think I've now mentioned several times in my weeknotes that I've been bitten by the data visualisation bug during my recent course with the ODI. I've also mentioned that I found using Public Tableau for one of my assignments fairly frustrating so wanted to play with some other tools and methods. The interactive choropleth map below is one of my first experiments in doing just that. It's a pretty throw-away experiment and I put my hands up to having done no analysis of the data. The reason for keeping it themed to fire incidents for the moment was purely based on knowing it was relatively simple to get hold of data that would be ready to work with. It's showing the total number of incidents attended by Fire Authorities in England between Apr and Sep 2018. Data was sourced from (FIRE0102).

picture of choropleth map What it looked like

I've used a combination of leaflet js and mapbox for the presentation and interactivity. This tutorial on the leaflet site was super helpful in getting me started. I was keen to be able to use some of the geometry from the ONS geography portal in my experiment as they have quite a few different geojson sets for things I'm interested in (boundaries of local authorities as an example). I did at one point go down the rabbit hole of directly using their API for the geometry and although I did get it working it meant using an additional leaflet plugin and some other complications which weren't really necessary whilst I'm not visualising live or changing data. I took a step back and decided to keep it simple for the moment.

I also wanted a method of keeping this geometry data a little more segregated from the actual statistical data than they did in the sample tutorial. I'm now holding the data in another external js file and using some very ugly javascript (I mostly understand) to link the two together using a common key (I'm no coder 🤪). However dirty and ugly the code might be it works 🎉 and that's mostly what I'm concerned about whilst playing and prototyping. Taking this approach means that I can swap data and geometry in and out fairly easily when needing to create new versions and different experiments across different posts on this site without really having to do anything other than make very small tweaks to a copy of the script and reference the two external files (geometry and data). It also means I can easily work with and update my dataset in something like google sheets and convert into json pretty easily and be ready to rock.

One thing I liked about leaflet was that it gave some nice easy ways to turn off all the crazy map features. The 1st draft of this the map allowed zooming and panning and zoomed in on selection etc etc. All fine and dandy but a pretty crappy experience on a mobile device where you want people to be able to scroll a page with their thumb not pan a map to another continent. In the context of using a map to visualise this kind of data it was massive interaction overkill and totally pointless. Good to know I can play with those things for other uses though. I need to play with the styling and layout options some more. It's a pretty big flaw to have the key sat within the map window - as again on mobile it totally obscures London and most of the South East 😂...but I'm also keen to crack on and explore some other formats of visualisation. Maybe something for the weekend!