Personalized medals for runners, v2

Prototype for a personalized medal for runners, showing speed, distance and time. In this case the data is from a marathon, tracked with Nike +.

It works likes this:

  • The outer tick marks on the disc indicate time.
  • The spiral represents distance.
  • The graph shows speed.

Here is an interactive sketch demonstrating the idea. Use your mouse move to the medal around.


Your browser does not support the canvas tag.



JavaScript is required to view the contents of this page.

The concept

I started running back in 2010. Even though I’m just an amateur, it’s fun to keep statistics about my runs. I use Nike + to track my data. A cheap sensor inside your shoe measures stride length and sends this information to an iPod or iPhone via infrared signals. While you’re running the Nike + app shows pace, distance and time. After a run, data can be uploaded to a website where you can see statics of your runs.

Once in a while, in participate in a race. Usually you receive a medal upon crossing the finish line. While I like the symbolism of this gesture, it’s a pity that these medals are so uninspiring: they usually end up somewhere in the back of closet.

I became interested in the idea of personalizing medals. Each runner could receive a medal that tells his or her story of the race. By using data from systems such as Nike +, the medal can not only be a symbol of an achievement, it can also double as an information visualization.

Making of

The Nike + system doesn’t have an official API, but there are a few libraries for getting the data out of the webapp, for example Nike+PHP.

In this example I’m using data from a marathon I ran on September 9th, 2012. I used a PHP script to get the information from Nike + in JSON format. The data is a list that looks like this:

0,0,0.0072,0.0168,0.0288,0.0432,0.0669,0.0979,0.1221,0.158,0.1941,0.2237, …

Every 10 seconds, the software records the distance ran. Speed at a particular moment can be calculated by comparing distances.

The first image shows the result of a Processing sketch that calculates speed and plots it on a circle. It looks very jittery. This is because there can a lot of variance between strides: some are short, others are longer. As a result, the graphic is not very informative: there is too much going on, and it is hard to see trends.

As a solution, I used a rolling average: instead of showing the speed at a point in time, we calculate the average speed in period preceding it. This leads to a smoother graph that gives a much better sense of the differences through time. I created a quick and dirty interface to experiment with the Control P5 library, so I could experiment with the parameters for the algorithm.

Adding a scale on the medal itself would add a lot of visual noise. My solution for this was a transparent scale that sits above the graph and that rotates from the center. Next step was to add time and distance as well. I experimented with a few options, but in the end I represented distance as a spiral. Time is shown with a tick marks.

I’m very pleased with how this project turned out and I’m definitely going to continue it. I have a few ideas I want to explore:

  • Allow runners to compare their data: if their medals are transparent, then they could overlay them on top of each other.
  • Adding more data, such as heart rate.
  • Generate the medals in real time, while the race is in progress.