d3-force testing ground

100%

d3-force testing ground

✓ Published0🌍 Public

Last edited Jul 25, 2018

Created on Jul 25, 2018

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.

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>

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

gpl-3.0 Licensed

Similar vizzes

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

97% match

Loading thumbnail…

d3-force testing ground

FFrissAnalytics

97% match

Loading thumbnail…

d3-force testing ground

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.

TThanaporn-sk

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

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

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

83% match

Loading thumbnail…

Untitled

This interactive network visualization displays the character relationships from Les Misérables, with nodes representing individuals and links showing their connections. Users can adjust force simulation parameters through control panels, including charge strength, collision radius, link distance, and X/Y gravity forces. The graph renders as SVG circles and lines using D3 v4's force simulation APIs (d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCollide, d3.forceCenter). Node dragging and tooltips are implemented with d3.drag, while the simulation alpha value is visualized as a dynamic progress bar.

Nnoe-d

82% match

Loading thumbnail…

D3 Force Simulation

A force-directed network visualization shows 100 nodes and 300 random links in a 400-by-400 SVG canvas. The layout uses D3 v4’s `d3.forceSimulation` with `forceCenter`, `forceManyBody`, `forceLink`, and `forceCollide` to position and repel elements. Nodes render as steelblue circles, links as gray lines, and drag behavior lets users reposition nodes through `d3.drag`. The simulation updates node and link coordinates on every tick via the `ticked` function.

CCarlosACalvo

82% match