Since I announced completing CS253, I might as well note that I completed the Udacity Programming Languages class (CS262) as well. I had a lot of fun with this class. Wes Wiemer is a fantastic lecturer, keeping it interesting with extensive literary and historical references in examples, ranging from Jane Austen and Urdu poetry to The Dark City. I spent a significant amount of time just chasing down the references for fun.

This course was focused on lexing, parsing and interpreting javascript and html. It was a good reminder of how to build a lexer and parser and the wonders of recursion.

I don’t remember exactly when I finished this course (I think in the summer), but apparently I applied for the certificate in October.

Continuing to explore the GAPRI data on access to pain medication around the world, I decided to try a choropleth map (with country colors now corresponding to morphine/death). Check out the working interactive choropleth map.

I got to use a few new tools in getting this to work:

In order to use the d3.geo.path which converts GeoJSON to SVG for display in a web page, I needed first to covert my shapefile with the GAPRI data into a GeoJSON format. For future use I will probably explore ogr2ogr to do this transformation. But for my initial test I used a web based MyGeodata Converter, which worked like a charm.

d3 Winkel Tripel Projection, this projection is in the geo.projection d3-plugin. I had some trouble getting it to work, I think because parts of this are in transition with d3.v3. I ended up using versions based on this example.

d3 HsL color interpolation: Pretty simple. You first need to scale your data from 0-1, then pass that into the color interpolator. I found the docs a little confusing on this point, so here is an example:

Tooltips: I used svg:title for the tooltips. Super simple, just append(“svg:title”) to each path and set the .text() to what you want to display. I spent more time handling the special case of “No data”.

d3 Zoom Behavior: The zoom behavior leaves something to be desired, but it was simple enough to get the d3.behavior.zoom() to work based on this example, the important code is svg.call() and the redraw() function.

Todo:

Connect the table legend and the map interactively.

Use a better zoom functionality that is more discoverable (zoom buttons and grab icon for panning).