Les Misérables


  require([
    'd3',
    'js/core',
    'layouts/force',
    'layouts/labels',
    'layouts/zoom'
  ], function(
    d3,
    graphyte,
    forceLayout,
    labelsLayout,
    zoomLayout
  ) {

    'use strict';

    var duration = 5000;
    var delay = 5000;

    var labels = labelsLayout()
      .alignment('parent')
      .lineHeight(13)
      .outlines(true);

    var zoom = zoomLayout();

    var edgeLength = d3.scale.linear()
      .domain([0, 1])
      .range([30, 300]);

    var edgeWeight = d3.scale.linear()
      .domain([0, 1])
      .range([0.8, 0.4]);

    var charge = d3.scale.linear()
      .domain([0, 1])
      .range([-120, 0]);

    var friction = d3.scale.linear()
      .domain([0, 1])
      .range([0.8, 0]);

    var color = d3.scale.category20();

    var force = forceLayout()
      .autoCharge(false)
      .charge(charge(0))
      .friction(friction(0))
      .edgeLength(edgeLength(0))
      .edgeWeight(edgeWeight(0));

    var graph = graphyte()
      .alpha(0.01)
      .debug(false)
      .layout(
        labels,
        zoom,
        force
      );

    var start;

    var update = function() {
      var now = new Date().getTime();
      var delta = now - start;
      if (duration >= delta) {
        force.stop();
      }
    };

    setTimeout(function() {
      start = new Date().getTime();
      update();
    }, delay);

    d3.json('data.json', function(error, data) {
      var nodes = data.nodes.map(function(node) {
        node.style = {
          fill: color(node.group)
        };
        return node;
      });

      graph.vertices(nodes)
        .edges(data.links.map(function(edge) {
          edge.source = nodes[edge.source];
          edge.target = nodes[edge.target];
          edge.style = {
            'stroke-width': Math.sqrt(edge.value)
          };
          return edge;
        }));

      d3.select('#graph').call(graph);
    });

  });