{
 "metadata": {
  "name": "",
  "signature": "sha256:30266c5857592dae2924586fea59e5cc5ae5b099e6244be5bf19e5abfca26ea9"
 },
 "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": [
      {
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 1,
       "text": [
        "(3, 0, 0, 'dev')"
       ]
      }
     ],
     "prompt_number": 1
    },
    {
     "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": [
      {
       "javascript": [
        "// 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",
        "});"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x10211ae90>"
       ]
      }
     ],
     "prompt_number": 2
    },
    {
     "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": [
      {
       "html": [
        "<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>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x102117ed0>"
       ]
      }
     ],
     "prompt_number": 3
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<div id=\"county_map\" style=\"height:600px; width:100%\"></div>\n",
      "<script>\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, \"files/data/us.json\")\n",
      "        .defer(d3.tsv, \"files/temp/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",
      "})\n",
      "</script>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<div id=\"county_map\" style=\"height:600px; width:100%\"></div>\n",
        "<script>\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, \"files/data/us.json\")\n",
        "        .defer(d3.tsv, \"files/temp/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",
        "})\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x10211a690>"
       ]
      }
     ],
     "prompt_number": 4
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from census_api_utils import (counties, census_labels, diversity, FINAL_LABELS)\n",
      "r = list(counties(census_labels()))"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 5
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from pandas import DataFrame\n",
      "\n",
      "counties_df = DataFrame(r)\n",
      "counties_df = diversity(counties_df)\n",
      "counties_df[FINAL_LABELS].head()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<div style=\"max-height:1000px;max-width:1500px;overflow:auto;\">\n",
        "<table border=\"1\" class=\"dataframe\">\n",
        "  <thead>\n",
        "    <tr style=\"text-align: right;\">\n",
        "      <th></th>\n",
        "      <th>NAME</th>\n",
        "      <th>Total</th>\n",
        "      <th>White</th>\n",
        "      <th>Black</th>\n",
        "      <th>Asian</th>\n",
        "      <th>Hispanic</th>\n",
        "      <th>Other</th>\n",
        "      <th>p_White</th>\n",
        "      <th>p_Black</th>\n",
        "      <th>p_Asian</th>\n",
        "      <th>p_Hispanic</th>\n",
        "      <th>p_Other</th>\n",
        "      <th>entropy5</th>\n",
        "      <th>entropy4</th>\n",
        "      <th>entropy_rice</th>\n",
        "      <th>gini_simpson</th>\n",
        "    </tr>\n",
        "  </thead>\n",
        "  <tbody>\n",
        "    <tr>\n",
        "      <th>0</th>\n",
        "      <td> Autauga County</td>\n",
        "      <td>  54571</td>\n",
        "      <td>  42154</td>\n",
        "      <td>  9595</td>\n",
        "      <td>  467</td>\n",
        "      <td> 1310</td>\n",
        "      <td> 1045</td>\n",
        "      <td> 0.772462</td>\n",
        "      <td> 0.175826</td>\n",
        "      <td> 0.008558</td>\n",
        "      <td> 0.024005</td>\n",
        "      <td> 0.019149</td>\n",
        "      <td> 0.441816</td>\n",
        "      <td> 0.453294</td>\n",
        "      <td> 0.458294</td>\n",
        "      <td> 0.371372</td>\n",
        "    </tr>\n",
        "    <tr>\n",
        "      <th>1</th>\n",
        "      <td> Baldwin County</td>\n",
        "      <td> 182265</td>\n",
        "      <td> 152200</td>\n",
        "      <td> 16966</td>\n",
        "      <td> 1340</td>\n",
        "      <td> 7992</td>\n",
        "      <td> 3767</td>\n",
        "      <td> 0.835048</td>\n",
        "      <td> 0.093084</td>\n",
        "      <td> 0.007352</td>\n",
        "      <td> 0.043848</td>\n",
        "      <td> 0.020668</td>\n",
        "      <td> 0.388299</td>\n",
        "      <td> 0.386196</td>\n",
        "      <td> 0.392968</td>\n",
        "      <td> 0.291627</td>\n",
        "    </tr>\n",
        "    <tr>\n",
        "      <th>2</th>\n",
        "      <td> Barbour County</td>\n",
        "      <td>  27457</td>\n",
        "      <td>  12837</td>\n",
        "      <td> 12820</td>\n",
        "      <td>  107</td>\n",
        "      <td> 1387</td>\n",
        "      <td>  306</td>\n",
        "      <td> 0.467531</td>\n",
        "      <td> 0.466912</td>\n",
        "      <td> 0.003897</td>\n",
        "      <td> 0.050515</td>\n",
        "      <td> 0.011145</td>\n",
        "      <td> 0.580086</td>\n",
        "      <td> 0.636407</td>\n",
        "      <td> 0.637309</td>\n",
        "      <td> 0.560717</td>\n",
        "    </tr>\n",
        "    <tr>\n",
        "      <th>3</th>\n",
        "      <td>    Bibb County</td>\n",
        "      <td>  22915</td>\n",
        "      <td>  17191</td>\n",
        "      <td>  5024</td>\n",
        "      <td>   22</td>\n",
        "      <td>  406</td>\n",
        "      <td>  272</td>\n",
        "      <td> 0.750207</td>\n",
        "      <td> 0.219245</td>\n",
        "      <td> 0.000960</td>\n",
        "      <td> 0.017718</td>\n",
        "      <td> 0.011870</td>\n",
        "      <td> 0.421943</td>\n",
        "      <td> 0.448712</td>\n",
        "      <td> 0.451897</td>\n",
        "      <td> 0.388665</td>\n",
        "    </tr>\n",
        "    <tr>\n",
        "      <th>4</th>\n",
        "      <td>  Blount County</td>\n",
        "      <td>  57322</td>\n",
        "      <td>  50952</td>\n",
        "      <td>   724</td>\n",
        "      <td>  115</td>\n",
        "      <td> 4626</td>\n",
        "      <td>  905</td>\n",
        "      <td> 0.888873</td>\n",
        "      <td> 0.012630</td>\n",
        "      <td> 0.002006</td>\n",
        "      <td> 0.080702</td>\n",
        "      <td> 0.015788</td>\n",
        "      <td> 0.274015</td>\n",
        "      <td> 0.263741</td>\n",
        "      <td> 0.270876</td>\n",
        "      <td> 0.202978</td>\n",
        "    </tr>\n",
        "  </tbody>\n",
        "</table>\n",
        "<p>5 rows \u00d7 16 columns</p>\n",
        "</div>"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 6,
       "text": [
        "             NAME   Total   White  Black  Asian  Hispanic  Other   p_White  \\\n",
        "0  Autauga County   54571   42154   9595    467      1310   1045  0.772462   \n",
        "1  Baldwin County  182265  152200  16966   1340      7992   3767  0.835048   \n",
        "2  Barbour County   27457   12837  12820    107      1387    306  0.467531   \n",
        "3     Bibb County   22915   17191   5024     22       406    272  0.750207   \n",
        "4   Blount County   57322   50952    724    115      4626    905  0.888873   \n",
        "\n",
        "    p_Black   p_Asian  p_Hispanic   p_Other  entropy5  entropy4  entropy_rice  \\\n",
        "0  0.175826  0.008558    0.024005  0.019149  0.441816  0.453294      0.458294   \n",
        "1  0.093084  0.007352    0.043848  0.020668  0.388299  0.386196      0.392968   \n",
        "2  0.466912  0.003897    0.050515  0.011145  0.580086  0.636407      0.637309   \n",
        "3  0.219245  0.000960    0.017718  0.011870  0.421943  0.448712      0.451897   \n",
        "4  0.012630  0.002006    0.080702  0.015788  0.274015  0.263741      0.270876   \n",
        "\n",
        "   gini_simpson  \n",
        "0      0.371372  \n",
        "1      0.291627  \n",
        "2      0.560717  \n",
        "3      0.388665  \n",
        "4      0.202978  \n",
        "\n",
        "[5 rows x 16 columns]"
       ]
      }
     ],
     "prompt_number": 6
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "counties_df['fips_for_map'] = counties_df.apply(lambda s: str(int(s['state']))+s['county'], axis=1)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 7
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "df = DataFrame()\n",
      "df[['id','diversity']] = counties_df[['fips_for_map', 'entropy5']]"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 8
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "df.to_csv('temp/entropy5.tsv', sep=\"\\t\", index=False)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 9
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "!head temp/entropy5.tsv"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "id\tdiversity\r\n",
        "1001\t0.4418158563234724\r\n",
        "1003\t0.3882988721091073\r\n",
        "1005\t0.5800861120053159\r\n",
        "1007\t0.42194274556423633\r\n",
        "1009\t0.27401484623038297\r\n",
        "1011\t0.5101470309826847\r\n",
        "1013\t0.5120159003143947\r\n",
        "1015\t0.48169478052525105\r\n",
        "1017\t0.5139170933218179\r\n"
       ]
      }
     ],
     "prompt_number": 10
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<div id=\"diversity_map\" style=\"height:600px; width:100%\"></div>\n",
      "<script>\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, 1.0])\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('#diversity_map').append(\"svg\")\n",
      "        .attr(\"width\", width)\n",
      "        .attr(\"height\", height);\n",
      "\n",
      "    queue()\n",
      "        .defer(d3.json, \"files/data/us.json\")\n",
      "        .defer(d3.tsv, \"files/temp/entropy5.tsv\", function(d) { rateById.set(d.id, +d.diversity); })\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",
      "})\n",
      "</script>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<div id=\"diversity_map\" style=\"height:600px; width:100%\"></div>\n",
        "<script>\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, 1.0])\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('#diversity_map').append(\"svg\")\n",
        "        .attr(\"width\", width)\n",
        "        .attr(\"height\", height);\n",
        "\n",
        "    queue()\n",
        "        .defer(d3.json, \"files/data/us.json\")\n",
        "        .defer(d3.tsv, \"files/temp/entropy5.tsv\", function(d) { rateById.set(d.id, +d.diversity); })\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",
        "})\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x102117d50>"
       ]
      }
     ],
     "prompt_number": 11
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}