Monthly Archives: January 2013

D3 Ski Trip Player: Update (Compass Rose)

Image

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!

Advertisements

D3 Ski Trip Player: Update

Image

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

Image

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)

Image

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

Image

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.

Coalspur Vista Project Map

Image

Coalspur is planning to build “one of the largest export thermal coal operations in North America” in Hinton, AB’s backyard. It’s large. I’m glad none of my cross-country skiing trails are down there. Look at the map here.

edit: I added the pit plan. I hope the folks in the valley and Thompson Lake have ear plugs and a good dustbuster.

My First Geo D3

Image

At least since JS.Geo13, all the cool web-mapping geo-kids have been talking about D3.js. I’ve seen it from afar for a while now, and this morning I decided to jump in. Here is my first geographic stab at using D3 (technically, I used D3 to make my previously posted wordcloud, but I basically just copied that code from somewhere else). The map “simply” cycles through five projections, which is pretty amazing considering how easy it was to code vs. the magic that’s been built into D3.

Honestly, the most difficult thing was the journey from ArcGIS file gdb feature class to GeoJSON. Here’s how I did it:

  1. ArcGIS: Feature to Line, simplify (I used 10km as the tolerance), save as shapefile.
  2. QGIS: convert shapefile to GeoJSON using OGR Layer Converter plugin (could I do this in ArcGIS?) Can also simply “Save As…” GeoJSON.

Also, I use a GoDaddy server, and had to add a line to my web.config file in order to load JSON files. For the record, I find this type of finicky business extremely annoying (I’m sure there’s a good reason for it, I just don’t care). Don’t tell me, “Cannot load JSON”, just load it! Here’s the line:

<mimeMap fileExtension=”.json” mimeType=”application/json” />

Some questions for the D3 geeks out there: How do I auto-center the view on the given SVG shape? I used trial and error to come up with the translations. Ditto for scale. Is there a way to fire animations in linear order, rather than hardcoding delay times? Or should that be done with the data array? Any help and guidance is greatly appreciated!

In summation, I’m starting to see what all the hype is about and it’s exciting. D3 promises to be a fresh alternative to mercator-based slippy maps.

edit: I started using ShiftEdit, an online IDE. I like it – hooks up nicely via FTP to my web server, available anywhere, good intellisense (at least for my purposes). I’m interested to know if you use a different online IDE. Let me know.

edit: in order to get this to work properly in Firefox, it was necessary to explicitly set the dimensions of the SVG element. Not so in Chrome.