Animated path using canvas

Creating visualizations like this one but using canvas is possible.

The technique is the same as when using it with SVG with the problem that Canvas hasn't got a method to get the whole length of a path. To do it, I've created a hidden SVG first. This other page has a nice explanation about how the SVG path animation work.

The path is the Trans Mongolian train route taken from here but redrawn, since the original is a multi line.

forked from rveciana's block: Animated path using canvas

<!DOCTYPE html>
<meta charset="utf-8">
<style>

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 700,
    height = 500;

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

var projection = d3.geo.stereographic()
    .scale(900)
    .translate([width / 2, height / 2])
    .rotate([-90, -60])
    .clipAngle(180 - 1e-4)
    .clipExtent([[0, 0], [width, height]])
    .precision(1);

var path = d3.geo.path()
    .projection(projection);
    //.context(context);

var graticule = d3.geo.graticule();

d3.json("transsiberian.json", function(error, transsiberian) {
d3.json("world-110m.json", function(error, world) {

var countries = topojson.feature(world, world.objects.countries);
    var track = topojson.feature(transsiberian, transsiberian.objects.transsiberian);

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(5000)
        .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 = 1;
              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