block by armollica 13cd7f2537791121c06c9ad97b31ac4b

Arithmopleth map

Full Screen

Unemployment rate for U.S. counties.

index.html

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

Makefile


all: unemployment.tsv us.json

tsv/raw-unemployment.tsv: 
	mkdir -p $(dir $@)
	curl -o $@.download 'https://download.bls.gov/pub/time.series/la/la.data.64.County'
	mv $@.download $@

unemployment.tsv:
	Rscript clean-unemployment.R

us.json:
	curl -o us.json 'https://gist.githubusercontent.com/armollica/70afe1b4265425cb6e031b973e6d9811/raw/8b69e5684e3bcb11d5c68b32f8f2ccc67a3e4386/us.json'

clean-unemployment.R

#!/usr/bin/env Rscript

library(tidyverse)
library(stringr)
library(lubridate)

read_tsv('tsv/raw-unemployment.tsv') %>%
  mutate(seasonal = str_sub(series_id, 3, 3),
         area_code = str_sub(series_id, 4, 18),
         measure_code = str_sub(series_id, 19, 20),
         fips = str_sub(area_code, 3, 7)) %>%
  filter(measure_code == '03',
         year == 2016,
         period == 'M11') %>%
  select(fips, unemployment_rate = value) %>%
  write_tsv('unemployment.tsv')