Radial network diagram

100%

Radial network diagram

✓ Published0🌍 Public

Last edited Apr 21, 2017

Created on Apr 17, 2017

A radial network diagram visualizes character interactions in Les Misérables, with nodes grouped and ordered by the first chapter in which each character appears. The visualization uses d3.cluster for the hierarchical radial layout and d3.curveBundle to draw hierarchical edge bundling between connected characters. Hovering over a node or link highlights its connections and the associated path. The data comes from a JSON file containing character names and chapter lists, and the chart is rendered as SVG.

AI-generated description

A radial network diagram of Les Miserables characters with hierarchical edge bundling. Nodes are ordered and grouped by the first chapter the character appeared in.

Radial layouts can be useful for seeing patterns between and within groups. For example, we can see that all the characters in Vol 1, Book 3, Chapter 4 only interact with each other, Fantine, and Felix Tholomyes. However, this layout has difficulty scaling to hundreds of nodes, and edge bundling can make it difficult to count the number of links connecting to each node.

A related visualization is the chord diagram, which shows aggregated connections between groups.

forked from <a href='http://bl.ocks.org/rpgove/'>rpgove</a>'s block: <a href='http://bl.ocks.org/rpgove/d40e8b02a5f9edb50d31c37c4c03a79a'>Radial network diagram</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Gist 524f4fcde9f1a572fcb66439053a99d1

A radial hierarchical edge bundling diagram visualizes the Les Misérables character co-occurrence network, grouping nodes into a two-level hierarchy by numbered communities. Curved steel-blue paths link each character to their targets, using `d3.radialLine` with a bundled curve and `d3.cluster` for circular leaf placement. Labels rotate around the circumference, and the code’s data structure maps group children and target IDs before rendering with D3 v5 selections.

Mmbostock

82% match

Loading thumbnail…

Network

A network diagram displays character relationships from Les Misérables, with nodes representing characters and links showing their connections. Node color encodes group membership via a categorical color scale, while link thickness reflects relationship weight. The visualization uses D3 v5's force simulation (`d3.forceSimulation`) with link, charge, and center forces to position nodes. SVG circles and lines render the graph, with positions updated on each simulation tick. Data comes from a JSON file containing character IDs and weighted links.

Jjuliaric

81% match

Loading thumbnail…

(^^)

A force-directed network diagram displays the relationships among characters in the novel *Les Misérables*. Nodes represent individual characters, colored by their community group, while links indicate co-appearance, with line thickness proportional to interaction strength. Nodes can be dragged interactively, causing the simulation to adjust the layout. The visualization uses `d3.forceSimulation` for physics, `d3.drag` for node manipulation, and `d3.schemePaired` for categorical coloring, rendering in SVG within a React framework. Data is loaded from a JSON file hosted on GitHub.

CCyc-Evelyn

80% match

Loading thumbnail…

forcedlayout

This visualization displays the character network from Les Misérables as an arc diagram. Nodes are arranged linearly along a horizontal axis, sorted by group membership, while links between characters are drawn as curved arcs beneath the line. Hovering over a node reveals a tooltip with the character’s name. The implementation uses D3.js v3 to generate SVG elements, employing d3.scale for positioning and colors, and d3.svg.line.radial for the arc paths.

NNeeraj Kumar

80% match

Loading thumbnail…

Arc diagram

An interactive arc diagram visualizes character interactions in Les Misérables, with nodes ordered by the first chapter in which each character appears. Arcs represent relationships between characters, and hovering over a node or link highlights its connections. The visualization uses D3 v4 to render SVG elements, with node positions computed manually and arc paths built via string concatenation. Data comes from `jean.json`, containing character names, chapter lists, and interaction links. Node radius scales with chapter count, link width scales with interaction frequency, and mouseover events dynamically restyle linked elements.

TThanaporn-sk

79% match

Loading thumbnail…

Network

This network visualization shows the relationships between characters from *Les Misérables*, with nodes colored by group and link thickness representing connection strength. The force-directed layout uses `d3.forceSimulation` with link, many-body charge, and center forces to position the SVG elements. The code loads JSON data, creates circles and lines, and updates their positions on each simulation tick using D3's selection API.

Llukeod

78% match

Loading thumbnail…

Untitled so far

This network diagram visualizes the character relationships from *Les Misérables*, using a node-link layout where characters are nodes and their interactions are links. The SVG rendering is created with D3.js v5, which likely uses a force-directed simulation to position nodes. The visualization highlights group membership through node colors and encodes connection strength through link properties, offering a structural overview of the novel's social web.

TTMorgan99

78% match

Loading thumbnail…

Untitled

A force-directed network diagram visualizes character relationships from Les Misérables, with nodes representing characters and curved links indicating interactions between them. The graph uses d3.forceSimulation with link, charge, and center forces to position elements, while zoom and drag interactions enable exploration. The code loads miserables.json data and renders the network as SVG, assigning colors by group membership and using intermediate nodes to create curved edge paths.

JJoker-tr

78% match