Animated Paths in a Flow Map

This is an animated flow map (line darkness representing volume of trade). Each path is animated to enter and exit the map. Click "open" above to view the entire map.

The map uses an intermediary point between departure and destination locations to aesthetically bend the paths, which also causes them to largely cross water as opposed to land. This also allows a greater differentiation of points on the US west coast, as direct lines would overlap entirely.

The map represents trade from Victoria, Departure Bay (Nainamo), Burrard Inlet (Vancouver), and Newcastle Island in around 1859/1860. The selected three exports represent the most common commodities exported from the region based on the data used to build this dataset. The stone, from Newcastle Island, was used in many notable public buildings, including the US Mint building in San Francisco.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script src="https://d3js.org/d3.v4.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
	<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>	
<style>
	.commodityButton, .commodityLabel { cursor:pointer; }
	.route { fill: none; stroke: #333; stroke-width: 2px; }
	.land { fill:#a8ddb5; }
	svg { background: #43a2ca; }
	.port { fill: #8c6bb1; stroke:#084081; stroke-width: 2px; }	
	.source-port { fill: #fdae6b; stroke:#d94801; stroke-width: 2px; }
</style>

</head>
<body>
	<div id="map"> </div>
	
	<script>
	var width = 950; var height = 650;
	var commodities = ["lumber","coal","stone"];
	
	var projection = d3.geoKavrayskiy7()
		.scale(302)
		.rotate([-205,-10])
		.translate([width/2,height/2])
		.precision(0.1);

var path = d3.geoPath().projection(projection);

// Add some buttons
		var buttons = g2.selectAll(".commodityButton")
			.data(commodities)
			.enter()
			.append("rect")
			.attr("x", function(d,i) { return i * 90 + 20} )
			.attr("y", 20)
			.attr("rx",20).attr("ry",20).attr("width",80).attr("height",80)
			.attr("fill","#aaa").attr("stroke","#999")
			.attr("class","commodityButton")
			.on("click",function(d) { replaceCommodity(d); });
				
		var text = g2.selectAll(".commodityLabel")
			.data(commodities).enter()
			.append("text")
			.attr("x",function (d,i) { return i * 90 + 60} )
			.attr("y",65)
			.attr("text-anchor","middle")
			.text(function(d) { return d; })
			.attr("class","commodityLabel")
			.on("click",function(d) { replaceCommodity(d); });
						
		// Start with a set of routes
		drawCommodity("coal");	
	});
	///////////////////////////////////////////////////////////////////////////////////////////////
	// Draw a set of routes 
	function drawCommodity(commodity) {
		d3.csv(commodity + ".csv", function (error, routes) {
			var maxVolume = d3.max(routes, function(d) { return d.vol; });
						
			var line = d3.line().curve(d3.curveBasis);
	
			routes.forEach( function(d,i) {
			 	var routePath = g1.append("path")	
					.attr("d", line ([ projection(ports[d.dept].loc),projection(intermediatePoints[d.via]),projection(ports[d.arr].loc)]) )
					.attr("class", d.arr.replace(" ", "-") + " " + "route")
					.attr("stroke-opacity", Math.sqrt(d.vol / maxVolume) )
					.attr("stroke-width", 1 );

</body>
</html>

Modified http://d3js.org/d3.v4.js to a secure url

https://d3js.org/d3.v4.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js

https://d3js.org/d3-geo-projection.v1.min.js