Arc Diagrams with Variably Spaced Nodes

Demonstration of an ArcDiagram layout function with variably spaced nodes.

The alice.json dataset is the first line from Lewis Carroll's Alice in Wonderland, parsed with the Stanford Parser.

<!DOCTYPE html>
<style>
.axis {
    stroke: #000;
    stroke-width: 1px;
}

.node {
  fill: #000;
}

.label {
  stroke: #000;
  font: 12px sans-serif;
}

.link {
  stroke: #00F;
  stroke-width: 2px;
  fill: none;
}
</style>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="arcDiagram.js"></script>
<body>
<div style="width: 960; height: 500; border: none; overflow: scroll;">
<svg id="dep1" height=400>
  <defs>
    <marker id="arrowhead" refX="1" refY="2" markerWidth="5" markerHeight="4" orient="auto">
      <path d="M0,0 L1,2 L0,4 L5,2 Z"/>
    </marker>
  </defs>
</svg>
</div>
<script>
var topMargin=50, // in case of overrun (perhaps i should just fix the code)
    upperHeight=300, // where the arcs go
    lowerHeight=50, // where the nodes and labels go
    separation=10, radius=5;

var arcd = d3.arcDiagram()
    .linkLevel("compact")
    .nodeWidth(function(d) { return d.width; })
    .separation(separation)
    .nodeXOffset(function(d) { return d.width/2; });

var svg = d3.select("#dep1")
    .append("svg:g")
    .attr("transform", "translate("+radius*3+","+(upperHeight+topMargin)+")");

d3.json("alice.json", function(error, data) {
    arcd.nodes(data.nodes).links(data.links);

// do this first so the layout function can get the width
    var nodes = svg.selectAll(".node")
        .data(arcd.nodes())
      .enter().append("svg:g")
        .attr("class", "node")
    nodes.append("svg:circle")
        .attr("r", 5);
    nodes.append("svg:text")
        .attr("class", "label")
        .attr("text-anchor", "middle")
        .attr("dy", "2em")
        .text(function(d) { return d.value; })
      .each(function(d) { d.width = this.getBBox().width; });

// now we can call the layout function
    arcd();
    // and resize the svg
    d3.select("#dep1").attr("width", d3.max(data.nodes, function(d) { return d.x + d.width + separation; }));

var xscale = d3.scale.linear();  // we're calculating our own widths, so just do 1-to-1

var yscale = d3.scale.linear()
        .domain([0, d3.max(arcd.links().map(function(l) { return l.height; }))+1])
        .range([0, upperHeight]);

// with the scales, we can reposition the nodes
    nodes.attr("transform", function(d, i) {
            return "translate(" + xscale(d.x) + "," + (radius*2) + ")";
        });

var arc = pathgen()
        .xscale(xscale)
        .yscale(yscale);

var links = svg.selectAll(".link")
        .data(arcd.links())
      .enter().append("svg:path")
        .attr("class", "link")
        .style("marker-end", "url(#arrowhead)")
        .attr("d", arc.ortho);
});

// tiny path generator for an orthogonal path
function pathgen() {
    var gen = {},
        x = function(x) { return x; },
        y = function(y) { return y; };

gen.ortho = function(d) {
        var x1 = x(d.x1),
            x2 = x(d.x2),
            height = y(d.height),
            dir = x1 < x2 ? 1 : -1;
        return [
            "M", x1, 0,
            "v", -(height-10),
            "q", 0, -10, dir*10, -10,
            "H", x2 - (dir*10),
            "q", (dir*10), 0, (dir*10), +10,
            "V", -2
        ].join(" ");
    };

gen.xscale = function(a) {
      if (!arguments.length) return x;
      x = a;
      return gen;
    }

gen.yscale = function(a) {
      if (!arguments.length) return y;
      y = a;
      return gen;
    }

return gen;
}

</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

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