Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Nnoe-d
Last edited Apr 17, 2021
Created on Apr 17, 2021
Forked from D3 Starter

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.

AI-generated description

Test to create a network with D3 from this tutorial.

MIT Licensed

Similar vizzes

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

Force-Directed Graph V3

This example shows a force-directed network graph of character interactions from the novel Les Misérables. The visualization displays nodes as unlabeled circles and links as straight lines, with the layout computed dynamically through a physics simulation. Using D3 v6 within a React framework, the code applies `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position the 17 nodes and 14 links. The SVG elements update their coordinates on each simulation tick, though the data only includes a subset of the full character relationships.

Sschneich
88% 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
88% match
Loading thumbnail…

Force-Directed Graph click

This interactive visualization shows the character network from Les Misérables as a force-directed graph. Users can pan and zoom the SVG canvas, while hovering over nodes reveals character names and dragging nodes rearranges the layout dynamically. The graph uses d3.forceSimulation with forceLink and forceManyBody to position nodes, with link thickness and opacity scaled by connection weight via d3.scaleLinear. Node colors are randomly assigned per group, and the data comes from a text file parsed by a custom graphUtils function that extracts nodes, links, and weights from whitespace-separated values.

KKhanin Sisaengsuwanchai
88% 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
88% 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
87% match