D3 Examples - bivariate choropleth

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
    <style>
        .schooldistrict {
            stroke: #000;
        }
​
        .schooldistrictv1, .schooldistrictv2 {
            opacity: .5;
        }
    </style>
    <body>
​
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
​
    <script>
        ( function map() {
            var width = $(window).width(), height = width/2;
​
            var projection = d3.geo.transverseMercator()
                .rotate([98 + 00 / 60, -35 + 00 / 60]) //https://www.ngs.noaa.gov/PUBS_LIB/ManualNOSNGS5.pdf
                .scale(1)
                .translate([0,0]);
​
            var colorv1 = d3.scale.linear()
                .domain([1, 10])
                .range(["#fee8c8", "#e34a33"]);
​
            var colorv2 = d3.scale.linear()
                .domain([1, 10])
                .range(["#deebf7", "#3182bd"]);
​
            var path = d3.geo.path()
                .projection(projection);
​
            var svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);
​
            d3.json("/darrenjaworski/raw/9f90fd89e0d7e9b4fd0d/schooldistricts.json", function(error, topo) {
​
                var schooldistrict = topojson.feature(topo, topo.objects.sdtax);
​
                var b = path.bounds(schooldistrict),
                    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.append("g")
                    .attr("class", "schooldistrictv1")
                    .selectAll("path")
                    .data(schooldistrict.features)
                    .enter()
                    .append("path")
                    .attr("class", "schooldistrict")
                    .attr("d", path)
                    .style("fill", function() { return colorv1(Math.floor((Math.random() * 10) + 1)); });
​
                svg.append("g")
                    .attr("class", "schooldistrictv2")
                    .selectAll("path")
                    .data(schooldistrict.features)
                    .enter()
                    .append("path")
                    .attr("class", "schooldistrict")
                    .attr("d", path)
                    .style("fill", function() { return colorv2(Math.floor((Math.random() * 10) + 1)); });
            });
​
        }) ()
​
    </script>
​
    