Skip to main content
SimilarExport ZIP
100%

fresh block

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

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

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.

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

29.Force-Directed Graph

This example shows a force-directed graph of character co-appearances in *Les Misérables*, with nodes colored by group membership and link thickness scaled by interaction weight. Using D3 v4, it loads data from `miserables.json` and runs a `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute positions. Nodes and links render as SVG circles and lines, and the visible `ticked` function updates their coordinates. The code also wires up `d3.drag` handlers to let viewers reposition nodes.

深深度碎片
84% match
Loading thumbnail…

(d3v4) Force Layout w highlights

This example shows a force-directed network graph of character interactions from *Les Misérables*, rendered as SVG nodes and links. Hovering over a node or link highlights its connections by fading unrelated elements, while a tooltip displays names, groups, and link strength. Dragging nodes repositions them, and double-clicking releases them from the fixed position. The visualization uses d3.forceSimulation with link, charge, and center forces, plus d3.drag for interaction and d3.schemeSet3 for coloring nodes by group.

FFrissAnalytics
84% match
Loading thumbnail…

Les Mis Force practice

This network diagram visualizes character co-appearances in Les Misérables, using a force-directed layout. Nodes are colored by group via d3.schemeAccent, with link stroke width proportional to connection value. The simulation uses d3.forceLink and d3.forceManyBody, and nodes are draggable with SVG circles. Hovering shows character names via tooltips. Data comes from the classic Les Misérables co-occurrence JSON, rendered entirely in SVG with D3 v4.

335degrees
84% match