Source: Bureau of Labor Statistics, Census Bureau
This choropleth shows unemployment rates as of August, 2016 with a threshold scale. I employed a mix of command-line tools to transform the fixed-width text file into a CSV, including dsv2dsv:
cat <(echo "id,rate") \
<(tail -n +7 laucntycur14.txt \
| grep 'Aug-16' \
| cut -b 21-22,28-30,129-133 \
| tr -s ' ' \
| dsv2dsv -r ' ') \
| csv2tsv \
> unemployment.tsvforked from mbostock‘s block: Choropleth
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.counties {
fill: none;
}
.states {
fill: none;
stroke: #fff;
stroke-linejoin: round;
}
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
// goal: change the color scale
var color = d3.scaleThreshold()
.range(d3.schemePuOr[7]);
// array gets populated with unemployment rates
// could use mungeData to extract median, etc
var rateArray = [];
var median = 0;
var mungeData = function(rates){
median = d3.median(rates);
color.domain([median * 1/2,
median * 1/1.26 * 1/1.26,
median * 1/1.26,
median,
median*1.26,
median*1.26*1.26,
2*median])
}
var fillFunction = function(d) {
// d.id is the id of the county
return color(d.rate = unemployment.get(d.id));
}
///////////////////////////////
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var unemployment = d3.map();
var path = d3.geoPath();
var g = svg.append("g")
.attr("class", "key")
.attr("transform","translate(0,40)");
// get data for us county shapes and unemployment data
d3.queue()
.defer(d3.json, "https://d3js.org/us-10m.v1.json")
.defer(d3.tsv, "unemployment.tsv", function(d) {
// parse tsv
rateArray.push(+d.rate)
mungeData(rateArray);
unemployment.set(d.id, +d.rate);
})
.await(ready);
function ready(error, us) {
if (error) throw error;
// unemployment data is a dictionary of county id to unemployment rate
// draw us counties
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.enter().append("path")
// fill determines color
.attr("fill", fillFunction)
.attr("d", path)
.append("title")
.text(function(d) { return d.rate + "%"; });
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("class", "states")
.attr("d", path);
}
</script>