Skip to main content
100%

Neighborhood Pull

✓ Published0🌍 Public
ZZoeLeBlanc
Last edited Feb 19, 2018
Created on Feb 19, 2018

This example shows a force-directed graph of character co-occurrence in Les Misérables, where nodes represent characters and links represent their relationships. Built with React and D3 v4, the visualization renders as an SVG and supports dragging nodes to adjust the layout dynamically. Clicking a node selects it, while double-clicking highlights its immediate neighborhood—the selected node and all directly connected neighbors—which then respond to the drag gesture. When a drag starts, the targeted node is fixed to the pointer, and any previously selected neighborhood nodes are released; when the drag ends, the neighborhood selection is cleared.

AI-generated description

This example demonstrates applying d3-drag to a force-directed graph computed using d3-force. When the drag gesture starts, the targetted node is fixed to the pointer; it is released when the gesture ends.

Double-click to select a neighborhood, which will react to the dragged node.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/2675ff61ea5e063ede2b5d63c08020c7'>Force Dragging I</a>

forked from <a href='http://bl.ocks.org/akollegger/'>akollegger</a>'s block: <a href='http://bl.ocks.org/akollegger/54c4be03e148c625217df1984e1c3908'>Force Dragging I</a>

forked from <a href='http://bl.ocks.org/akollegger/'>akollegger</a>'s block: <a href='http://bl.ocks.org/akollegger/f7fc55f6733cff158e97794002252c59'>Cold Force Dragging </a>

forked from <a href='http://bl.ocks.org/akollegger/'>akollegger</a>'s block: <a href='http://bl.ocks.org/akollegger/e399668d292ace1b1a249ef6c017b3cb'>Neighborhood Pull </a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Force Directed with Voronoi selection

This example shows a force-directed graph of character co-occurrence in *Les Misérables*, with a Voronoi overlay that creates clickable regions around each node. The D3 v4 visualization uses a physical simulation with charged particles and springs to position related characters closer together, while the Voronoi cells extend the interactive area beyond the small circles. The original node-drag interactions are preserved, but the overlay also lets users select and drag nodes by clicking anywhere within their corresponding cell. Node colors encode the character’s community group, and line thickness reflects co-occurrence frequency. The Voronoi cells are recomputed on every tick, keeping the selection areas aligned with the moving nodes.

AAlainRo
84% match
Loading thumbnail…

29. force drag 1

A force-directed network graph displays character relationships from Les Misérables, with nodes representing characters and links showing their connections. The visualization uses d3.forceSimulation with link, charge, and center forces to position the nodes, while the links are rendered as SVG lines and nodes as circles. Users can drag any node to interact with the layout, as the code enables d3.drag on the circles with start, drag, and end handlers that fix and release the dragged node's position during the simulation.

深深度碎片
81% match
Loading thumbnail…

29. force drag 1

A force-directed network graph displays character relationships from Les Misérables, with nodes representing characters and links showing their connections. The visualization uses d3.forceSimulation with link, charge, and center forces to position the nodes, while the links are rendered as SVG lines and nodes as circles. Users can drag any node to interact with the layout, as the code enables d3.drag on the circles with start, drag, and end handlers that fix and release the dragged node's position during the simulation.

深深度碎片
81% match
Loading thumbnail…

Force Dragging III

This interactive force-directed graph of the character co-occurrence network in Victor Hugo’s *Les Misérables* demonstrates applying d3-drag to d3-force in a canvas-rendered visualization. Nodes are colored by group and connected by weighted links. When the user clicks and drags a node, it becomes fixed to the pointer via the simulation’s fx/fy properties, and the simulation is temporarily heated by raising alphaTarget to 0.3, causing the network to rearrange more actively; releasing the node restores alphaTarget to 0. The drag subject is found by querying the simulation at the pointer position, and the graph animates continuously on a tick event, clearing and redrawing the canvas. This example is a canvas-based variant of the original SVG version.

ZZoeLeBlanc
81% 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
81% match
Loading thumbnail…

Force Dragging III

This example shows a force-directed graph rendered with Canvas, where nodes represent characters from *Les Misérables* and links show their co-occurrence in Victor Hugo’s novel. The graph is computed using d3-force, with node colors mapped by group through an ordinal color scale. Dragging a node with the mouse fixes it to the pointer while the simulation’s alpha target is raised to 0.3, heating up the layout for smoother interaction; releasing the node unfixes it and returns the alpha target to zero. The visualization demonstrates how d3-drag can be combined with d3-force in a canvas-based rendering, with nodes and links redrawn on every tick for responsive, interactive exploration of the network.

GGerardoFurtado
81% 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
81% 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
80% match