D3.js v4 Force Directed Graph with Labels

100%

D3.js v4 Force Directed Graph with Labels

✓ Published0🌍 Public

Last edited Apr 18, 2019

Created on Apr 18, 2019

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.

AI-generated description

A quick adaptation of Mike Bostock's force-directed graph showing character co-occurence in Les Misérables. In this version, the character names are displayed. This is accomplished by wrapping both circles and text svg components within a group svg component.

Compare to the original diagram by Mike Bostock.

forked from <a href='http://bl.ocks.org/heybignick/'>heybignick</a>'s block: <a href='http://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8'>D3.js v4 Force Directed Graph with Labels</a>

forked from <a href='http://bl.ocks.org/GerardoFurtado/'>GerardoFurtado</a>'s block: <a href='http://bl.ocks.org/GerardoFurtado/91368069a381009d30468aa9774c0de3'>D3.js v4 Force Directed Graph with Labels</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

D3.js v4 Force Directed Graph with Labels

This force-directed graph visualizes character co-occurrence in *Les Misérables*, adapted from Mike Bostock’s original with added permanent labels. Each character is represented by a circle colored by group via an ordinal scale, and a text label is placed beside it by grouping both elements inside a shared SVG `<g>` container. Node positions are computed with D3 v4’s force simulation, including link, charge, and centering forces, with drag behavior to reposition nodes. Edge thickness encodes co-occurrence strength, and labels update in place as the simulation runs, making the network easier to explore than the unlabeled original.

GGerardoFurtado

97% match

Loading thumbnail…

D3.js v4 Force Directed Graph with Labels

This example shows a force-directed graph of character co-occurrences in *Les Misérables*, with character names displayed directly beside each node. The visualization uses D3.js v4’s force simulation to position nodes and links, grouping SVG circles and text labels inside `<g>` elements so names travel with their nodes during drag and layout. Node colors encode character group membership, while link thickness reflects the strength of co-occurrence. The graph is interactive—nodes can be dragged, and the simulation restarts on interaction—and is rendered entirely in SVG with a clean, minimal style.

GGerardoFurtado

96% 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.

深深度碎片

90% match

Loading thumbnail…

Force-Directed Graph

A force-directed graph visualizes character co-occurrence in *Les Misérables*, with nodes positioned so related characters cluster together. The simulation uses d3.forceSimulation with link, charge, and center forces, while nodes are draggable circles colored by cluster and links are lines with stroke-width scaled by co-occurrence value. The code loads data from a JSON file and renders everything as SVG.

MMNoichl

89% 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

88% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in *Les Misérables*, with related characters drawn closer together through a physical simulation of charged particles and springs. Nodes are colored by group and links are weighted by co-occurrence frequency. The implementation uses D3 v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute positions, rendered as SVG lines and circles with drag interaction. Data is from Donald Knuth’s character co-appearance compilation.

MMettiHoof

88% match

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

88% 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

87% match