Share of jobs in manufacturing by commuter area from 1990 to the 2016. Hover to isolate an individual commuter area's series. Data are not seasonally-adjusted.
To keep the size of this graphic down I shrunk each faceted chart based on it's max y-value while keeping the y-scale consistent across charts. At first I just let the browser float each chart in a container but this left weird gaps between charts. Looked into it and found that fitting irregular shapes into other shapes neatly is called the bin packing problem. I implemented a 2D rectangular bin packing algorithm in JavaScript based on Jukka Jylanki's C++ implementation of the algorithm. This let me lay the charts out snugly.
This bin packing implementation can be found in this GitHub repository: BinPack. The API is still a bit rough at the moment.
Data come from the Bureau of Labor Statistics. The
download-data.sh shell script in this gist repository shows how to download
the data in bulk. The clean-data.R R script shows how the data was prepped
for the visualization. The little state icons are from ProPublica's
StateFace project.
xxxxxxxxxx<html><head><style> @font-face { font-family: 'StateFaceRegular'; src: url('stateface-regular-webfont.eot'); src: url('stateface-regular-webfont.eot?#iefix') format('embedded-opentype'), url('stateface-regular-webfont.woff') format('woff'), url('stateface-regular-webfont.ttf') format('truetype'), url('stateface-regular-webfont.svg#StateFaceRegular') format('svg'); font-weight: normal; font-style: normal; }.stateface { font-family: "StateFaceRegular";}.line { fill: none; stroke: #000; stroke-opacity: 0.2;}.line.highlight { stroke-width: 1.5px; stroke-opacity: 1;}.chart-title { fill: #000; font-size: 16px; text-shadow: -1px 0 0px #fff, 0 1px 0px #fff, 1px 0 0px #fff, 0 -1px 0px #fff;}.chart-title > .stateface { text-anchor: end;}.chart-title > .name { text-anchor: start;}.chart-title .metro { font-size: 12px;}.data-label { font-size: 12px; text-anchor: middle; text-shadow: -2px 0 0px #fff, 0 2px 0px #fff, 2px 0 0px #fff, 0 -2px 0px #fff;}.data-label circle { fill: #fff; stroke: #000;}.axis--x path { stroke: none;}.voronoi-overlay { fill-opacity: 0;}.hidden { display: none;}</style></head><body><script src="bin-pack.js"></script><script src="https://d3js.org/d3.v4.min.js"></script><script>var svgWidth = 960, svgHeight = 1700;var binPack = BinPack() .binWidth(svgWidth) .binHeight(svgHeight);var margin = { top: 30, left: 40, bottom: 30, right: 10 }, width = svgWidth / 4 - margin.left - margin.right, maxHeight = 200 - margin.top - margin.bottom;var parseDate = d3.timeParse("%Y-%m-%d");var formatShare = d3.format(".0%");var x = function(d) { return d.date; }, xScale = d3.scaleTime().range([0, width]);var y = function(d) { return d.share; }, yScale = d3.scaleLinear().range([maxHeight, 0]);var localYScale = d3.local();var localLine = d3.local();var svg = d3.select("body").append("svg") .attr("width", svgWidth) .attr("height", svgHeight);var stateByCode = d3.map(), areaByCode = d3.map(), statefaceByCode = d3.map();d3.queue() .defer(d3.tsv, "state-names.tsv") .defer(d3.tsv, "area-names.tsv") .defer(d3.tsv, "manufacturing-share.tsv") .await(ready);function ready(error, stateNames, areaNames, data) { if (error) throw error; stateNames.forEach(function(d) { stateByCode.set(d.state_code, d.state_name); statefaceByCode.set(d.state_code, d.stateface_letter); }); areaNames.forEach(function(d) { areaByCode.set(d.area_code, d.area_name); }); data = data .map(type) .filter(function(d) { return d.date.getFullYear() > 1989 & d.share !== undefined; }); xScale.domain(d3.extent(data, x)); yScale.domain([0, d3.max(data, y)]); var nested = d3.nest() .key(function(d) { return d.state_code; }) .key(function(d) { return d.area_code; }) .entries(data); nested.sort(function(stateA, stateB) { var a = stateByCode.get(stateA.key), b = stateByCode.get(stateB.key); return a > b ? 1 : -1; }); //____________________________________________________________________________ // Line chart container (one for each state) var chart = svg.selectAll(".line-chart").data(nested) .enter().append("g") .attr("class", "line-chart") .each(function(state) { var flattened = state.values .map(function(d) { return d.values; }) .reduce(function(a, b) { return a.concat(b); }); var yMax = d3.max(flattened, y), height = maxHeight - yScale(yMax); var thisYScale = localYScale.set(this, d3.scaleLinear() .domain([0, yMax]) .range([height, 0])); localLine.set(this, d3.line() .x(function(d) { return xScale(x(d)); }) .y(function(d) { return thisYScale(y(d)); })); state.width = width + margin.left + margin.right; state.height = height + margin.top + margin.bottom; state.voronoi = d3.voronoi() .x(function(d) { return xScale(x(d)); }) .y(function(d) { return thisYScale(y(d)); }) .size([width, height]) .polygons(flattened .filter(function(d) { return d.date.getMonth() == 1; })); binPack.add(state); }) .attr("transform", function(state) { var i = binPack.positioned .map(function(d) { return d.datum; }) .indexOf(state); var p = binPack.positioned[i]; return "translate(" + (p.x + margin.left) + "," + (p.y + margin.top ) + ")"; }); //____________________________________________________________________________ // Axes var xAxis = chart.append("g") .call(d3.axisBottom(xScale).ticks(5)) .attr("class", "axis axis--x") .attr("transform", function(d) { var height = localYScale.get(this).range()[0]; return "translate(0," + height + ")"; }); var yAxis = chart.append("g") .each(function(d) { var yMax = localYScale.get(this).domain()[1], yAxis = d3.axisLeft(localYScale.get(this)) .ticks(d3.tickStep(0, yMax, 0.05)) .tickFormat(formatShare); d3.select(this) .call(yAxis); }) .attr("class", "axis axis--y"); //____________________________________________________________________________ // Chart title var chartTitle = yAxis.append("g") .attr("class", "chart-title") .attr("transform", "translate(0,-10)"); chartTitle.append("text") .attr("class", "stateface") .attr("dx", -6) .text(function(d) { return statefaceByCode.get(d.key); }); chartTitle.append("text") .attr("class", "name") .text(function(d) { return stateByCode.get(d.key); }); //____________________________________________________________________________ // Line var line = chart.selectAll(".line").data(function(d) { return d.values; }) .enter().append("path") .attr("class", function(d) { return "line a-" + d.key; }) .attr("d", function(d) { return localLine.get(this)(d.values); }); //____________________________________________________________________________ // Data label var dataLabel = chart.append("g") .attr("class", "data-label") .classed("hidden", true); dataLabel.append("text") .attr("dy", "-.67em"); dataLabel.append("circle") .attr("r", 3); //____________________________________________________________________________ // Voronoi overlay for mouse interaction chart.append("g") .attr("class", "voronoi-overlay") .selectAll(".polygon").data(function(d) { return d.voronoi; }) .enter().append("path") .attr("class", "polygon") .attr("d", renderCell) .on("mouseenter", mouseenter) .on("mouseleave", mouseleave); function mouseenter(d) { var area_code = d.data.area_code, state_code = d.data.state_code, p = [ xScale(x(d.data)), localYScale.get(this)(y(d.data)) ]; line .classed("highlight", function(d) { return d.key == area_code; }); chartTitle.selectAll(".name") .filter(function(d) { return d.key == state_code; }) .classed("metro", true) .text(areaByCode.get(area_code)); var label = dataLabel .filter(function(d) { return d.key == state_code; }) .classed("hidden", false); label.select("text") .attr("x", p[0]) .attr("y", p[1]) .text(formatShare(d.data.share)); label.select("circle") .attr("cx", p[0]) .attr("cy", p[1]); } function mouseleave(d) { var area_code = d.data.area_code, state_code = d.data.state_code; line .classed("highlight", false); chartTitle.selectAll(".name") .filter(function(d) { return d.key == state_code; }) .classed("metro", false) .text(stateByCode.get(state_code)); dataLabel .classed("hidden", true); };}function type(d) { d.date = parseDate(d.date); d.share = +d.share; return d;}function renderCell(d) { return d == null ? null : "M" + d.join("L") + "Z";}</script></body></html> https://d3js.org/d3.v4.min.js