Drawing United States Counties

An example of using built-in svg path properties (.getTotalLength() and .getPointAtLength()) to iterate through svg paths. Uses precomputed TopoJSON from Census Bureau data. breathe.js provides animation.

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8" />
  <style>
    #draw-canvas{
      width: 100%;
      height: auto;
    }
  </style>
  </head>
  <body>
    <svg id="map-svg" style='display:none'></svg>
    <canvas id="draw-canvas"></canvas>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/topojson.v2.min.js"></script>
    <script src="https://unpkg.com/breathejs@0.2.0/breathe.js"></script>
    <script>
      var svg = d3.select("#map-svg");
      var canvas = document.getElementById('draw-canvas');
      var ctx = canvas.getContext('2d');
      var scale = 1;
      var width = 960 * scale;
      var height = 600 * scale;
      canvas.width = width;
      canvas.height = height;
      var path = d3.geoPath();
      var drawPaths = function (paths, lineWidth) {
        var chains = [];
        return breathe.withId().times(paths.length, function (i) {
          var path = paths[i];
          var s = 0;
          var length = path.getTotalLength();
          // if you add `return` before breathe.loop, it draws only one at a time 
          var chain = breathe.withId().loop(function () { return s < length; }, function () {
            point = path.getPointAtLength(s);
            ctx.fillRect(point.x*scale, point.y*scale, lineWidth, lineWidth);
            s += 0.25;
          });
          chains.push(chain);
        }).then(function(){
          return Promise.all(chains);
        });
      };
      d3.json('https://d3js.org/us-10m.v1.json', function(mapData){
        var counties = svg.append('g')
          .selectAll('path')
          .data(topojson.feature(mapData, mapData.objects.counties).features)
          .enter()
            .append('path')
              .attr('d', path);
        var states = svg.append('g')
          .selectAll('path')
          .data(topojson.feature(mapData, mapData.objects.states).features)
          .enter()
            .append('path')
              .attr('d', path);
        var paths;
        breathe.animationMode();
        ctx.fillStyle = 'black';
        breathe.chain().then(function(){
          return drawPaths(counties.nodes(), 0.5);
        }).then(function(){
          return drawPaths(states.nodes(), 4);
        });

});
    </script>
  </body>
</html>

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

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

https://unpkg.com/breathejs@0.2.0/breathe.js