Skip to main content
SimilarExport ZIP
100%

29.Force-Directed Graph

✓ Published0🌍 Public
深深度碎片
Last edited Aug 4, 2016
Created on Aug 4, 2016

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.

AI-generated description

Built with blockbuilder.org

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in *Les Miséables*, using a physical simulation to position related characters closer together. Based on data compiled by Donald Knuth, the layout applies charged-particle repulsion and spring-like link forces, with node color encoding community group and link thickness reflecting co-appearance frequency. The D3 v4 implementation precomputes the layout over 300 ticks, then renders static SVG circles and lines, with drag-and-drop interaction to explore the network.

GGerardoFurtado
91% match
Loading thumbnail…

d3-force

A force-directed graph of the Les Misérables character co-occurrence network, rendered as SVG circles and lines. Node color encodes each character's group, derived from the number of links in the data.tsv file, which contains 410 nodes and 2,399 edges. d3.forceSimulation with forceLink, forceManyBody, and forceCenter drives the layout, while d3.drag enables node repositioning. A d3.zoom handler applies pan and zoom transforms to the entire graph.

Cchungmin-yu
91% match
Loading thumbnail…

Force Directed Graph

A force-directed graph displays character relationships from Les Misérables, with nodes colored by group affiliation and labeled with character names. The visualization uses d3.forceSimulation to position nodes and links, while a secondary label simulation keeps text labels readable. Hovering highlights a node's immediate neighbors by adjusting opacity. The SVG rendering includes zoom and drag interactions, and the data comes from the bundled data.json file.

KKarkG
90% match
Loading thumbnail…

Force-Directed Graph

This interactive force-directed graph visualizes character co-appearance relationships from the *Les Misérables* dataset. Nodes represent characters and are colored by their assigned group, while black links connect characters that appear together. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to compute physics-based layouts. Nodes and labels are rendered as SVG circles with drag functionality, and a zoom transform is applied via the d3 zoom controller.

KKhanin Sisaengsuwanchai
90% 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
90% match
Loading thumbnail…

Untitled

This example shows a force-directed network graph of character co-appearances in Les Misérables, with curved links connecting nodes. The visualization uses D3 v4’s `d3.forceSimulation` to compute node positions and `d3.drag` for interactive dragging. Each original link is split into two straight segments through an intermediate node, and `path` elements with quadratic Bézier curves (`S` commands) render these bilinks as smooth arcs. Node colors are assigned by group using `d3.scaleOrdinal` with `d3.schemeCategory20`, and the data comes from the included `miserables.json` file, rendered as SVG.

RRivaan
90% match
Loading thumbnail…

D3.js v4 Force Directed Graph with Labels

This example shows a force-directed graph of character co-occurrence in *Les Misérables*, with each character’s name displayed beside its node. It adapts Mike Bostock’s original diagram by wrapping each circle and its text label in a `<g>` element, enabling labels to move with nodes during interaction. The visualization uses D3.js v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute layout, and renders with SVG. Nodes are color-coded by group using `d3.scaleOrdinal` and `d3.schemeCategory20`, with data loaded from a `miserables.json` file.

GGerardoFurtado
90% match
Loading thumbnail…

d3-force

A force-directed graph rendered in SVG displays 410 nodes and 1,217 links from the Les Misérables character co-occurrence dataset. Nodes are colored by group using `d3.schemeCategory10`, based on the number of links each character has. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to compute layout, while `d3.drag` enables node repositioning and `d3.zoom` supports panning and scaling. Link width reflects connection weight.

Eerin1234567
90% match