Neighborhood Pull

100%

Neighborhood Pull

✓ Published0🌍 Public

Last edited Aug 30, 2017

Created on Aug 30, 2017

This example demonstrates applying d3-drag to a force-directed graph computed with d3-force. Nodes are circles rendered in SVG, with links drawn as lines between them. Dragging a node fixes it to the pointer; double-clicking a node selects its neighborhood (the node and its immediate neighbors), which then reacts to the dragged node by being released from their fixed positions. The graph uses the Les Misérables character co-occurrence dataset, and nodes are colored and styled based on their group and selection state.

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>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Neighborhood Pull

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.

ZZoeLeBlanc

90% match

Loading thumbnail…

Cold Force Dragging

This example applies d3-drag to a force-directed graph computed with d3-force, rendering nodes and links as SVG circles and lines. Dragging a node fixes it to the pointer for the duration of the gesture. Unlike similar examples, when the simulation settles, every node is pinned to its final position, keeping the graph "cold"; only dragged nodes move. Clicking a node selects it, and the selected node is highlighted with a black outline. The data is the classic Les Misérables character co-occurrence network.

Aakollegger

85% match

Loading thumbnail…

Force Dragging I

A force-directed graph of character co-occurrences in Les Misérables, rendered as SVG circles and lines, demonstrates applying d3-drag to a d3-force simulation. Dragging a node fixes it to the pointer by setting its x and y coordinates, while the simulation’s alpha target is temporarily increased to reheat the layout; releasing the node unfixes it and cools the simulation. The graph uses d3.v4 and the GPL-3.0 license.

Aakollegger

82% match

Loading thumbnail…

Force Dragging I

This example demonstrates applying d3-drag to a force-directed graph computed using d3-force. The network shows character relationships from Les Misérables, rendered as SVG circles connected by lines. When a drag gesture starts on a node, that node is fixed to the pointer position via the simulation’s `fx` and `fy` properties, and the simulation’s target alpha is raised to 0.3 to “heat” the layout while interacting. Releasing the node removes the fixed position and resets the target alpha to zero.

ZZoeLeBlanc

81% match

Loading thumbnail…

Single Axis Force Layout

This example shows a force-directed graph of character co-occurrence in *Les Misérables*, rendered as SVG circles connected by lines. Using d3-force and d3-drag, nodes can be grabbed and moved with the mouse; the targeted node is fixed to the pointer during the drag and released on release. The simulation is also temporarily heated by raising the alpha target during interaction, causing the graph to re-layout and settle as nodes are repositioned.

Aakollegger

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

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

79% match

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

78% match