d3-force testing ground

100%

d3-force testing ground

✓ Published0🌍 Public

Last edited Feb 19, 2018

Created on Feb 19, 2018

This interactive tool lets users experiment with d3-force simulation settings, adjusting forces like center, charge, collide, forceX/Y, and link properties through sliders and checkboxes. It renders a force-directed graph of the Les Misérables character co-occurrence dataset, with draggable labeled nodes and links in SVG. The simulation restarts with each parameter change, updating node positions in real time and visually indicating charge strength via node stroke color and width.

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/lorenzopub/'>lorenzopub</a>'s block: <a href='http://bl.ocks.org/lorenzopub/9ce8ab464e826086a62b785bb296dd17'>d3-force testing ground</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

d3-force testing ground

This interactive tool demonstrates how different settings for d3-force forces affect a force-directed graph’s layout. Users adjust parameters for charge, collide, link distance, center, and forceX/forceY through sliders and checkboxes, with the visualization updating in real time. The graph, based on the Les Misérables character co-occurrence dataset, renders as SVG circles and lines using d3.forceSimulation, d3.forceManyBody, d3.forceCollide, and d3.forceLink. Node positions update on each simulation tick, and drag interaction lets users manually reposition nodes.

Aajayjayayy

94% match

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

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

92% match

Loading thumbnail…

d3-force testing ground

FFrissAnalytics

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

89% 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…

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

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