D3 Examples - Minnesota counties colored by population

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
    .state-border {
        fill: none;
        stroke: #333;
    }
​
    .county-border {
        fill: none;
        stroke: #000;
        stroke-width: 1.01px;
        stroke-linejoin: round;
        stroke-linecap: round;
    }
​
    svg {
        font: 10px sans-serif;
    }
​
    .key path {
        display: none;
    }
​
    .key line {
        stroke: #000;
        shape-rendering: crispEdges;
    }
​
</style>
​
<body>
​
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
​
    <script>
​
    var width=960, height=500;
​
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
​
​
    var color = d3.scale.threshold()
        .domain([15000,60000,180000,420000])
        .range(["#ffffcc","#c2e699","#78c679","#31a354","#006837"]);
​
    var x = d3.scale.linear()
        .domain([0, 500000])
        .range([0, 240]);
​
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickSize(13)
        .tickValues(color.domain())
        .tickFormat(function (n) {return (n/1000).toString()});
​
    var g = svg.append("g")
        .attr("class", "key")
        .attr("transform", "translate(40,40)")
​
    var rects = g.selectAll("rect")
        .data(color.range().map(function(d,i) {
            return {
                x0: i ? x(color.domain()[i-1]) : x.range()[0],
                x1: i < color.domain().length ? x(color.domain()[i]) : x.range()[1],
                z: d
            };
        }))
        .enter().append("rect")
            .attr("height", 8)
            .attr("x", function(d){return d.x0;})
            .attr("width", function(d){return d.x1-d.x0;})
            .style("fill", function(d){return d.z;});
​
    g.call(xAxis).append("text")
        .attr("class", "caption")
        .attr("y", -6)
        .text("Population (thousands)");
​
    var projection = d3.geo.mercator()
        .scale(1)
        .translate([0,0]);
​
    var path = d3.geo.path()
        .projection(projection);
​
    d3.json("mn_state.json", function(error, mn) {
​
        var county_geometries = mn.objects.counties.geometries;
        var fixed_county_geometries=[];
​
        //removing duplicate features
        for(var i=0; i<county_geometries.length; i++) {
            if(!(county_geometries[i].id===27031 &&
                 county_geometries[i].arcs[0].length === 1)) {
                fixed_county_geometries.push(county_geometries[i]);
            }
        }
​
        mn.objects.states.geometries = [mn.objects.states.geometries[0]];
        mn.objects.counties.geometries = fixed_county_geometries;
​
        var state = topojson.feature(mn, mn.objects.states);
​
        var b = path.bounds(state),
        s = 0.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("path")
            .attr("transform", "translate(40,0)")
            .datum(topojson.mesh(mn, mn.objects.counties,
                             function(a,b){return a!==b;}))
            .attr("class", "county-border")
            .attr("d", path);
​
                             //state border
        svg.append("path")
            .attr("transform", "translate(40,0)")
            .datum(topojson.mesh(mn, mn.objects.counties,
                              function(a,b){return a===b;}))
            .attr("class", "state-border")
            .attr("d", path);
​
        var counties = svg.append("g")
            .attr("transform", "translate(40,0)")
            .attr("class", "counties")
            .selectAll("path")
            .data(topojson.feature(mn, mn.objects.counties).features)
        .enter().append("path")
            .attr("d", path)
            .attr("fill", function(d) {return color(d.properties.population);})
            .append("title")
                .text(function(d) {return d.properties.name + ": pop. "+d.properties.population;})
    });
​
    </script>
</body>
    