liveBook · Manning

Arc diagram

As explained in D3.js in Action, Third Edition

An arc diagram is a network visualization that represents relationships between entities with arcs connecting nodes arranged along a baseline or axis.

An arc diagram visualizes a network by arranging nodes along a line and drawing links as arcs above or below it. It emphasizes node dynamics, making isolated nodes and highly connected nodes easy to compare. section 12.0 section 12.3

Build an arc diagram by:

  • Separating the dataset into nodes and edges, then deep-copying both arrays for diagram-specific changes. section 12.5
  • Encoding data with node color and size, and link thickness based on family, speech count, and shared scenes. section 12.3

Character connections in Romeo and Juliet

Represent characters as circles arranged across a horizontal axis. Color them by family, size them by the number of lines spoken, and draw links between characters sharing scenes; thicker links indicate more shared scenes. Hover interaction can fade unrelated links and nodes, revealing each character’s local connections.

How D3.js in Action, Third Edition covers it

How deep it goes
Explains preprocessing, positioning, SVG path generation, visual encoding, and hover interaction without detailing broader layout algorithms.
Examples
Uses a character network from Romeo and Juliet, with shared scenes defining links and figures illustrating isolated and highly connected nodes.
What it assumes
Assumes basic network vocabulary while defining nodes, links, and separate node-edge datasets for visualization.
What you can do after
Build it from scratch with D3 by preprocessing network data, drawing SVG arcs, encoding attributes, and adding hover highlighting.
How it connects
Connects network visualization, adjacency matrices, force-directed diagrams, nodes, edges, and D3 shape utilities.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.