Skip to main content
SimilarExport ZIP
100%

Force Dragging III

✓ Published0🌍 Public
Mmbostock
Last edited Jul 4, 2016
Created on May 11, 2016

This example shows an interactive force-directed graph of character co-occurrence in *Les Misérables*, rendered as nodes and links on a Canvas. Users can click and drag any node to reposition it, which temporarily fixes that node to the pointer and reheats the simulation. The code uses d3.forceSimulation with link, charge, and center forces, while d3.drag handles the drag gesture. Data comes from the bundled miserables.json file, and the visualization redraws on each simulation tick.

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.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Force Dragging I

This interactive force-directed graph visualizes character co-appearances in *Les Misérables*. Users can drag any node, which fixes it to the pointer during the gesture while the simulation's target alpha is set to a non-zero value, "heating" the layout to emphasize the drag's effect. The graph uses `d3.forceSimulation` with link, many-body, and center forces, while `d3.drag` manages the drag interactions on SVG circles. Node and link positions update on each simulation tick, and the underlying data comes from `miserables.json`.

Mmbostock
95% 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
93% 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.

深深度碎片
87% 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.

深深度碎片
87% 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
87% 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.

深深度碎片
87% match
Loading thumbnail…

Fork of Force-Directed Graph

This is an interactive force-directed graph that visualizes the network of characters from *Les Misérables*, based on the classic `miserables.json` dataset. Nodes are colored by their assigned group and can be dragged around the canvas, triggering the physics simulation to recalculate positions. Implemented with D3.js functions `forceSimulation`, `forceLink`, `forceManyBody`, `forceCenter`, and `drag`, the graph also supports zooming and panning via a `d3Zoom` handler, while node labels appear on hover. The SVG rendering displays nodes and links in full-screen, with node positions updated on each simulation tick.

KKhanin Sisaengsuwanchai
86% match
Loading thumbnail…

Force-Directed Graph

A force-directed graph visualizes the co-occurrence of characters in Victor Hugo’s *Les Misérables*, rendered as nodes and links on a Canvas. Using D3 v4’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, the layout iteratively positions nodes based on link forces. The animation updates on each tick, clearing the canvas and redrawing edges and nodes as gray lines and white-stroked circles. Data comes from the bundled `miserables.json` file.

Mmbostock
85% match