Untitled

100%

✓ Published1🌍 Public

Last edited Apr 8, 2020

Created on Apr 4, 2020

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.

AI-generated description

A bare minimum HTML page.

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

95% match

Loading thumbnail…

Untitled

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.

Mmuzzheng

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

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

90% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph maps character co-occurrence in Victor Hugo’s *Les Misérables*: each circle is a character, each line a shared scene. A D3 force simulation with charge and link forces groups related characters together, while node color encodes the character’s group and line thickness reflects co-occurrence strength. Built with D3 v4 and rendered as SVG, the graph is interactive — nodes can be dragged to explore the network, and the simulation repositions related characters into proximity. The data was compiled by Donald Knuth and the layout is based on prior work by Tim Dwyer and Thomas Jakobsen.

AAndresAnayaIsaza

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…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables*, using a physical simulation to position related characters closer together. The SVG rendering employs `d3.forceSimulation` with link, charge, and center forces to calculate node positions, while link thickness reflects co-occurrence frequency. Nodes are colored by group membership, and drag interactions allow users to adjust the layout. The data comes from Donald Knuth’s compilation of character appearances.

Mmbostock

89% match

Loading thumbnail…

Clustered Network

This interactive visualization displays the co-appearance network of characters from Victor Hugo’s *Les Misérables*, using a force-directed layout with clustered groups. Nodes represent characters, while edges show shared chapters, with the option to expand or collapse clusters and self-referential links. The example uses D3 v2, employing two `d3.layout.force` instances: one for the primary nodes and another for helper nodes that generate bezier-curved links. Debug modes overlay traces of force.alpha and movement energy, rendered as SVG paths with animated updates, based on data by D. E. Knuth and community groupings from Newman and Girvan.

GGerHobbelt

89% match