Nokia Push Snowboarding Visualization


By daniel - Posted on 25 February 2011

Snowboarding visualization

A screenshot from the Nokia Push snowboarding visualization. Here's the demo.

Nokia and Burton's data-gathering handset technology, Nokia Push, was used to collect some snowboarding data. They made some raw logs and videos available so developers could have some fun.

Matt Brawn at Push Snowboarding liked Asterisq's work on Mentionmap and suggested we have a peek at the data. The logs included:

  • Accelerometer, gyroscope, magnetometer readings.
  • Heart rate.
  • Galvanic Skin Response (GSR) or "rush."
  • GPS data.

With the cool dataset and an old, related project I'd been wanting to revisit, I decided to give it a go.

The Data Visualization

The visualization uses the GPS readings to draw data points on a map. The big orange line gets wider when Kim moves faster. Red bars indicate his heart rate.

The map also shows big bubbles and air time when Nokia Push senses freefall. It seems to get a lot of false readings, though: the biggest jump—over a second of air—isn't a jump at all.

Best part is, the map moves as the video plays.

The result is pretty rough and there's definitely room for improvement in both polish and features but I was happy to get some ideas out on a short timeline.

Room for Improvement

Lots of room. This was my first foray into HTML 5 video and I still can't get it working in Chrome and Firefox. The map overlay works in Safari but doesn't seem to draw on the iPad.

I also got heaps of ideas while working on this project. Here's a smattering of thoughts on how this could be taken further.

  • Get a map with snow on it. Or use negative images for map tiles.
  • Redesign. Add references to graffiti (strokes, shapes) in the map drawings.
  • Those heart bars need to be aligned to the spline. Right now interpolation is linear.
  • Detect false air time readings?
  • Let the user drag the map around to control the video!
  • Automate everything so users can upload their data and draw maps.
  • Animate the drawing!

Tools & Help

Big thanks to Keenan for the encoding help. I also found this video-syncing blog post extremely useful.

Data munging was done with R and Python. VideoJS was used for embedding the video.