Skip to main content
100%

Force Dragging III

✓ Published0🌍 Public
GGerardoFurtado
Last edited May 2, 2018
Created on May 2, 2018

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.

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