d3byex · November 26, 2015 00:45
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta name="description" content="D3byEX 12.14" />
    <meta charset="utf-8">
    <style>
        .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>
 </head>
 <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
    <script>
        var width = 1024, height = 728;
        var svg = d3.select("body")
            .append("svg")
            .attr({
                width: width,
                height: height
            });

        var rateById = d3.map();

        var usDataUrl = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us.json',
            unempDataUrl = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/unemployment.tsv';

        queue()
            .defer(d3.json, usDataUrl)
            .defer(d3.tsv, unempDataUrl, function (d) { rateById.set(d.id, +d.rate); })
            .await(ready);

        function ready(error, us) {
            var projection = d3.geo.albersUsa()
                .scale(1280)
                .translate([width / 2, height / 2]);
            var path = d3.geo.path()
                .projection(projection);

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

            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',
                    fill: "none",
                    stroke: "#fff",
                    "stroke-linejoin": "round",
                    "d": path
                });
        }

    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="D3byEX 12.14" />
	<meta charset="utf-8">
	<style>
	.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>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
	<script>
	var width = 1024, height = 728;
	var svg = d3.select("body")
	.append("svg")
	.attr({
	width: width,
	height: height
	});

	var rateById = d3.map();

	var usDataUrl = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us.json',
	unempDataUrl = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/unemployment.tsv';

	queue()
	.defer(d3.json, usDataUrl)
	.defer(d3.tsv, unempDataUrl, function (d) { rateById.set(d.id, +d.rate); })
	.await(ready);

	function ready(error, us) {
	var projection = d3.geo.albersUsa()
	.scale(1280)
	.translate([width / 2, height / 2]);
	var path = d3.geo.path()
	.projection(projection);

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

	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',
	fill: "none",
	stroke: "#fff",
	"stroke-linejoin": "round",
	"d": path
	});
	}

	</script>
	</body>
	</html>