armollica · January 6, 2018 13:03
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
diff --git a/clean-unemployment.R b/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')
diff --git a/index.html b/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>
diff --git a/Makefile b/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'
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/unemployment.tsv b/unemployment.tsv
diff --git a/us.json b/us.json
	#!/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')
	<!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>

	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'