JerseyScript

render.js

var fs = require("fs"),
    d3 = require("d3"),
    pal = require("point-at-length"),
    Canvas = require("canvas");

var nj = require("./nj.geo.json");

var width = 320,
    height = 480,
    frames = 50;

var canvas = new Canvas(width, height),
    ctx = canvas.getContext('2d');

// NJ state plane
var projection = d3.geo.transverseMercator()
    .rotate([74 + 30 / 60, -38 - 50 / 60])
    .scale(10174.810528117487)
    .translate([191.3403499770065,460.2669995795074])

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

var pts = pal(path(nj));

// Total pixel length of the path
var totalLength = pts.length();

path.context(ctx);

ctx.strokeStyle = "#f0f";
ctx.lineWidth = 3;

d3.range(frames).forEach(function(f){

  // Partial length of the path, by frame
  var progress = totalLength * (f+1)/frames;

  // Clear
  ctx.clearRect(0,0,width,height);

  // Line dash to draw partial path
  ctx.setLineDash([progress,totalLength]);

  // Last frame dash weirdness
  if (f === frames - 1) {
    ctx.setLineDash([]);
  }

  // Draw the path
  path(nj);
  ctx.stroke();

  // Save the frame
  fs.writeFileSync("frames/" + f + ".png",canvas.toBuffer());

});

// Turn frames to gif with:
// mogrify -format gif frames/*.png && gifsicle --optimize=3 --loop frames/*.gif > nj.gif