Python Data Analysis 10 - Embedding the JavaScript D3 Library in IPython Notebook

The Open Data Source for Demographics

http://www.machinalis.com/blog/embedding-interactive-charts-on-an-ipython-nb/

http://www.census.gov

import numpy as np

import pandas as pd

import matplotlib.pyplot as plt

%matplotlib inline

from urllib2 import urlopen

pop2014 = pd.read_csv(

    urlopen(íhttp://www.census.gov/popest/data/counties/totals/2014/files/CO-EST2014-alldata.csví),

    encoding=ílatin-1í,

    dtype={íSTATEí: ístrí, íCOUNTYí: ístrí}

)

pop2014_by_state = pop2014[pop2014.SUMLEV == 40]

states = pop2014_by_state[[íSTNAMEí,íPOPESTIMATE2011í, íPOPESTIMATE2012í, íPOPESTIMATE2013í,íPOPESTIMATE2014í]]

states.sort([íPOPESTIMATE2014í], ascending=False)[:5]

-- The JavaScript D3 Library

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

%%javascript

require.config({

    paths: {

        d3: í//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.miní

    }

});

from IPython.core.display import display, Javascript, HTML

display(HTML("""

<style>

.bar {

   fill: steelblue;

}

.bar:hover{

   fill: brown;

}

.axis {

   font: 10px sans-serif;

}

.axis path,

.axis line {

   fill: none;

   stroke: #000;

}

.x.axis path {

   display: none;

}

</style>

<div id="chart_d3" />

"""))

conda install jinja2

pip install jinja2

import jinja2

myTemplate = jinja2.Template("""

require(["d3"], function(d3){

   var data = []

   {% for row in data %}

   data.push({ ístateí: í{{ row[1] }}í, ípopulationí: {{ row[5] }}  });

   {% endfor %}

d3.select("#chart_d3 svg").remove()

    var margin = {top: 20, right: 20, bottom: 30, left: 40},

        width = 800 - margin.left - margin.right,

        height = 400 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()

        .rangeRoundBands([0, width], .25);

    var y = d3.scale.linear()

        .range([height, 0]);

    var xAxis = d3.svg.axis()

        .scale(x)

        .orient("bottom");

    var yAxis = d3.svg.axis()

        .scale(y)

        .orient("left")

        .ticks(10)

        .tickFormat(d3.format(í.1sí));

    var svg = d3.select("#chart_d3").append("svg")

        .attr("width", width + margin.left + margin.right)

        .attr("height", height + margin.top + margin.bottom)

        .append("g")

        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    x.domain(data.map(function(d) { return d.state; }));

    y.domain([0, d3.max(data, function(d) { return d.population; })]);

    svg.append("g")

        .attr("class", "x axis")

        .attr("transform", "translate(0," + height + ")")

        .call(xAxis);

    svg.append("g")

        .attr("class", "y axis")

        .call(yAxis)

        .append("text")

        .attr("transform", "rotate(-90)")

        .attr("y", 6)

        .attr("dy", ".71em")

        .style("text-anchor", "end")

        .text("Population");

    svg.selectAll(".bar")

        .data(data)

        .enter().append("rect")

        .attr("class", "bar")

        .attr("x", function(d) { return x(d.state); })

        .attr("width", x.rangeBand())

        .attr("y", function(d) { return y(d.population); })

        .attr("height", function(d) { return height - y(d.population); });

});

""");

display(Javascript(myTemplate.render(

    data=states.sort([íPOPESTIMATE2012í], ascending=False)[:10].itertuples()

)))

-- Drawing a Clustered Bar Chart

display(HTML("""

<style>

.bar2011 {

   fill: steelblue;

}

.bar2012 {

   fill: red;

}

.bar2013 {

   fill: yellow;

}

.bar2014 {

   fill: green;

}

.axis {

   font: 10px sans-serif;

}

.axis path,

.axis line {

   fill: none;

   stroke: #000;

}

.x.axis path {

   display: none;

}

</style>

<div id="chart_d3" />

"""))

import jinja2

myTemplate = jinja2.Template("""

require(["d3"], function(d3){

   var data = []

   var data2 = []

   var data3 = []

   var data4 = []

   {% for row in data %}

   data.push({ ístateí: í{{ row[1] }}í, ípopulationí: {{ row[2] }}  });

   data2.push({ ístateí: í{{ row[1] }}í, ípopulationí: {{ row[3] }}  });

   data3.push({ ístateí: í{{ row[1] }}í, ípopulationí: {{ row[4] }}  });

   data4.push({ ístateí: í{{ row[1] }}í, ípopulationí: {{ row[5] }}  });

   {% endfor %}

d3.select("#chart_d3 svg").remove()

    var margin = {top: 20, right: 20, bottom: 30, left: 40},

        width = 800 - margin.left - margin.right,

        height = 400 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()

        .rangeRoundBands([0, width], .25);

    var y = d3.scale.linear()

        .range([height, 0]);

    var xAxis = d3.svg.axis()

        .scale(x)

        .orient("bottom");

    var yAxis = d3.svg.axis()

        .scale(y)

        .orient("left")

        .ticks(10)

        .tickFormat(d3.format(í.1sí));

    var svg = d3.select("#chart_d3").append("svg")

        .attr("width", width + margin.left + margin.right)

        .attr("height", height + margin.top + margin.bottom)

        .append("g")

        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    x.domain(data.map(function(d) { return d.state; }));

    y.domain([0, d3.max(data, function(d) { return d.population; })]);

    svg.append("g")

        .attr("class", "x axis")

        .attr("transform", "translate(0," + height + ")")

        .call(xAxis);

    svg.append("g")

        .attr("class", "y axis")

        .call(yAxis)

        .append("text")

        .attr("transform", "rotate(-90)")

        .attr("y", 6)

        .attr("dy", ".71em")

        .style("text-anchor", "end")

        .text("Population");

    svg.selectAll(".bar2011")

        .data(data)

        .enter().append("rect")

        .attr("class", "bar2011")

        .attr("x", function(d) { return x(d.state); })

        .attr("width", x.rangeBand()/4)

        .attr("y", function(d) { return y(d.population); })

        .attr("height", function(d) { return height - y(d.population); });

    svg.selectAll(".bar2012")

        .data(data2)

        .enter().append("rect")

        .attr("class", "bar2012")

        .attr("x", function(d) { return (x(d.state)+x.rangeBand()/4); })

        .attr("width", x.rangeBand()/4)

        .attr("y", function(d) { return y(d.population); })

        .attr("height", function(d) { return height - y(d.population); });

    svg.selectAll(".bar2013")

        .data(data3)

        .enter().append("rect")

        .attr("class", "bar2013")

        .attr("x", function(d) { return (x(d.state)+2*x.rangeBand()/4); })

        .attr("width", x.rangeBand()/4)

        .attr("y", function(d) { return y(d.population); })

        .attr("height", function(d) { return height - y(d.population); });

    svg.selectAll(".bar2014")

        .data(data4)

        .enter().append("rect")

        .attr("class", "bar2014")

        .attr("x", function(d) { return (x(d.state)+3*x.rangeBand()/4); })

        .attr("width", x.rangeBand()/4)

        .attr("y", function(d) { return y(d.population); })

        .attr("height", function(d) { return height - y(d.population); });

});

""");

display(Javascript(myTemplate.render(

    data=states.sort([íPOPESTIMATE2014í], ascending=False)[:5].itertuples()

)))

-- The Choropleth Maps

https://github.com/mbostock/us-atlas

http://bl.ocks.org/mbostock/4060606

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>

%%javascript

require.config({

    paths: {

        d3: í//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.miní,

        queue: í//cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.miní,

        topojson: í//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.miní

    }

});

from IPython.core.display import display, Javascript, HTML

display(HTML("""

<style>

.counties {

  fill: none;

}

.states {

  fill: none;

  stroke: #fff;

  stroke-linejoin: round;

}

.q0-9 { fill:rgb(247,251,255); }

.q1-9 { fill:rgb(222,235,247); }

.q2-9 { fill:rgb(198,219,239); }

.q3-9 { fill:rgb(158,202,225); }

.q4-9 { fill:rgb(107,174,214); }

.q5-9 { fill:rgb(66,146,198); }

.q6-9 { fill:rgb(33,113,181); }

.q7-9 { fill:rgb(8,81,156); }

.q8-9 { fill:rgb(8,48,107); }

</style>

<div id="choropleth" />

"""))

import jinja2

choropleth = jinja2.Template("""

require(["d3","queue","topojson"], function(d3,queue,topojson){

//   var data = []

//   {% for row in data %}

//   data.push({ ístateí: í{{ row[1] }}í, ípopulationí: {{ row[2] }}  });

//   {% endfor %}

d3.select("#choropleth svg").remove()

var width = 960,

    height = 600;

var rateById = d3.map();

ar quantize = d3.scale.quantize()

    .domain([0, .15])

    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

var projection = d3.geo.albersUsa()

    .scale(1280)

    .translate([width / 2, height / 2]);

var path = d3.geo.path()

    .projection(projection);

//row to modify

var svg = d3.select("#choropleth").append("svg")

    .attr("width", width)

    .attr("height", height);

queue()

    .defer(d3.json, "us.json")

    .defer(d3.tsv, "unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })

    .await(ready);

function ready(error, us) {

  if (error) throw error;

  svg.append("g")

      .attr("class", "counties")

    .selectAll("path")

      .data(topojson.feature(us, us.objects.counties).features)

    .enter().append("path")

      .attr("class", function(d) { return quantize(rateById.get(d.id)); })

      .attr("d", path);

  svg.append("path")

      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))

      .attr("class", "states")

      .attr("d", path);

}

});

""");

display(Javascript(choropleth.render()))

-- The Choropleth Map of the US Population in 2014

pop2014_by_county = pop2014[pop2014.SUMLEV == 50]

pop2014_by_county

from urllib2 import urlopen

USJSONnames = pd.read_table(urlopen(íhttp://bl.ocks.org/mbostock/raw/4090846/us-county-names.tsví))

USJSONnames

USJSONnames[USJSONnames[ínameí] == íBaldwiní]

pop2014_by_county[pop2014_by_county[íCTYNAMEí] == íBaldwin Countyí]

counties = pop2014_by_county[[íSTATEí,íCOUNTYí,íPOPESTIMATE2014í]]

counties.is_copy = False

counties[íidí] = counties[íSTATEí].str.lstrip(í0í) + "" + counties[íCOUNTYí]

del counties[íSTATEí]

del counties[íCOUNTYí]

counties.columns = [ípopí,íidí]

counties = counties[[íidí,ípopí]]

counties.to_csv(ípopulation.csví)

from IPython.core.display import display, Javascript, HTML

display(HTML("""

<style>

.counties {

  fill: none;

}

.states {

  fill: none;

  stroke: #fff;

  stroke-linejoin: round;

}

.q0-9 { fill:rgb(247,251,255); }

.q1-9 { fill:rgb(222,235,247); }

.q2-9 { fill:rgb(198,219,239); }

.q3-9 { fill:rgb(158,202,225); }

.q4-9 { fill:rgb(107,174,214); }

.q5-9 { fill:rgb(66,146,198); }

.q6-9 { fill:rgb(33,113,181); }

.q7-9 { fill:rgb(8,81,156); }

.q8-9 { fill:rgb(8,48,107); }

</style>

<div id="choropleth2" />

"""))

choropleth2 = jinja2.Template("""

require(["d3","queue","topojson"], function(d3,queue,topojson){

   var data = []

d3.select("#choropleth2 svg").remove()

var width = 960,

    height = 600;

var rateById = d3.map();

var quantize = d3.scale.quantize()

    .domain([0, 1000000])

    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

var projection = d3.geo.albersUsa()

    .scale(1280)

    .translate([width / 2, height / 2]);

var path = d3.geo.path()

    .projection(projection);

var svg = d3.select("#choropleth2").append("svg")

    .attr("width", width)

    .attr("height", height);

queue()

    .defer(d3.json, "us.json")

    .defer(d3.csv,"population.csv", function(d) { rateById.set(d.id, +d.pop); })

    .await(ready);

function ready(error, us) {

  if (error) throw error;

  svg.append("g")

      .attr("class", "counties")

    .selectAll("path")

      .data(topojson.feature(us, us.objects.counties).features)

    .enter().append("path")

      .attr("class", function(d) { return quantize(rateById.get(d.id)); })

      .attr("d", path);

  svg.append("path")

      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))

      .attr("class", "states")

      .attr("d", path);

}

});

""");

display(Javascript(choropleth2.render()))