Skip to main content
100%

Force Dragging III

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

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.

AI-generated description

This example demonstrates applying d3-drag to a force-directed graph computed using d3-force. When the drag gesture starts, the targeted node is fixed to the pointer; it is released when the gesture ends. In addition, the simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value.

Compare to the SVG version.

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

gpl-3.0 Licensed

Similar vizzes