Maps: Rects

_.md

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

config.json

{"description":"Maps: Rects","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},"grid.tsv":{"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/norn4MH.png","ajax-caching":true,"inline-console":true}

data.csv

grid.tsv

inlet.js

var dataValues = tb.data;
var dataGrid = tb.grid;

var values = {},
    lookup = {};

var w = 63,
    padding = w/15;

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

_.each(dataValues, function(d) {
  values[d[columnStateNameShort]] = {
    "value": +d[columnMetric],
    "id": d[columnStateNameShort],
    "label": d[columnStateName]
  }
});

_.each(dataGrid, function(d) {
  values[d[columnStateNameShort]]["grid"] = {
    "row": +d.row,
    "col": +d.col
  };
  lookup[d[columnStateNameShort]] = d[columnStateName];
});


var max = d3.max(_.chain(values).values().pluck("value").value());
// max = 15;	
console.log(max);

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 svg = g; 

function ready() {
  var states = svg.selectAll("g")
  .data(_.values(values))
  .enter().append("g")
  .attr({
    "class": function(d) { return "state " + quantize(d.value); },
    "transform": function(d) { 
      var tx = d.grid.col * (w + padding),
          ty = d.grid.row * (w + padding);
      return "translate(" + [tx, ty].join(" ") + ")"
    }
  });
  
  states.append("rect")
  .attr({
    "width": w,
    "height": w,
    "rx": w/3
  });

  states.append("text")
  .attr({
    "text-anchor": "middle",
    "x": w/2,
    "y": w/2 + 5
  })
  .text(function(d) { return d["id"] })
}

ready();

styles.css

.counties {
  fill: none;
}

.state {
  stroke-linejoin: round;
  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 rect { fill: #eff3ff; }
.q1-4 rect { fill: #bdd7e7; }
.q2-4 rect { fill: #6baed6; }
.q3-4 rect { fill: #2171b5; }

us.json