Skip to main content
SimilarExport ZIP
100%

Arc diagram

✓ Published0🌍 Public
TThanaporn-sk
Last edited Apr 17, 2017
Created on Apr 17, 2017

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.

AI-generated description

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 <a href='http://bl.ocks.org/rpgove/'>rpgove</a>'s block: <a href='http://bl.ocks.org/rpgove/53bb49d6ed762139f33bdaea1f3a9e1c'>Arc diagram</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Arc

This visualization displays the character network from Les Misérables as nodes arranged along a horizontal line, with curved arcs connecting interacting characters. Node color distinguishes character groups, while link thickness and color encode interaction strength using a sequential color scale. The D3.js v6 code loads CSV data files for nodes and links, maps link endpoints to their corresponding node objects, and renders the network using SVG circles, paths, and text labels.

Vvivianaaai@qq.com
88% match
Loading thumbnail…

Arc Diagram Demo

This example demonstrates a simple arc diagram layout for network visualization, showing the "Les Misérables" character co-occurrence network. Nodes are positioned linearly along the bottom edge, while curved edges arc above or below to represent connections, with edge weight indicated by line thickness and node group membership encoded through color. The implementation uses the `d3.layout.arcDiagram` API to calculate node positions and arc paths, with D3.js (version 3.5.5) handling SVG rendering and interaction. The visualization reads from a `miserables.json` data file and includes randomized reverse links to showcase the layout's handling of directed edges.

TThanaporn-sk
86% 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
83% match
Loading thumbnail…

Radial network diagram

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.

TThanaporn-sk
79% 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
77% 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
77% match
Loading thumbnail…

fresh block

This interactive network diagram uses D3.js v4 to visualize character co-occurrence in *Les Misérables*, with nodes representing characters and links representing relationships between them. The graph is rendered as SVG, with node colors encoding each character's group (e.g., 1–10) and link thickness reflecting the strength of interaction (linearly mapped to the square root of the link value). The visualization supports zooming via mouse wheel and drag-and-drop repositioning of nodes, with the force-directed layout recalculating positions on every tick. Hovering over a node reveals the character's name via a tooltip. The force simulation uses link, charge, and centering forces to arrange the network, while the categorical color scheme distinguishes the social groups.

GGerardoFurtado
77% match
Loading thumbnail…

fresh block

This interactive network diagram uses D3.js v4 to visualize character co-occurrence in *Les Misérables*, with nodes representing characters and links representing relationships between them. The graph is rendered as SVG, with node colors encoding each character's group (e.g., 1–10) and link thickness reflecting the strength of interaction (linearly mapped to the square root of the link value). The visualization supports zooming via mouse wheel and drag-and-drop repositioning of nodes, with the force-directed layout recalculating positions on every tick. Hovering over a node reveals the character's name via a tooltip. The force simulation uses link, charge, and centering forces to arrange the network, while the categorical color scheme distinguishes the social groups.

GGerardoFurtado
77% match