Skip to main content
100%

Arc Diagram Demo

✓ Published0🌍 Public
Aajayjayayy
Last edited May 28, 2018
Created on May 28, 2018

This arc diagram visualizes character co-occurrence in *Les Misérables* using a custom D3 layout. Nodes are positioned evenly along a horizontal baseline, and curved arcs connect related characters, with arc height encoding the distance between connected nodes. The diagram is rendered in SVG with nodes as colored circles and links as semi-transparent arcs, using a categorical color scale based on character groups. Random back-links are added to the dataset to demonstrate the layout's support for directed relationships. The visualization is built with D3.js and a custom arc diagram layout that calculates node positions and generates basis-interpolated paths for the links.

AI-generated description

An example of a simple arc diagram layout I wrote for an upcoming workshop on network data visualization.

forked from <a href='http://bl.ocks.org/emeeks/'>emeeks</a>'s block: <a href='http://bl.ocks.org/emeeks/8d75da95d1e78cd08899'>Simple Arc Diagram Layout</a>

mit Licensed

Similar vizzes

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
90% 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
89% match
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
87% 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
86% match
Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in *Les Misérables*, with nodes representing characters and links indicating shared appearances. The layout uses D3 v4’s `d3.forceSimulation` and `d3.forceLink`, though the standard simulation is commented out, leaving nodes positioned randomly via `Math.random` while links are drawn with calculated coordinates. Node color encodes group membership via `d3.scaleOrdinal` and `d3.schemeCategory20`, and drag interactions are enabled with `d3.drag`. The data is compiled by Donald Knuth and rendered as SVG.

ZZhengyan Yu
80% 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
79% match
Loading thumbnail…

Untitled

This example shows a force-directed network graph of character co-appearances in Les Misérables, with curved links connecting nodes. The visualization uses D3 v4’s `d3.forceSimulation` to compute node positions and `d3.drag` for interactive dragging. Each original link is split into two straight segments through an intermediate node, and `path` elements with quadratic Bézier curves (`S` commands) render these bilinks as smooth arcs. Node colors are assigned by group using `d3.scaleOrdinal` with `d3.schemeCategory20`, and the data comes from the included `miserables.json` file, rendered as SVG.

RRivaan
79% match
Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in *Les Miséables*, using a physical simulation to position related characters closer together. Based on data compiled by Donald Knuth, the layout applies charged-particle repulsion and spring-like link forces, with node color encoding community group and link thickness reflecting co-appearance frequency. The D3 v4 implementation precomputes the layout over 300 ticks, then renders static SVG circles and lines, with drag-and-drop interaction to explore the network.

GGerardoFurtado
79% match