Friday, October 23, 2015

Boring Data Can Be Fun

I was helping out with a site redesign and found a document in the assets that was a poorly formatted table of times to help a bicyclist calculate their speed on a known course.  It looked like it had been hit with the 'ugly stick'.

I thought, "this could be used to make something interactive and fun" and so I put together a little demonstration of what I mean: an interactive calculator with a sense of humor.

In a nutshell, it is simply an HTML 'range' element or slider that triggers the display of the corresponding speed. The widget displays the same information as the table, but some styling makes it look nice.

Normally, the slider is restricted to a reasonable range of values (who can typically bicycle comfortably at speeds greater than 30 mph?). But allowing people to make silly choices gives an opportunity for education and fun and so we display various 'speed' facts from Wikipedia as the speed gets higher.

The widget also offers links to rides of the indicated speed if you have a back-end that supports it (e.g., Drupal).

You can find the code on GitHub and test drive it/play with it on JSFiddle as well. Now I have to figure out how to tie those two together :)

Labels: , , , , , , ,


Post a Comment

<< Home