Maps: Choropleth

_.md

[ Launch: Choropleth Test ] 08e7b610d21e4d8357a6 by poezn
[ Launch: Choropleth Test ] 7494487 by poezn

config.json

{"description":"Maps: Choropleth","endpoint":"","display":"svg","public":true,"require":[{"name":"TopoJSON","url":"http://d3js.org/topojson.v1.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"us.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/PXSQbbH.png","ajax-caching":true,"inline-console":true}

data.csv

inlet.js

var values = {};

var columnMetric = "avgshare08_12",
    columnStateName = "state";

var data = tb.data;
_.each(data, function(d) {
  values[d[columnStateName]] = +d[columnMetric];
});


var max = d3.max(_.values(values));
// max = 15;	
console.log(max);


var us = tb.us;

var width = 960,
    height = 500;

var quantize = d3.scale.quantize()
    .domain([0, max])
    .range(d3.range(4).map(function(i) { return "q" + i + "-4"; }));

var path = d3.geo.path();

var svg = g; 

function ready(us) {
  svg.selectAll("path")
  .data(topojson.feature(us, us.objects.states, function(a, b) { return a !== b; }).features)
  .enter().append("path")
      .attr("class", function(d) { return "state " + quantize(values[d.id]); })
      .attr("d", path);
}

ready(us);

styles.css

.counties {
  fill: none;
}

.state {
  stroke-linejoin: round;
  stroke: #FFFFFF;

  font-size: 14px
}

#display {
  background-color: #FFFFFF;
}

.q0-4 text { fill: #001966; }
.q1-4 text { fill: #001966; }
.q2-4 text { fill: #001966; }
.q3-4 text { fill: #d8e9f7; }


.q0-4 { fill: #eff3ff; }
.q1-4 { fill: #bdd7e7; }
.q2-4 { fill: #6baed6; }
.q3-4 { fill: #2171b5; }

us.json