d3/_site/ex/choropleth.js

A small, free JavaScript library for manipulating documents based on data.

var data; // loaded asynchronously

var path = d3.geo.path();

var svg = d3.select("#chart")
  .append("svg:svg");

var counties = svg.append("svg:g")
    .attr("id", "counties")
    .attr("class", "Blues");

var states = svg.append("svg:g")
    .attr("id", "states");

d3.json("us-counties.json", function(json) {
  counties.selectAll("path")
      .data(json.features)
    .enter().append("svg:path")
      .attr("class", data ? quantize : null)
      .attr("d", path);
});

d3.json("us-states.json", function(json) {
  states.selectAll("path")
      .data(json.features)
    .enter().append("svg:path")
      .attr("d", path);
});

d3.json("unemployment.json", function(json) {
  data = json;
  counties.selectAll("path")
      .attr("class", quantize);
});

function quantize(d) {
  return "q" + Math.min(8, ~~(data[d.id] * 9 / 12)) + "-9";
}