adamwd392/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.counties {
  fill: none;
}
.countySelect {
  fill: red;
}
.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}

.info {
  font-family: sans-serif;
  color: #000;
  position: relative;
  bottom: 960px;
}

.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>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script>
var width = 960,
    height = 600;
var colors = ['#F7FBFF', '#DEEBF7', '#C6DBEF', '#9ECAE1', '#6BAED6', '#4292C6', '#2171B5', '#08519C', '#08306B'];

var values = [ 0, 0.015, 0.034, 0.05, 0.067, 0.084, 0.09, 0.116, 0.133, 0.15];
var color = d3.scale.linear()
        .domain(values)
        .range(colors)
        .clamp(true);

var rateById = d3.map();

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

  console.log(quantize(0.00));

var projection = d3.geo.albersUsa()
    .scale(1280)
    .translate([width / 2, height / 2]);
var path = d3.geo.path()
    .projection(projection);
var info = d3.select("body").append("div")
    .attr("id", "info");

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
queue()
    .defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/us.json")
    .defer(d3.tsv, "https://gist.githubusercontent.com/mbostock/4060606/raw/fc3887944f4525724465d40316e9a3c12d253ea6/unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
    .await(ready);
var consoleOut;
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)); })
	/*.style('fill', 'blue')*/
   	  .attr("d", path)
	  .on("mouseover", label)
      .on("mouseout", function() { info.html(""); });
  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path);
 svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.counties).features, function(d) { return d.id === '32007'; })
    .enter().append("path")
      .attr("class", "countySelect")
      .attr("d", path);
consoleOut = us;
console.log("There are " + consoleOut.objects.counties.geometries.length + " counties.");

  var legend = svg.selectAll(".legend")
      .data(color.domain().slice())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });
}

function label(d) {
  info.html("FIPS: " + d.id)
}

d3.select(self.frameElement).style("height", height + "px");
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.counties {
	fill: none;
	}
	.countySelect {
	fill: red;
	}
	.states {
	fill: none;
	stroke: #fff;
	stroke-linejoin: round;
	}

	.info {
	font-family: sans-serif;
	color: #000;
	position: relative;
	bottom: 960px;
	}

	.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>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
	<script>
	var width = 960,
	height = 600;
	var colors = ['#F7FBFF', '#DEEBF7', '#C6DBEF', '#9ECAE1', '#6BAED6', '#4292C6', '#2171B5', '#08519C', '#08306B'];

	var values = [ 0, 0.015, 0.034, 0.05, 0.067, 0.084, 0.09, 0.116, 0.133, 0.15];
	var color = d3.scale.linear()
	.domain(values)
	.range(colors)
	.clamp(true);

	var rateById = d3.map();

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

	console.log(quantize(0.00));

	var projection = d3.geo.albersUsa()
	.scale(1280)
	.translate([width / 2, height / 2]);
	var path = d3.geo.path()
	.projection(projection);
	var info = d3.select("body").append("div")
	.attr("id", "info");

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	queue()
	.defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/us.json")
	.defer(d3.tsv, "https://gist.githubusercontent.com/mbostock/4060606/raw/fc3887944f4525724465d40316e9a3c12d253ea6/unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
	.await(ready);
	var consoleOut;
	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)); })
	/.style('fill', 'blue')/
	.attr("d", path)
	.on("mouseover", label)
	.on("mouseout", function() { info.html(""); });
	svg.append("path")
	.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
	.attr("class", "states")
	.attr("d", path);
	svg.append("g")
	.attr("class", "counties")
	.selectAll("path")
	.data(topojson.feature(us, us.objects.counties).features, function(d) { return d.id === '32007'; })
	.enter().append("path")
	.attr("class", "countySelect")
	.attr("d", path);
	consoleOut = us;
	console.log("There are " + consoleOut.objects.counties.geometries.length + " counties.");

	var legend = svg.selectAll(".legend")
	.data(color.domain().slice())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
	legend.append("rect")
	.attr("x", width - 18)
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", color);
	legend.append("text")
	.attr("x", width - 24)
	.attr("y", 9)
	.attr("dy", ".35em")
	.style("text-anchor", "end")
	.text(function(d) { return d; });
	}

	function label(d) {
	info.html("FIPS: " + d.id)
	}

	d3.select(self.frameElement).style("height", height + "px");
	</script>