All examples By author By category About

armollica

Full window Github gist

Declining Share of Manufacturing Jobs

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.

@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

//____________________________________________________________________________
	// 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