d3-force testing ground

100%

d3-force testing ground

✓ Published0🌍 Public

Last edited Aug 26, 2017

Created on Aug 26, 2017

This interactive demo provides a testing ground for adjusting the forces in a force-directed graph layout. Using the `d3.forceSimulation` API, it visualizes the connections of the classic *Les Misérables* character co-occurrence network, rendered as SVG nodes and links. A control panel allows the user to enable or disable and tune parameters for individual forces, including `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, `d3.forceCenter`, and directional pull forces, with an alpha bar to monitor simulation activity.

AI-generated description

This demo lets you interactively try various settings and combinations of forces for d3-force.

It's based on Mike Bostock's example code for a force directed graph.

forked from <a href='http://bl.ocks.org/steveharoz/'>steveharoz</a>'s block: <a href='http://bl.ocks.org/steveharoz/8c3e2524079a8c440df60c1ab72b5d03'>d3-force testing ground</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

d3-force testing ground

This interactive demo lets users tweak the forces behind a d3-force simulation in real time. It displays a force-directed graph of the Les Misérables character network, with nodes and links rendered as SVG circles and lines. Using sliders and checkboxes, one can adjust parameters for center, charge, collide, forceX, and forceY forces, which are applied via `d3.forceSimulation` and its associated `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, `d3.forceCenter` functions. The simulation updates the node positions after each tick.

AAjayyy

94% match

Loading thumbnail…

d3-force testing ground

This interactive demo lets users experiment with the various forces available in d3-force by adjusting sliders and toggles. It visualizes a network of characters from *Les Misérables* as SVG circles and lines, using `d3.forceSimulation` with configurable `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, `d3.forceCenter`, `d3.forceX`, and `d3.forceY` forces. Users tweak parameters like charge strength, collision radius, and link distance to see how each force shapes the layout, with node size and stroke reflecting current settings. Dragging nodes pauses and resumes the simulation via `d3.drag()`.

FFrissAnalytics

94% match

Loading thumbnail…

d3-force testing ground

FFrissAnalytics

94% match

Loading thumbnail…

d3-force

A force-directed graph visualizes character interactions from Les Misérables, with 410 nodes colored by group and 410 weighted links. Users can drag individual nodes and zoom the SVG canvas. The implementation uses `d3.forceSimulation`, `forceLink`, `forceManyBody`, `forceCenter`, `d3.zoom`, and `d3.drag`, with node colors derived from `schemeCategory10` and data loaded from a TSV file.

Ttoeric

82% match

Loading thumbnail…

D3 Force Simulation

A force-directed network of 100 nodes and 300 randomly generated links settles into a stable layout under a centering force, many-body repulsion, link distance constraints, and collision avoidance. The visualization uses D3 v4's `d3.forceSimulation` with `d3.forceCenter`, `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCollide` to animate the physics, while nodes are draggable via D3's drag interaction. The simulation updates an SVG canvas on each tick, redrawing lines and circles as positions change. The random data is generated programmatically, creating an abstract, interactive demonstration of force-based layout.

CCarlosACalvo

82% match

Loading thumbnail…

D3 Force Simulation

A force-directed network layout visualizes 100 nodes and 300 random links, rendered as circles and lines in an SVG canvas. The example uses D3 v4’s `d3.forceSimulation` with `forceCenter`, `forceManyBody`, `forceLink`, and `forceCollide` forces to compute positions. Nodes are draggable via `d3.drag`, which updates fixed positions (`fx`, `fy`) during interaction. The animation updates node coordinates and link endpoints on each simulation tick.

CCarlosACalvo

81% match

Loading thumbnail…

D3 Force Simulation

This example shows a force-directed network layout of 100 nodes and 300 randomly generated links, rendered as circles and lines in an SVG canvas. The visualization uses `d3.forceSimulation` with three forces: `d3.forceCenter` to pull nodes toward the middle, `d3.forceManyBody` with negative strength for repulsion, and `d3.forceLink` to maintain a 50-pixel link distance. The simulation runs continuously via a `tick` event, updating node positions and link coordinates each frame. Nodes are interactive through `d3.drag()`, allowing users to manually reposition them while the simulation responds.

TTamayoValencia

81% match

Loading thumbnail…

Force Graph Test

This example illustrates a force-directed graph that visualizes simple connections among leaders and locations, with data defined directly in the `data.js` file. The visualization uses the `d3.forceSimulation` API to run a physics-based layout, combining `forceManyBody` for repulsion, `forceLink` for attraction between connected nodes, and `forceCenter` to keep the elements centered. The SVG output displays green circles for each node and black lines for each link, with labels added via `select` and `append` methods. The simulation updates the positions of these elements on each tick, offering an interactive, dynamic view of the relationships.

PPhilHarrigan

81% match