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
xxxxxxxxxx<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) function tick () { link .attr('x1', function (d) { return d.source.x; }) .attr('x2', function (d) { return d.target.x; }) .attr('y1', function (d) { return d.source.y; }) .attr('y2', function (d) { return d.target.y; }); 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