Skip to main content
SimilarExport ZIP
100%

fresh block

✓ Published0🌍 Public
CChmits
Last edited Feb 9, 2018
Created on Feb 9, 2018

This visualization shows the character network from *Les Misérables* as an interactive force-directed graph. Nodes represent characters, colored by their group affiliation, while links show relationships with thickness scaled by relationship weight. The layout uses d3.forceSimulation with link, charge, and center forces, rendering SVG circles and lines. Users can drag nodes to reposition them, with drag events updating fixed positions. Data comes from the bundled miserables.json file.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This interactive network diagram uses D3.js v4 to visualize character co-occurrence in *Les Misérables*, with nodes representing characters and links representing relationships between them. The graph is rendered as SVG, with node colors encoding each character's group (e.g., 1–10) and link thickness reflecting the strength of interaction (linearly mapped to the square root of the link value). The visualization supports zooming via mouse wheel and drag-and-drop repositioning of nodes, with the force-directed layout recalculating positions on every tick. Hovering over a node reveals the character's name via a tooltip. The force simulation uses link, charge, and centering forces to arrange the network, while the categorical color scheme distinguishes the social groups.

GGerardoFurtado
94% match
Loading thumbnail…

fresh block

This interactive network diagram uses D3.js v4 to visualize character co-occurrence in *Les Misérables*, with nodes representing characters and links representing relationships between them. The graph is rendered as SVG, with node colors encoding each character's group (e.g., 1–10) and link thickness reflecting the strength of interaction (linearly mapped to the square root of the link value). The visualization supports zooming via mouse wheel and drag-and-drop repositioning of nodes, with the force-directed layout recalculating positions on every tick. Hovering over a node reveals the character's name via a tooltip. The force simulation uses link, charge, and centering forces to arrange the network, while the categorical color scheme distinguishes the social groups.

GGerardoFurtado
94% match
Loading thumbnail…

fresh block

A force-directed network diagram of character co-appearances from Les Misérables uses d3.forceSimulation to position nodes and links in an SVG. Node colors map to character groups via d3.scaleOrdinal, while link thickness reflects interaction strength. The simulation supports dragging nodes, with d3.drag handling positional updates and alphaTarget to restart motion.

CChmits
92% match
Loading thumbnail…

fresh block

This example shows a force-directed network graph of character interactions from *Les Misérables*, rendered as SVG circles and curved links. The code uses d3.forceSimulation with link, charge, and centering forces to position nodes, and a custom d3.hypergraph function to transform hyperedges (links connecting more than two nodes) into intermediate connection nodes with smaller gray circles. Zoom and drag interactions are enabled via d3.zoom and d3.drag.

MMNoichl
89% 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
87% 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
86% 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
86% 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
86% match