In June 2015 I started NHS Couch to 5K and really got the running bug. It was great to be doing something active and enjoying it at the same time and I got a great sense of achievement from it. After completing the programme, I ran my first parkrun and loved the atmosphere there, and the initiative in general.
In November, I was looking for a web side project to start and decided I wanted to do something running-related. parkrun seemed the perfect place to start as there are a lot of stats on their website.
Getting parkrun data
I found what I wanted to base the information on – runners and volunteers per date and location. I pulled some data from the parkrun website (yes – lots of copy and paste from the events history pages of each location I included as obviously I don’t have access to their database directly) and I also manually entered the latitude and longitude of the events myself as I don’t think this is something that currently exists. That was a fun few hours spent on Google Maps. Eventually I had a fair set of data to work with. In terms of the locations I picked, I found a list of the first parkruns to be started and tried to include those. I also added more that were close to my local area. So it wasn’t totally unbiased. If you stumble across this post and you’d like me to add your local parkrun, please do get in touch and I will do my best!
Hopefully I will add more locations and more data in the future, I just wanted to get the project up somewhere that people could see it and then build on it from there. I noticed on the parkrun official website you can apply for database access, I’d love to get this as I could take this project a lot further then, but I’m not sure how likely it is. I have more ideas relating to times and individual athlete progress but it would be a lot of work if I didn’t have access to the parkrun database of information. Here’s hoping!
Building the information
Using RaphaelJS with SVG , I made the “Runners and volunteers per event date” graph first. Then I stumbled across LeafletJS for maps and that was a joy to work with too – so easy I almost felt like I was cheating!
The form inputs are linked to AJAX requests – whenever they change I make an AJAX request to the database to pull the relevant data as a JSON object. Once I have the data, I replot the charts and, in the case of the second graph, redraw the axes too, depending on the range of runners.
I added some hover elements too, if you hover over the circles on the maps or the points on the graph, you can see information below about the event in question, with links back to the parkrun website. I thought this was a nice little touch. I wanted to keep the feel minimal and let the data speak for itself.
I have some more ideas on graphs I could include in the future, especially if I can get access to time data. This project is definitely a work in progress but I’m really enjoying it.
Disclaimer: I am not affiliated with parkrun in any way.