Single Axis Force Layout

100%

Single Axis Force Layout

✓ Published0🌍 Public

Last edited Jan 22, 2018

Created on Jan 22, 2018

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.

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. In addition, the simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value.

If desired, you could refine this technique by also fixing nodes on mouseover, and releasing them on mouseout. (However, if there’s an active drag gesture during mouseout, you wouldn’t want to release the node until the gesture finishes.)

Compare to the Canvas version.

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>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Single Axis Force Layout

This example shows a force-directed graph of character co-occurrences in Victor Hugo’s *Les Misérables*, constrained to a single horizontal axis. The nodes are rendered as small circles and links as gray lines, using D3 v4’s force simulation with d3-drag for interactivity. When a node is dragged, it becomes fixed to the pointer and the simulation’s alpha target is temporarily increased to heat up the layout; releasing the node lets it settle back. The distinctive single-axis effect is achieved by resetting every node’s y-coordinate to a fixed value (200) on each tick, so all movement occurs along the x-axis only. Dragging can still move a node vertically, but it springs back to the shared baseline. This example uses SVG and the miserables dataset.

Aakollegger

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

92% match

Loading thumbnail…

Radial Force Layout

This example shows a force-directed graph of the characters from *Les Misérables*, arranged in a circular layout by a radial force. Nodes are rendered as small circles and linked by gray lines, with each node carrying a title tooltip showing its name. The simulation uses d3-force’s radial force to pull nodes toward a center point at (200, 200), combined with a collision force to prevent overlaps. Using d3-drag, any node can be grabbed and moved; the dragged node is fixed to the pointer during the gesture and released when the gesture ends. The simulation is temporarily reheated during dragging by raising the alpha target, making the layout react fluidly to the user’s interaction before settling back into place.

Aakollegger

90% match

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

88% match

Loading thumbnail…

Force Dragging III

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.

Mmbostock

87% match

Loading thumbnail…

(d3v4) Force Layout w highlights

This example shows a force-directed network graph of character interactions from *Les Misérables*, rendered as SVG nodes and links. Hovering over a node or link highlights its connections by fading unrelated elements, while a tooltip displays names, groups, and link strength. Dragging nodes repositions them, and double-clicking releases them from the fixed position. The visualization uses d3.forceSimulation with link, charge, and center forces, plus d3.drag for interaction and d3.schemeSet3 for coloring nodes by group.

FFrissAnalytics

87% match

Loading thumbnail…

Force Directed Graph - Simple

This example shows a simple force-directed graph with a small dataset of character relationships from Les Misérables, rendered as SVG circles in D3 v5. Each node is a character, colored by group using `d3.scaleOrdinal` with `d3.schemePaired`, and hover text reveals the character’s id. The layout is driven by `d3.forceSimulation` with link, charge, and center forces, while nodes are draggable via `d3.drag`. The data is loaded from a CSV file using `d3.csv` with `d3.autoType`, and the code also builds a hierarchy from flat data using `d3.rollup` and `d3.hierarchy`, though links are not displayed.

JJimMaltby

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

86% match