Minnesota counties colored by population

Minnesota counties colored by population. Hover over to see the county name and population.

Created in D3. Inspired by /mbostock/5737662.

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

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)")

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js