Together with a bunch of cycling hashtags I also follow #dataviz tag on Instagram and recently stumbled upon this nice visualization by Brian Devine:
It shows his running stats for 2019. Each ray coming out of a circle is a week and each bubble is a run. The longer the run, the bigger the circle. Columns going towards the center show weekly totals.
Brian (the author) mentioned in comments that it took him a bunch of time to produce this. Being the author of a charting library amCharts, and knowing all the possibilities it offers, I made a challenge for myself to replicate the same chart using my lib. And, as I was planing to start a blog about dataviz for many years, I decided I will make a demo, explain how to prepare your own data, and produce this nice info-graphics by yourself, producing this first post on shmetrix! blog while am at it.
Getting the data
I seldom run but I cycle quite a lot, so my Strava account has a decent number of entries. I went there with a hope to find some easy way to filter data and save my rides as excel or CSV file. There was none. Instead, you can only download raw data in bulk by going to Settings > My Account > Download or Delete Your Account > Get Started > Request your archive.
Congratulations, you found the button!
Click it, wait a bit and after some time you will receive an e-mail with a download link. Download, unzip it and look for
activities.csv file (not a folder) there. I made a small tool where you can paste all the contents of this file, and it will generate JSON data ready to use with a chart. It’s not the most comfortable tool in the world, but I have a trust in you. The tool is made assuming that Strava produces the same
activities.csv file for all users.
Yes, yes, I know Strava API is a much better way to do that, but, I was trying to move fast and not waste two days, hence the low-tech approach. I may be implement API approach, and post a follow up post at some point down the road, though.
Making a chart
Now, when you have your data in JSON format, all you need to do is go to this pen, fork it to create your own version of it (a small button “fork” is in the right-bottom menu; very UX, much convenient) and then replace my data with your own in the top of the code panel. Right after you replace it, the chart will update automatically. You might need to sign-in or sign-up if you want to save your pen to keep it for later use.
So, this is the interactive version of the Brian’s dataviz. It’s not 100% the same (although with some adjustments to config you can make an exact copy), as I allowed myself to make some changes:
Added month bands around the chart, as week numbers do not say much to me (by the way, you can click on months to zoom-in, it’s not a very useful but results in a nice animation).
Made the gap smaller (only for the axis labels to fit in) as well as placed it in the bottom of the chart. I think it makes more sense to have a full circle to represent a year.
You are free to analyze and modify the code as you see fit. It’s all commented and quite self-explanatory.
It took me 20 minutes to build initial chart (not counting the time spent to make the data parsing tool) and then I spend an hour or so polishing it. After all it’s only a bit more than 200 lines of code (not counting the data lines).
See the Pen Radar chart showing my 2019 rides, made with amCharts by amCharts team (@amcharts) on CodePen.24419
Components of the chart
This chart consists of three axes:
- Date axis – the circular axis which displays week numbers
- Value axis – the radial axis showing weekly totals and category axis
Another radial axis showing week days.
There are two series:
- Radar Column series (for weekly totals)
- Radar Series, which shows bubble bullets representing the rides.
The size of bubbles is defined by a heat rule.
This demo can be easily extended, for example: you could have a different color or pattern bubbles to show different type of activities. Cells under the bubbles could be filled with color which intensity could indicate some other metric, like speed or altitude gain for example. The chart could be used to visualize any other yearly data.
And, if you’re not familiar with amCharts 4, make sure you click the button below: