Tag Archives: visualization

3-Letter Word Scatterplot


Here‘s a D3-powered scatterplot showing the distribution of 3-letter words, at least, according to wordfind.com.

Instructions are simple: chose the starting letter in the dropdown list. Then, find individual words by the second letter (y-axis) and third letter (x-axis). Mouseover the point to convince yourself.


D3 Ski Trip Player: Update (Compass Rose)


I’ve added a couple pieces of “functionality” (not obviously useful) to my previously posted Ski Trip Player (here and here, and now HERE). There is now a button on the map portion that allows the user to switch between projections (1. Mercator and 2. Lambert Azimuthal Equal Area). The entire map switches and the little ski man keeps moving along. The trickier part was creating the compass rose and having it rotate within the map boundary, which it does. Take a look at the source code to see how I do it – I’m positive there is a more efficient way to do it. Let me know!

D3 Ski Trip Player: Update


I had some time to kill waiting for a Python script to wrap itself up, so I worked on my D3-powered Ski Trip Player. I focused on the elevation profile, adding: 1) diverging color scale to indicate climbing/sliding areas, 2) horizon line to demarcate the travel path, and 3) legend. I suspect I’ve compromised looks for function in this iteration, but it was instructive nonetheless.

D3 Ski Trip Player


It’s official – I like D3. Here‘s an example using XML data from one of my ski excursions (collected by GPS watch, downloaded from Garmin Connect), and trail data from a Google Fusion table (run through ft2JSON to get a JSON response). There’s an animated elevation profile with associated animated map (over 1700 points animated!). It works well, but as always, please feel free to take a look at the code and see if you can make it more efficient.

GPS watch → CSV → D3 (pt. 2)


I continued learning D3 today, adding (here) to my previous post displaying my winter activities. The major addition is an average heart rate line for each activity, drawing heavily on this D3 example. I found it pretty tricky to get the data filtering to work properly, but this seemed to do the trick – see the source code. I’m definitely still learning, so please feel free to reply with suggestions for optimizing the code.

GPS watch → CSV → D3


Ever since I was given it, I’ve been a slave to my Garmin Forerunner 410 GPS watch. I’ve always enjoyed exercise, but now it’s like an addiction. I don’t do it because I want to get fit or fast or anything else, I do it because I want to fill in another record in Garmin Connect. Connect makes nice graphical report summaries on its own, but one great feature is the ability to export CSV files (although an API would be ideal, nudge nudge) of your workout history or individual workouts (every individual GPS point with location, elevation, heart rate, speed, etc.). As part of my continued effort to learn D3, I’ve made a short animated graph sequence of some of my cross-country ski sessions from one of my exported CSV files, here.

IDW on Google Map


Inspired by bad weather this afternoon, I made this basic Inverse Distance Weighted interpolator, written in JavaScript, displayed by PaperJS objects on top of a Google Map. It makes several randomly placed points with random values, then interpolates the colored surface based on the distance-weighted influence of the points. There are lots of geographic applications that may use this technique (rain, temperature surfaces, etc.), but I’m not feeling too inspired to go further right now. Let me know if you do!