50 states

Hey blogosphere, I've noticed that since I've been doing a lot of marathons lately, I might as well go and do one in each of the 50 states. A bunch of people are doing this on a regular basis, so it's not as if I'm discovering hot water with this idea. For me, it sounds like a fun challenge, as well as a great excuse to travel around the country.

The map above shows my progress since I started running about a year and a half ago. So far, I've run in 79 states, and repeated 2. 3 more are on the radar for early next year. Mouse over the map, it's a lot of fun.

Geeking out

Alright, the map was the real motivation to write this post. I've been seeing a lot of fancy interactive graphs pop up on the web lately. Being the plot geek that I am (yeah, it's weird, I know... I blame research and grad school), I decided I wanted in on that bandwagon, too. One minor detail though -- the last time I wrote software for the web was... 2006 -- I'm sure nothing changed since then, right?

In any case, I learned a few new tricks, and you can see the result above. If you are also a running blogger, it's all open-source (github) and pretty easy to pop in a blog post. All you have to do is include this line at the end of the post (go to HTML view first):

<script src="http://s-kanev.github.io/runstats/states/50statesLoader.js"></script>

And then pop in this at the place where you want the map in your post:

<div class="states-container" id="states"
    data="https://dl.dropboxusercontent.com/s/9in4vwlbiagep6v/ran.json">
</div >

Note that you have to replace the data field with a file that shows your own state progress. If you don't have your own server, Dropbox seems to do the job fine (serving static files properly, so they can be consumed with AJAX across domains). Just upload your file there, and get a static link (click on "Share link", add ?dl=1 to the address in the new window, then copy the address that you get -- it should start with dl.dropboxusercontent.com).

This is what the beginning of my data file looks like. Fairly simple, just listing the state and whatever text you want displayed when you mouse over it. Since my map is still a little empty, putting "TBD" will color that state differently, meaning I intend to run it soon. And that's it.

[
  {
    "state": "CA",
    "text": "San Francisco 2012 4:12:42 <br/> San Francisco 2013 3:47:50"
  },
  {
    "state": "MA",
    "text": "BayState 2012 3:36:03 <br/> BayState 2013 3:47:18"                             
  },

Oh, I should also say, I used a bunch of libraries for this and their authors deserve a virtual beer or five. These are Mike Bostock for D3.js, Justin Palmer for d3-tip, James Burke for RequireJS and Moski Doski for the idea how to integrate JavaScript in a Blogger Dynamic View post (gistBlogger).

What do you think, blogosphere? Was it worth spending a few hours learning a few new tricks, or have I discovered a new form of procrastination?