Skip to content

Instantly share code, notes, and snippets.

Last active October 23, 2016 23:05
What would you like to do?
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.

dept via arr vol
Victoria VictoriaOffshoreSF San Francisco 69042
Victoria VictoriaOffshoreOS Portland 4908.2
Victoria VictoriaOffshoreAS Honolulu 5968
Victoria VictoriaOffshoreSC San Diego 1000
Victoria VictoriaOffshoreMX Mazatlan 600
Victoria VictoriaOffshoreSC San Pedro 430
Victoria VictoriaOffshoreAK Ounalaska 332
Victoria VictoriaOffshoreAK Sitka 2565.25
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html lang="en">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src=""></script>
<script src=""></script>
<script src=""></script>
.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; }
<div id="map"> </div>
var width = 950; var height = 650;
var commodities = ["lumber","coal","stone"];
var projection = d3.geoKavrayskiy7()
var path = d3.geoPath().projection(projection);
var svg ="#map").append("svg")
.attr("width", width)
.attr("height", height);
// Create a few groups to layer elements correctly
var g1 = svg.append("g"); var g2 = svg.append("g");
d3.json("world.json",function(error,world) {
.attr("class", "land")
.attr("d", path);
// Place and label Victoria
.attr("cx", function() { return projection(ports["Victoria"].loc)[0];})
.attr("cy", function() { return projection(ports["Victoria"].loc)[1];})
.attr("class","source-port source");
.attr("x", function() { return projection(ports["Victoria"].loc)[0] + 5;})
.attr("y", function() { return projection(ports["Victoria"].loc)[1] + 0;})
// Add some buttons
var buttons = g2.selectAll(".commodityButton")
.attr("x", function(d,i) { return i * 90 + 20} )
.attr("y", 20)
.on("click",function(d) { replaceCommodity(d); });
var text = g2.selectAll(".commodityLabel")
.attr("x",function (d,i) { return i * 90 + 60} )
.text(function(d) { return d; })
.on("click",function(d) { replaceCommodity(d); });
// Start with a set of routes
// 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 );
var totalLength = routePath.node().getTotalLength() + 10;
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.on("start", drawPorts(d) )
.attr("stroke-dashoffset", 0);
// Replace a commodity
function replaceCommodity(commodity) {
var routes = g1.selectAll(".route")
.attr("stroke-dashoffset", function() { return -this.getTotalLength(); })
// Draw ports and labels associated with routes
function drawPorts(d) {
var point = g2.append("circle")
.attr("cx", projection(ports[d.arr].loc)[0])
.attr("cy", projection(ports[d.arr].loc)[1])
.attr("id",d.arr.replace(" ", "-"))
var text = g2.append("text")
.attr("x", projection(ports[d.arr].loc)[0] + ports[d.arr]["off"][0])
.attr("y", projection(ports[d.arr].loc)[1] - ports[d.arr]["off"][1])
.attr("id",d.arr.replace(" ", "-") + "-label");
// Place references and text offsets
var ports = {
"San Francisco":{loc:[-122.416667,37.783333],off:[5,8],},
"Hong Kong":{loc:[114.204277,22.330869],off:[-50,11],},
"San Diego":{loc:[-117.164123,32.718556],off:[10,2],},
"San Pedro":{loc:[-118.29,33.74],off:[10,8],},
"Port Chalmers":{loc:[170.621466,-45.815739],off:[5,10],}
// These are just to give the routes a stylistic curve, they were chosen by hand
// I was unable to find a satisfactory algorithm for spacing them automatically for this
var intermediatePoints = {
VictoriaOffshore:[-141.358218,41.384491], // For others
VictoriaOffshoreUS:[-131.967321,39.045791], // Alternate for US destinations
VictoriaOffshoreSA:[-159.469220, 0.368191], // For South America
VictoriaOffshoreMX:[-146.558129,21], // For Mexico
VictoriaOffshoreAU:[-175.839426,-28], // For Australia
VictoriaOffshoreAS:[-163.976757,25], // For Asia
VictoriaOffshoreAK:[-141.374371,51.328740], // For Alaska
VictoriaOffshoreOS:[-127.683328,43.675809], // For Oregon
VictoriaOffshoreSF:[-135.683328,35.675809], // For San Francisco
VictoriaOffshoreSC:[-138.683328,30.675809] // for southern California
dept via arr vol
Victoria VictoriaOffshoreSA Callao 24
Victoria VictoriaOffshoreMX Honolulu 20
Victoria VictoriaOffshoreSA Valparaiso 20
Victoria VictoriaOffshoreUS San Francisco 14
Victoria VictoriaOffshoreAS Shanghai 11
Victoria VictoriaOffshoreAU Sydney 10
Victoria VictoriaOffshoreAU Melbourne 9
Victoria VictoriaOffshoreSA Iquique 4
Victoria VictoriaOffshoreMX Guaymas 3
Victoria VictoriaOffshoreAU Dunedin 3
Victoria VictoriaOffshoreAU Batavia 1
Victoria VictoriaOffshoreSA Coquimbo 1
Victoria VictoriaOffshoreAS Hong Kong 1
Victoria VictoriaOffshoreAS Yokohama 1
Victoria VictoriaOffshoreSA Lambayaque 1
Victoria VictoriaOffshoreSA Tahiti 1
Victoria VictoriaOffshoreSA Arica 1
dept via arr vol
Victoria VictoriaOffshoreSF San Francisco 1
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment