Data Visualisation Project

April 27, 2015

All visualizations:

Steps are an interesting factor about ones self and is often a key indicator to someones health. The world health organizations recommends 10,000 steps a day. Unfortunately many of us to not hit this target, and with the invention with main new activity trackers (think Jawbone and Fitbit) its obvious the importance this data to our health.

I have decided to focus on steps and the presentation of this data.

The two key parts, and two main challenges of this project is collecting/parsing the data to a valid usable format, and displaying the data in a meaning full manor.

Once the key aspects of the project were decided on it was important next to decide on technologies.
For the data, I used the daily collected steps that my iPhone collected using its M5 processor.

Instead of using Processing, and decided to use D3js, a industry standing when it comes to presenting data on the web, and although there was a massive learning curve, I believe that the skills would be valuable going forward.


First I spent a good amount of time converting the exported data from the health app (XML) into a useable form (JSON).
Once it was in this form I was able to simply graph it as a bar chart. It was obvious that I had days of extremely sedentary, and then days when I walked 20,000+ steps.

It was very important to me that I was able to present the data is a very unique and pretty manor. Thinking about it, I considered how much further a person who walks 20,000 steps could go (things they could see etc) in comparison with someone who just walks 1000steps.

I thought mapping similar to a radar style could be interesting and I went to work.
Designing was a little difficult.

For my data set -> data = []
I need to first get the size of the data,
then I need to find the separation in degrees. This was 360/count.
Next I found the angle that each of the lines would be at from 0 degrees, and then worked out the X and Y co-ordinates.

I created a random data set with 100 random numbers from 0-100. I then picked a visually appealing two tone color theme and had it draw each of the data points. Using this method created a very pretty picture, however depending on the data, the circle would either have lines going way outside of the bounding circle or inside really small and hard to visualize.

So the next part of the project that I needed to do was create a scale-function. Which was able to normalize the data and map concisely to the bounding circle.
(Link with small animation, random data live)

Next I played around with the color scheme and was able to comparatively map two sets of data:

Here I am able to map two sets of data, with one of the sample sets with a color transparency such that the underlying data can be viewed, and using node end point markers (circles) to visualize the length of each piece of data.

Next I imported my own person walking data and mapped it to the circle. Furthermore, many studies show that people tend to walk more steps of the weekend than they do during the week (due to work/study most likely). As such, I visually highlighted Saturday and Sunday to indicate weekends, and to see if I did actually walk more on the weekends.

(Data has been normalized, with most steps in a day = 21,123)

Next I tried to replicate what perhaps someone who averages 10,000 steps a day data set might look like.
I used a function that used a weekday base rate as 8000 and then added or subtracted between 0-2000 (randomly) for each weekday
and then weekend base rate as 10000 (+/-)3000.

Then created a nice data set with some natural looking variance. This was then mapped against my step activity for the previous month.

MySteps vs DataSet (Normalized)

MySteps vs DataSet (Not Normalized)

Finally I used this data and approximately mapped it to a map of Manhattan. The maps roughly indicated the distance you could travel (and back) based on the steps that you have taken.

MySteps vs DataSet on Map

Additionally I created some fun random dataset mapping that is very visually and interactively appealing:

This is a link to all the D3js Visualizations that I did for the project: