Untitled

100%

✓ Published0🌍 Public

Last edited Mar 27, 2021

Created on Mar 27, 2021

This interactive force-directed network graph visualizes character relationships from Victor Hugo’s *Les Misérables*, with nodes representing characters and links showing interactions. The code uses D3 v4’s `d3.forceSimulation` with link, charge, and center forces to position nodes, while SVG elements render colored circles and text labels. Dragging nodes is enabled via `d3.drag`, and link thickness reflects interaction strength from the miserables.json dataset.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Untitled

This example visualizes the character co-occurrence network from Victor Hugo’s *Les Misérables* as an interactive force-directed graph. Nodes represent characters, colored by group, while links show relationships with thickness scaled by connection weight. The visualization uses D3 v4’s `d3.forceSimulation` with link, charge, and center forces to position elements, and `d3.drag` enables node dragging. Rendered in SVG, it labels each node with the character’s name and includes hover tooltips. Data comes from the bundled `miserables.json` file.

NNathannous

94% match

Loading thumbnail…

Untitled

This visualization shows the network of character interactions from Victor Hugo’s *Les Misérables*, using a force-directed layout to cluster characters into groups by their relationships. Nodes represent characters and are colored by their group; links represent co-appearance, with thickness proportional to interaction weight. The example uses D3 v4’s `d3.forceSimulation` for the physics engine, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to shape the layout, and `d3.drag` for interactive node dragging. Data comes from the included `miserables.json` file, rendered as SVG elements.

Kkalokli8

93% 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

91% 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

90% 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

89% match

Loading thumbnail…

Untitled

This example shows a force-directed network diagram of the characters from *Les Misérables*, with nodes representing characters and links representing co-appearances. Node color encodes community group, and link thickness reflects connection weight. Built with React and D3 v4, it uses `d3.forceSimulation` for physics, `d3.forceLink` and `d3.forceManyBody` for layout, plus `d3.drag` for interactive node dragging. Data comes from the included `miserables.json` file, rendered as SVG elements.

GGaneshPenumarthi

89% match

Loading thumbnail…

Les misérables (graphe)

This D3.js force-directed graph visualizes the character interactions in Victor Hugo’s *Les Misérables*, using a JSON dataset of nodes (characters) and weighted links (co-appearances). The SVG rendering uses `d3.forceSimulation` with link, many-body charge, and centering forces to position nodes, while node fill colors are assigned by categorical group via `d3.scaleOrdinal`. Link stroke-width encodes interaction strength, and nodes are draggable, with a tooltip showing each character’s name.

JJulesSauvinet

89% match

Loading thumbnail…

Untitled

This interactive network visualization displays the character relationships from Les Misérables, with nodes representing individuals and links showing their connections. Users can adjust force simulation parameters through control panels, including charge strength, collision radius, link distance, and X/Y gravity forces. The graph renders as SVG circles and lines using D3 v4's force simulation APIs (d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCollide, d3.forceCenter). Node dragging and tooltips are implemented with d3.drag, while the simulation alpha value is visualized as a dynamic progress bar.

Nnoe-d

88% match