Force-directed layout

A force-directed layout with a circular bounding box. This graph shows interactions between characters in the Les Miserables Stanford GraphBase dataset. The size of each node indicates the number of chapters the character appeared in.

A good force-directed layouts can be useful for understanding high-level network structure, identifying clusters and outliers, examining links that connect nodes, and following paths between nodes. However, when graphs are dense or very large, force-directed layouts can produce "hairball" visualizations that are difficult to read and understand.

Source for the parsed version of the data: https://github.com/rpgove/graphbase2json

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

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  fill: #d62333;
  stroke: #fff;
  stroke-width: 2px;
}

</style>
<svg></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var width = 960;
var height = 600;
var nodeRadius = d3.scaleSqrt().range([4, 10]);
var linkWidth = d3.scaleLinear().range([1, 2 * nodeRadius.range()[0]])
var padding = nodeRadius.range()[1] + 2;
var radius = Math.min(width - padding, height - padding)/2;

var drag = d3.drag()
  .on('start', dragStart)
  .on('drag', dragging)
  .on('end', dragEnd);

var svg = d3.select('svg')
  .attr('width', width)
  .attr('height', height);

var forceSim = d3.forceSimulation()
  .force('link', d3.forceLink().id(function(d) { return d.id; }))
  .force('charge', d3.forceManyBody())
  .force('center', d3.forceCenter(width/2, height/2));

d3.json('jean.json', function (error, graph) {
  if (error) throw error;

// Make sure small nodes are drawn on top of larger nodes
  graph.nodes.sort(function (a, b) { return b.chapters.length - a.chapters.length; });

nodeRadius.domain([graph.nodes[graph.nodes.length-1].chapters.length, graph.nodes[0].chapters.length]);

linkWidth.domain(d3.extent(graph.links, function (d) { return d.chapters.length; }));

var link = svg.append('g')
    .attr('class', 'links')
    .selectAll('line')
    .data(graph.links)
    .enter().append('line')
    .attr('stroke-width', function (d) { return linkWidth(d.chapters.length); });

var node = svg.append('g')
    .attr('class', 'nodes')
    .selectAll('circle')
    .data(graph.nodes)
    .enter().append('circle')
    .attr('r', function (d) { return nodeRadius(d.chapters.length); })
    .call(drag);

node.append('title').text(function (d) { return d.name; });

forceSim.nodes(graph.nodes)
    .on('tick', tick);

forceSim.force('link')
    .links(graph.links)

node
      .attr('cx', function (d) {
        var dist = Math.sqrt((d.x - width/2) * (d.x - width/2) + (d.y - height/2) * (d.y - height/2));
        if (dist > radius)
          d.x = width/2 + (d.x - width/2) * radius/dist;
        return d.x;
      })
      .attr('cy', function (d) {
        var dist = Math.sqrt((d.x - width/2) * (d.x - width/2) + (d.y - height/2) * (d.y - height/2));
        if (dist > radius)
          d.y = height/2 + (d.y - height/2) * radius/dist;
        return d.y;
      });
  }
});

function dragStart (d) {
  if (!d3.event.active) forceSim.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragging (d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragEnd (d) {
  if (!d3.event.active) forceSim.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

</script>

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