D3 Examples - Animated Path on Canvas Map

Animated Path on Canvas Map | SF Bay Area
an animated path on a map, in canvas
the San Francisco Bay Area land area geography is positioned and scaled using knowledge gathered from the classic tutorial Let's Make a Map
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style>
body {
  overflow: hidden
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js'></script>
<script>
​
const width = 1050;
const height = 1420;
​
var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);
​
var context = canvas.node().getContext("2d");
​
​
const projection = d3.geo.mercator()
  .scale(100000)
  .center([-122.2927387, 37.631258])
  .translate([width / 2, height / 2]);
​
var path = d3.geo.path()
    .projection(projection);
    //.context(context);
​
var graticule = d3.geo.graticule();
​
d3.json("alt-route-geography.json", function(error, routeTopology) {
d3.json("ca.topojson", function(error, ca) {
// d3.json("world-110m.json", function(error, world) {
    console.log('routeTopology', routeTopology);
​
    var countries = topojson.feature(ca, ca.objects.ca);
    var track = topojson.feature(routeTopology, routeTopology.objects.route);
​
    var pathEl = d3.select("body").append("svg").append("path").attr("d", path(track));
    var length = pathEl.node().getTotalLength();
    d3.select("svg").remove;
​
    d3.transition()
        .duration(12000)
        .ease("linear")
        .tween("zoom", function() {
            return function(t) {
              context.clearRect(0, 0, width, height);
              context.strokeStyle = '#aaa';
              context.fillStyle = '#ccc';
​
              context.beginPath();
              path.context(context)(graticule());
​
              context.lineWidth = 0.2;
              context.strokeStyle = 'rgba(30,30,30, 0.5)';
              context.stroke();
​
              context.beginPath();
              path.context(context)(countries);
              context.fill();
​
              context.beginPath();
              path.context(context)(countries);
              context.stroke();
​
              context.lineWidth = 5;
              context.strokeStyle = 'rgba(120,60,60, 1)';
              context.setLineDash([length]);
              context.lineDashOffset = length*(1-t);
​
              context.beginPath();
              path.context(context)(track);
              context.stroke();
              context.setLineDash([]);
            }
        });
});
});
​
​
d3.select(self.frameElement).style("height", height + "px");
​
</script>
​
    