<!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>