Skip to main content
SimilarExport ZIP
100%

fresh block

✓ Published0🌍 Public
MMNoichl
Last edited Dec 21, 2017
Created on Dec 21, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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
91% match
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
89% 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
87% 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
87% 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
86% 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
84% match
Loading thumbnail…

fresh block

This example visualizes a network of interconnected nodes, likely representing user connections or data relationships, using a force-directed layout. The visualization employs D3’s `d3.forceSimulation` to compute the physics of node positions and link forces, while `d3.select` and SVG elements handle rendering. The scene is drawn against a dark background, with nodes as circles and links as lines, suggesting a real-time or interactive graph. The code also integrates a canvas-based `getImageData` operation, possibly for pixel-level effects or hit detection, though the primary display relies on SVG. Data appears to originate from a static gist, emphasizing structure over live data feeds.

BBolitto
83% match
Loading thumbnail…

d3-force

A force-directed graph visualizes character interactions from Les Misérables, with 410 nodes colored by group and 410 weighted links. Users can drag individual nodes and zoom the SVG canvas. The implementation uses `d3.forceSimulation`, `forceLink`, `forceManyBody`, `forceCenter`, `d3.zoom`, and `d3.drag`, with node colors derived from `schemeCategory10` and data loaded from a TSV file.

Ttoeric
83% match