Arc diagram

An arc diagram of Les Miserables characters ordered by the first chapter they appear in. Arcs represent characters that interact with each other. This can be seen as a 1D semantic substrate.

Arc diagrams can be useful for examining relationships between an ordered variable, like chapters in a book, and the connections between nodes. However, because of limits in screen size, arc diagrams are often limited to graphs with a few hundred nodes at most. It can also be difficult to identify high-level patterns in connections and clusters, depending on the sort order.

forked from rpgove's block: Arc diagram

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

.links path {
  fill: none;
  stroke: #999;
  stroke-opacity: 0.6;
}

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

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

var i, j, node;
var groupSep = 10;

var nodeRadius = d3.scaleSqrt().range([3, 7]);

var linkWidth = d3.scaleLinear().range([1.5, 2 * nodeRadius.range()[0]]);

var margin = {
  top: nodeRadius.range()[1] + 1,
  right: nodeRadius.range()[1] + 1,
  bottom: nodeRadius.range()[1] + 1,
  left: nodeRadius.range()[1] + 1
};

var width = 960 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;

var x = d3.scaleLinear().range([0, width]);

var svg = d3.select('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

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

var idToNode = {};

graph.nodes.forEach(function (n) {
    idToNode[n.id] = n;
  });

graph.links.forEach(function (e) {
    e.source = idToNode[e.source];
    e.target = idToNode[e.target];
  });

// Sort nodes by first appearance (volume, book, chapter)
  graph.nodes.forEach(function (n) {
    n.chapters = n.chapters.map(function (chaps) { return chaps.split('.').map(function (c) { return parseInt(c); }); });
    n.chapters.sort(chapterCompare).reverse();
    n.firstChapter = n.chapters[0];
  });
  graph.nodes.sort(function (a, b) {
    return chapterCompare(a.firstChapter, b.firstChapter);
  }).reverse();

// Compute x,y coordinates (have a little extra separation when we switch volumes)
  for (i = 0, j = 0; i < graph.nodes.length; ++i) {
    node = graph.nodes[i];
    if (i > 0 && graph.nodes[i-1].firstChapter[0] != node.firstChapter[0]) ++j;
    node.x = j * groupSep + i * (width - 4 * groupSep) / (graph.nodes.length - 1);
    node.y = height;
  }

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

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

node.append('title').text(function (d) { return d.name + ' - ' + d.firstChapter.join('.'); });

function chapterCompare (aChaps, bChaps) {
    if (aChaps[0] != bChaps[0])
      return bChaps[0] - aChaps[0];
    else if (aChaps[1] != bChaps[0])
      return bChaps[1] - aChaps[1];
    else if (aChaps[2] != bChaps[2])
      return bChaps[2] - aChaps[2];
    return 0;
  }
});

</script>

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