Animated Path on Canvas Map | SF Bay Area

an animated path on a map, in canvas

inspired by the bl.ock Animated path using canvas from @rveciana

path geography drawn by clicking on the map over at geojson.io and then converted to topojson using http://jeffpaine.github.io/geojson-topojson/

I originally learned about geojson.io from @enjalot's working with spatial data workshop notes

the San Francisco Bay Area land area geography is positioned and scaled using knowledge gathered from the classic tutorial Let's Make a Map

earlier iterations and #d3brokeandmadeart can be found in this repo

<!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>

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

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js