Arc Diagram

Description

An arc diagram places all nodes of a network along a single horizontal (or vertical) line and draws connections between them as semicircular arcs above (or below) the line. The result is a compact, one-dimensional layout that avoids the node-overlap problems of force-directed network diagrams while still revealing the structure of connections.

The key insight of the arc diagram is that the ordering of nodes along the line dramatically affects readability. When nodes are arranged so that densely connected groups are adjacent, the arcs form visible clusters of short, nested curves. When the ordering is poor, arcs cross extensively and the diagram becomes tangled. Optimal node ordering is related to the minimum linear arrangement problem, and heuristics like spectral ordering, community detection, or manual domain-driven ordering are commonly used.

Arc diagrams are particularly effective for sequential or ordered data where the node order has intrinsic meaning — for example, characters in a book appearing in order of first mention, or genes arranged along a chromosome. The vertical extent of each arc encodes the “distance” between connected nodes in the linear ordering, so long arcs represent connections between distant nodes and short arcs represent local connections. This makes the arc diagram a natural choice for revealing both local clusters and long-range bridges in ordered networks.

When to Use

• Visualizing connections in a network where nodes have a natural linear order
• Revealing clusters and long-range bridges in sequential data
• Showing character co-occurrence in narratives or citation links between chronologically ordered papers
• When a force-directed layout produces too much overlap or clutter for the network size

When NOT to Use

• When the network has no natural or meaningful node ordering — a network diagram with force layout may be better
• For very dense networks (many edges per node) — arcs become an unreadable tangle
• When the spatial layout of nodes matters (e.g., geographic networks) — use a map or spatial network diagram
• When the focus is on hierarchical structure — use a tree, sunburst, or treemap

Anatomy

• Node line: A single straight axis (usually horizontal) along which all nodes are placed.
• Nodes: Dots or labeled points positioned along the line, ordered by some meaningful criterion.
• Arcs: Semicircular curves connecting pairs of nodes. Arc height is proportional to the distance between the connected nodes.
• Arc weight: Line thickness or opacity can encode edge weight or frequency.
• Node labels: Text below or beside each node identifying it.
• Color encoding: Arcs or nodes colored by group, type, or community membership.

Variations

• Double arc diagram: Arcs on both sides of the line, with categories above and below (e.g., positive and negative relationships).
• Vertical arc diagram: Nodes arranged vertically with arcs curving left or right.
• Weighted arc diagram: Arc thickness encodes edge weight, producing a ribbon-like effect similar to a chord diagram but in linear layout.
• Hierarchical arc diagram: Nodes ordered by hierarchy (e.g., taxonomy) with arcs showing non-hierarchical cross-links.

Code Reference

// Observable Plot - arc diagram using link marks
Plot.plot({
  marks: [
    Plot.link(edges, {
      x1: d => nodeOrder.indexOf(d.source),
      x2: d => nodeOrder.indexOf(d.target),
      y1: 0,
      y2: 0,
      curve: "bump-y",
      stroke: "steelblue",
      strokeWidth: d => d.weight,
      strokeOpacity: 0.5,
      tip: true
    }),
    Plot.dot(nodes, {
      x: (d, i) => i,
      y: 0,
      r: 6,
      fill: "group"
    }),
    Plot.text(nodes, {
      x: (d, i) => i,
      y: 0,
      text: "name",
      dy: 15,
      fontSize: 10
    })
  ],
  x: { axis: null },
  y: { axis: null }
})