Force GIF

.gitignore

*.png
*.gif

package.json

{
  "license": "GPL-3.0",
  "author": {
    "name": "Mike Bostock",
    "url": "http://bost.ocks.org/mike"
  },
  "dependencies": {
    "canvas": "^1.3.12",
    "d3": "^3.5.16",
    "d3-array": "^0.7.1",
    "d3-force": "^0.3.0",
    "d3-format": "^0.5.1"
  }
}

render

#!/bin/bash

./render-v4
convert frame-0030.png -colors 16 palette.gif
convert -dither none -remap palette.gif frame-*.png v4-uncompressed.gif
gifsicle -O3 -d4 < v4-uncompressed.gif > v4.gif

./render-v3
convert -dither none -remap palette.gif frame-*.png v3-uncompressed.gif
gifsicle -O3 -d4 < v3-uncompressed.gif > v3.gif

rm -- palette.gif *.png *-uncompressed.gif

render-v3

#!/usr/bin/env node

var Canvas = require("canvas"),
    fs = require("fs"),
    d3 = require("d3");

var width = 960,
    height = 960,
    canvas = new Canvas(width, height),
    context = canvas.getContext("2d");

var nodes = d3.range(1000).map(function(i) {
  return {
    index: i
  };
});

var links = d3.range(nodes.length - 1).map(function(i) {
  return {
    source: (Math.sqrt(i) | 0),
    target: i + 1
  };
});

var force = d3.layout.force()
    .friction(0.7) // friction = 1 - drag
    .nodes(nodes)
    .links(links)
    .charge(-20)
    .linkDistance(0)
    .on("tick", ticked)
    .start();

var frame = 0,
    formatFrame = d3.format("04d");

while (++frame <= 60) {
  force.tick();
  var name = "frame-" + formatFrame(frame) + ".png";
  fs.writeFileSync(name, canvas.toBuffer());
  console.log(name);
}

force.stop();

function ticked() {
  context.fillStyle = "#fff";
  context.fillRect(0, 0, width, height);
  context.save();
  context.translate(width / 2, height / 2);

  context.beginPath();
  links.forEach(drawLink);
  context.strokeStyle = "#aaa";
  context.stroke();

  context.beginPath();
  nodes.forEach(drawNode);
  context.fillStyle = "#000";
  context.fill();
  context.strokeStyle = "#fff";
  context.stroke();

  context.restore();
}

function drawLink(d) {
  context.moveTo(d.source.x, d.source.y);
  context.lineTo(d.target.x, d.target.y);
}

function drawNode(d) {
  context.moveTo(d.x + 3, d.y);
  context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
}

render-v4

#!/usr/bin/env node

var Canvas = require("canvas"),
    fs = require("fs"),
    d3_array = require("d3-array"),
    d3_format = require("d3-format"),
    d3_force = require("d3-force");

var width = 960,
    height = 960,
    canvas = new Canvas(width, height),
    context = canvas.getContext("2d");

var nodes = d3_array.range(1000).map(function(i) {
  return {
    index: i
  };
});

var links = d3_array.range(nodes.length - 1).map(function(i) {
  return {
    source: (Math.sqrt(i) | 0),
    target: i + 1
  };
});

var simulation = d3_force.forceSimulation(nodes)
    .drag(0.2)
    .force("charge", d3_force.forceManyBody().strength(-20))
    .force("link", d3_force.forceLink(links).distance(0).strength(0.5))
    .force("position", d3_force.forcePosition())
    .stop();

var frame = 0,
    formatFrame = d3_format.format("04d");

while (++frame <= 60) {
  simulation.tick();
  render(frame);
}

function render(frame) {
  var name = "frame-" + formatFrame(frame) + ".png";
  console.log(name);

  context.fillStyle = "#fff";
  context.fillRect(0, 0, width, height);
  context.save();
  context.translate(width / 2, height / 2);

  context.beginPath();
  links.forEach(drawLink);
  context.strokeStyle = "#aaa";
  context.stroke();

  context.beginPath();
  nodes.forEach(drawNode);
  context.fillStyle = "#000";
  context.fill();
  context.strokeStyle = "#fff";
  context.stroke();

  context.restore();

  fs.writeFileSync(name, canvas.toBuffer());
}

function drawLink(d) {
  context.moveTo(d.source.x, d.source.y);
  context.lineTo(d.target.x, d.target.y);
}

function drawNode(d) {
  context.moveTo(d.x + 3, d.y);
  context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
}