notebooks/Day_07_A_D3_Choropleth.ipynb

{
 "metadata": {
  "name": "",
  "signature": "sha256:e125fb1bf312c51c6b564f646f367dbecd2eea9914d8b77b2348202ff05c67d5"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "The goal I set out to do: rewrite the [Choropleth](http://bl.ocks.org/mbostock/4060606) d3.js example to work in the IPython notebook.  For future work: once we are able to reproduce the Choropleth example, then work to feed the map arbitrary county-level data.  \n",
      "\n",
      "The first thing I did was to make sure I could get \n",
      "\n",
      " <http://bl.ocks.org/mbostock/raw/4060606/>\n",
      "\n",
      "to work by copying the source to\n",
      "\n",
      " <http://mashupguide.net/wwod14/mbostock_4060606.html>\n",
      "\n",
      "and serving `us.json` and `unemployment.tsv` from my server with [CORS enabled](http://enable-cors.org/) for these two files:\n",
      "\n",
      " * <http://mashupguide.net/wwod14/us.json>\n",
      " * <http://mashupguide.net/wwod14/unemployment.tsv>\n",
      " \n",
      "With the map working on standalone HTML page, then I turned to embedding the map inside an IPython notebook. That's where it got really interesting!"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# print out the version of IPython used\n",
      "import IPython\n",
      "IPython.version_info"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Initial unsuccessful attempt at rendering choropleth map in notebook"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "It turned out that the hard part of doing the translation to IPython Notebook was figuring out how to load the required JavaScript libraries.  Being an off-and-on JavaScript programmer who is ramping up on the way to writing JavaScript properly in 2014, I was still living in the world of adding a `<script>` to load libraries. The problem of such an approach is the possibility of a lot of name collisions.   I knew that the IPython developers had moved to using [RequireJS](http://requirejs.org/), but I really couldn't figure out how to use it by reading the documentation for RequireJS.  \n",
      "\n",
      "It was only when I read [Something wrong with the d3js.org/d3.v3.min.js package - Issue #1693 - mbostock/d3](https://github.com/mbostock/d3/issues/1693), which I found via [d3.js - how to integrate d3 with require.js - Stack Overflow](http://stackoverflow.com/questions/13157704/how-to-integrate-d3-with-require-js#comment32647365_13171592) that I knew what to do.  Here's the very helpful incantion I was looking for:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "// https://github.com/mbostock/d3/issues/1693\n",
      "\n",
      "// loads d3 using require \n",
      "\n",
      "require.config({\n",
      "  paths: {\n",
      "    d3: \"http://d3js.org/d3.v3.min\"\n",
      "  }\n",
      "});\n",
      "\n",
      "// example function on using d3 in callback\n",
      "\n",
      "require([\"d3\"], function(d3) {\n",
      "  console.log(d3.version);\n",
      "});"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Even though I now know the basics of using `RequireJS` to load an external module in the IPython Notebook, I think it could still be helpful to document what I did while wandering in the wilderness. I spent a lot of studying the [IPython in Depth: d3.js JavaScript example ](http://nbviewer.ipython.org/github/ipython/ipython-in-depth/blob/master/notebooks/03%20-%20Rich%20Display%20System.ipynb#JavaScript) and got parts of it working.  Specifically, I copied and used\n",
      "\n",
      "    # fetch d3 from cloudflare\n",
      "    Javascript(\"\"\"$.getScript('//cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js')\"\"\")\n",
      "    \n",
      "to successfully load the `d3` JavaScript object.  I ran into problems, when I tried  \n",
      "\n",
      "    $.getScript(\"//d3js.org/queue.v1.min.js\");\n",
      "    \n",
      "but found to my surprise that I couldn't access the `queue` object.  Indeed, \n",
      "\n",
      "    $.getScript(\"//d3js.org/d3.v3.js\"); \n",
      "    \n",
      "didn't seem to load the `d3` object either.\n",
      "\n",
      "For a few days, I found what seemed to be a successful work-around:  load what seemed to be the equivalent libraries from the [cdnjs](http://cdnjs.com/).  So I was replacing \n",
      "\n",
      "  * `d3`: <http://d3js.org/d3.v3.min.js>\n",
      "  * `queue`: <http://d3js.org/queue.v1.min.js>\n",
      "  * `topojson`: <http://d3js.org/topojson.v1.min.js>\n",
      "    \n",
      "with \n",
      "\n",
      "  * `d3`: <http://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js>\n",
      "  * `queue`: <http://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.4/queue.min.js>\n",
      "  * `topojson`: <http://cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js>\n",
      "\n",
      "The [result](http://mashupguide.net/wwod14/mbostock_4060606_2.html) was something that half-worked.  SVG was produced but nothing was visible, unless you delete the styling.  *As of this moment (2014.02.10), I've not tracked down the reasons for the discrepancy*.\n",
      "\n",
      "At any rate, I now know why the libraries from the d3js.org domain was not loading by doing only a `$.getScript` call. For example, the d3.js library was making use of [AMD \u00b7 amdjs/amdjs-api Wiki](https://github.com/amdjs/amdjs-api/wiki/AMD) (something I'm just learning now), ostensibly implemented by `RequireJS`, to get itself [loaded in a controlled, modular way](https://github.com/mbostock/d3/blob/657effbeea1d1dd1260893f545361c9599019782/d3.js#L9267).  In contrast, using `$.getScript` on [v 3.2.2 of d3.js](https://github.com/mbostock/d3/blob/v3.2.2/d3.js#L1) results in a `d3` defined a global (window) object, thus one that is available to all cells in the Notebook without any other action."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "// https://github.com/mbostock/d3/issues/1693\n",
      "require.config({\n",
      "  paths: {\n",
      "    d3: \"http://d3js.org/d3.v3.min\",\n",
      "    queue: \"http://d3js.org/queue.v1.min\",\n",
      "    topojson: \"http://d3js.org/topojson.v1.min\"\n",
      "  }\n",
      "});\n",
      "\n",
      "require([\"d3\", \"queue\", \"topojson\"], function(d3, queue, topojson) {\n",
      "  console.log(d3.version);\n",
      "  console.log(queue.version);\n",
      "  console.log(topojson.version);\n",
      "});"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<style type=\"text/css\">\n",
      "\n",
      ".counties {\n",
      "  fill: none;\n",
      "}\n",
      "\n",
      ".states {\n",
      "  fill: none;\n",
      "  stroke: #fff;\n",
      "  stroke-linejoin: round;\n",
      "}\n",
      "\n",
      ".q0-9 { fill:rgb(247,251,255); }\n",
      ".q1-9 { fill:rgb(222,235,247); }\n",
      ".q2-9 { fill:rgb(198,219,239); }\n",
      ".q3-9 { fill:rgb(158,202,225); }\n",
      ".q4-9 { fill:rgb(107,174,214); }\n",
      ".q5-9 { fill:rgb(66,146,198); }\n",
      ".q6-9 { fill:rgb(33,113,181); }\n",
      ".q7-9 { fill:rgb(8,81,156); }\n",
      ".q8-9 { fill:rgb(8,48,107); }\n",
      "\n",
      "</style>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<div id=\"county_map\" style=\"height:600px; width:100%\"></div>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "\n",
      "// https://github.com/mbostock/d3/issues/1693\n",
      "require.config({\n",
      "  paths: {\n",
      "    d3: \"http://d3js.org/d3.v3.min\",\n",
      "    queue: \"http://d3js.org/queue.v1.min\",\n",
      "    topojson: \"http://d3js.org/topojson.v1.min\"\n",
      "  }\n",
      "});\n",
      "\n",
      "require([\"d3\", \"queue\", \"topojson\"], function(d3, queue, topojson) {\n",
      "  console.log(d3.version);\n",
      "  console.log(queue.version);\n",
      "  console.log(topojson.version);\n",
      "\n",
      "\n",
      "    var width = 960,\n",
      "        height = 500;\n",
      "\n",
      "    var rateById = d3.map();\n",
      "\n",
      "    var quantize = d3.scale.quantize()\n",
      "        .domain([0, .15])\n",
      "        .range(d3.range(9).map(function(i) { return \"q\" + i + \"-9\"; }));\n",
      "\n",
      "    var path = d3.geo.path();\n",
      "\n",
      "    var svg = d3.select('#county_map').append(\"svg\")\n",
      "        .attr(\"width\", width)\n",
      "        .attr(\"height\", height);\n",
      "\n",
      "    queue()\n",
      "        .defer(d3.json, \"http://mashupguide.net/wwod14/us.json\")\n",
      "        .defer(d3.tsv, \"http://mashupguide.net/wwod14/unemployment.tsv\", function(d) { rateById.set(d.id, +d.rate); })\n",
      "        .await(ready);\n",
      "\n",
      "    function ready(error, us) {\n",
      "      svg.append(\"g\")\n",
      "          .attr(\"class\", \"counties\")\n",
      "        .selectAll(\"path\")\n",
      "          .data(topojson.feature(us, us.objects.counties).features)\n",
      "        .enter().append(\"path\")\n",
      "          .attr(\"class\", function(d) { return quantize(rateById.get(d.id)); })\n",
      "          .attr(\"d\", path);\n",
      "\n",
      "      svg.append(\"path\")\n",
      "          .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))\n",
      "          .attr(\"class\", \"states\")\n",
      "          .attr(\"d\", path);\n",
      "    }\n",
      "    \n",
      "})"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}