Skip to main content
SimilarExport ZIP
100%

Arc

✓ Published1🌍 Public
Vvivianaaai@qq.com
Last edited Nov 13, 2023
Created on Nov 13, 2023
Forked from D3.js 教程

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
87% 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
83% 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
82% 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
81% match
Loading thumbnail…

Untitled

This example visualizes the character co-occurrence network from *Les Misérables* as a force-directed graph. Nodes represent characters, colored by group, with links sized by interaction weight. The visualization uses D3 v4’s `d3.forceSimulation` with link, charge, and center forces to position elements, while SVG circles and text render the nodes and labels. Data loads from a local `miserables.json` file, and nodes support dragging via `d3.drag`.

NNathannous
81% 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
81% match
Loading thumbnail…

Untitled

A force-directed network diagram displays character relationships from the novel Les Misérables, with nodes colored by group and link thickness scaled by connection value. Built with React and d3.v4, the visualization uses d3.forceSimulation with link, charge, and center forces to position nodes in SVG space. The code leverages d3.scaleOrdinal for categorical colors, d3.drag for interactive node movement, and loads data from a local miserables.json file. Labels appear beside each node, and the simulation updates positions on each tick.

LLex
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
81% match