D3 Examples - TOPOJSON - OK census tract median income

TOPOJSON - OK census tract median income

This is a continuation of previous post. This map is a replica of a technique by Mike Bostock, who all love and adoration must go to. Census tracts are from the Census Bureau as well as from their "factfinder" monstrosity. I most likely have messed up the state plane coordinates since this was a practice run. As usual, feel free to contact me with complaints, questions, or hate mail.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .tract {
​
    }
​
    .tract:hover {
        fill: blue;
    }
​
    .tract-border {
        fill: none;
        pointer-events: none;
    }
​
</style>
<title>Oklahoma Census Tracts</title>
<body>
​
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
​
    <script>
        var width = 2000, height = 1000;
​
        var formatNumber = d3.format(",d");
​
        var projection = d3.geo.conicConformal().parallels([37 + 34 / 60, 90 + 46 / 60]).rotate([98 + 00 / 60, -35 + 00 / 60]).translate([width / 2, height / 2]);
​
        var color = d3.scale.threshold().domain([5000, 20000, 30000, 40000, 50000, 60000, 100000, 160000]).range(["#FFF7FB", "#ECE7F2", "#D0D1E6", "#A6BDDB", "#74A9CF", "#3690C0", "#0570B0", "#045A8D", "#023858"]);
​
        var path = d3.geo.path().projection(projection);
​
        var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
​
        d3.json("ok-censustractmedian.json", function(error, ok) {
            var tract = topojson.feature(ok, ok.objects.tract);
​
            projection.scale(1).translate([0, 0]);
​
            var b = path.bounds(tract), s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height), t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
​
            projection.scale(s).translate(t);
​
            svg.selectAll("path").data(tract.features.filter(function(d) {
                return d.id;
            })).enter().append("path").attr("class", "tract").attr("d", path).attr("fill", function(d) {
                return color(d.properties.median);
            }).append("title").text(function(d) {
                return d.properties.median;
            });
​
            svg.append("path").datum(topojson.mesh(ok, ok.objects.tract, function(a, b) {
                return a !== b;
            })).attr("class", "tract-border").attr("d", path);
        });
​
        d3.select(self.frameElement).style("height", height + "px");
​
    </script>
​
    