Monthly Archives: December 2012

Udacity CS 262 Programming Languages

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.

Completed Udacity CS 253 Web Application Engineering Class

This week I completed the Udacity Web Application Engineering Class (CS253). It was a super useful introduction to:

  • Google App Engine (my first web app framework)
  • How to architect a site
  • Glimpses of the complexity of scaling a big site
  • Password/login management, hashing, salting and secret keys
  • Cookies! (with hashes to avoid hijacking)
  • Basics of HTTP requests, GET and POST and when to use each
  • memcache, (reducing the number of database queries to speed things up)
  • using an external API
  • providing an alternate API (.json version of site)
  • permalinks
  • escaping input (to avoid code injection)

We built a blog and a wiki (since I don’t care to make them robust to spam, I won’t share them here, sorry). It was a very worthwhile introduction for me!

Interactive Choropleth Map of Morphine Access around the world.

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.

screenshot of cloropleth map of morphine access around the world

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

  1. 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.
  2. 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.
  3. 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: 
    // normalize your data
var normScale = d3.scale.linear()
    .domain([0, _(data).max()])
    .range([0,1]);
// create the color interpolator
var interpColor = d3.interpolateHsl('#EC8076','#84BB68');
// later get the color corresponding to your data
color = interpColor(normScale(d))
  4. Mouseover Highlight: To highlight the country by color on mouse over used: 
    .on("mouseover", function(e){d3.select(this).style("fill", "steelblue")})
.on("mouseout", function(d){d3.select(this).style("fill", MapColors(d))})
  5. 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”.
  6. 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:

  1. Connect the table legend and the map interactively.
  2. Use a better zoom functionality that is more discoverable (zoom buttons and grab icon for panning).