This post was originally written on 19 April 2019 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 but if you are interested you can still see the results over at this static page on github.~~ I’ve now finally updated the experiment (3 years later) to use react-leaflet components and embed them into this Mdx formatted blog post. I’ve added some more details towards the end of the post.
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 gov.uk (FIRE0102).
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!
Update: Most of the above is still accurate. I’ve made some small changes to get it working again. I’m now using react-leaflet components and a gatsby plugin to make things a bit neater and grab the leaflet styles etc. I’ve now also combined the data and geometry in one file. Although keeping the geometry and data felt like a good idea at the time…time proved it to be of little benefit! The react components I’ve built will be far more valuable in terms of re-use. I’ve also added some conditional styles so that the legend hides when reaching the mobile breakpoint.
This post was written by Stuart Mackenzie
Stuart works at TPXimpact (previously known as FutureGov) changing and improving our public services. He's also known for being a father, husband, runner, photography nerd, podcaster and excotic disco dancer!
