Skip to main content
SimilarExport ZIP
100%

d3-force testing ground

✓ Published0🌍 Public
FFrissAnalytics
Last edited Oct 4, 2018
Created on Apr 25, 2017

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()`.

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 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
100% 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
85% 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
84% 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
84% 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
84% 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
83% 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
83% match
Loading thumbnail…

d3-force

A force-directed graph rendered in SVG displays 410 nodes and 1,217 links from the Les Misérables character co-occurrence dataset. Nodes are colored by group using `d3.schemeCategory10`, based on the number of links each character has. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to compute layout, while `d3.drag` enables node repositioning and `d3.zoom` supports panning and scaling. Link width reflects connection weight.

Eerin1234567
82% match