Arithmopleth map

Unemployment rate for U.S. counties.

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

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

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