D3 Examples - Arithmopleth map

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
<style>
​
html {
    font-family: monospace;
}
​
.counties {
    font-size: 8px;
    text-anchor: middle;
    fill-opacity: 0.75;
}
​
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
​
var formatUnemploymentRate = d3.format('.0f');
​
var width = 960,
    height = 600;
​
var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);
​
var projection = d3.geoAlbersUsa();
​
var path = d3.geoPath()
    .projection(projection);
​
var color = d3.scaleSequential(d3.interpolateMagma)
    .domain([2, 14]);
​
d3.queue()
    .defer(d3.tsv, 'unemployment.tsv')
    .defer(d3.json, 'us.json')
    .await(ready);
​
function ready (error, unemployment, us) {
    if (error) throw error;
​
    var unemploymentByFips = d3.map(unemployment, function(d) { return +d.fips; });
    var counties = topojson.feature(us, us.objects.counties).features;
​
    function centroidify(county) {
        var centroid = path.centroid(county);
        var unemployment_rate = unemploymentByFips.has(+county.id) ? 
            unemploymentByFips.get(+county.id).unemployment_rate :
            null;
        return {
            x: centroid[0],
            y: centroid[1],
            unemployment_rate: formatUnemploymentRate(unemployment_rate)
        };
    }
​
    var data = counties
        .map(centroidify)
        .filter(function(d) { return d.unemployment_rate && d.x; });
​
    svg.append('g').attr('class', 'counties')
            .selectAll('text').data(data)
        .enter().append('text')
            .attr('x', function(d) { return d.x; })
            .attr('y', function(d) { return d.y; })
            .style('fill', function(d) { return color(+d.unemployment_rate); })
            .text(function (d) { return d.unemployment_rate; });
}
​
</script>
</body>
</html>
    