Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published1🌍 Public
JJeet Jain
Last edited Jul 5, 2020
Created on Jul 5, 2020
Forked from HTML Starter

A force-directed layout uses a d3.geom.quadtree for collision detection among 200 circles of varying radii, with a fixed root node at the center. The root’s position follows the mouse via an SVG mousemove event, causing the simulation to resume and repel other nodes. Circles are rendered as SVG elements with colors from d3.scale.category10, and d3.layout.force manages gravity and charge between nodes.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A force-directed layout uses D3's `d3.layout.force` to simulate repulsive and attractive forces among 200 circles, each with a random radius between 4 and 16 pixels. The root node is fixed at the center with a negative charge, pulling all other circles toward it while collision detection via `d3.geom.quadtree` keeps them from overlapping. As the simulation ticks, circle positions update in an SVG canvas, and users can drag the root node by moving the mouse, which resumes the force simulation to re-layout the surrounding nodes dynamically.

Aansnejib2468
94% match
Loading thumbnail…

Untitled

This example shows a force-directed layout of 200 colored circles that repel each other and collide as they move. Dragging the mouse moves a fixed root node, pulling the surrounding circles toward the cursor. The visualization uses D3 v3’s `d3.layout.force` with custom gravity and charge functions, and a quadtree via `d3.geom.quadtree` to efficiently handle collision detection between circles. Each circle’s radius is randomly assigned, and its fill color comes from a categorical scale (`d3.scale.category10`). The rendering is done in SVG, with positions updated on each tick event.

Tthanhtrant219
91% match
Loading thumbnail…

Untitled

A force-directed particle system in SVG uses D3 v3’s `d3.layout.force` to simulate 200 circles with random radii, while a fixed center node applies a strong negative charge to repel others. A quadtree (`d3.geom.quadtree`) accelerates collision detection, and the layout’s `on("tick")` event updates circle positions. Mouse movement drives the root node’s velocity via `d3.mouse`, resuming the simulation. The visualization runs in React, though the rendering logic is pure D3.

Bbasskur
90% match
Loading thumbnail…

Untitled

A force-directed graph of 100 nodes and 100 links arranges itself into a circular structure using d3.forceSimulation with charge, link, X, and Y forces. The layout is pre-computed by running the simulation to completion before rendering, then SVG circles and lines are drawn. The code uses D3 v4's forceSimulation API and React-ready SVG output.

Aadventuresenglish.info@gmail.com
86% match
Loading thumbnail…

Collision Detection

A force-directed layout places 200 circles on an SVG canvas, with a fixed invisible root node at the center of a charge-based repulsion field. Mouse movement repositions this root, causing the surrounding circles to scatter and collide. Using the d3.layout.force simulation, a quadtree indexes nodes for efficient pairwise collision resolution, adjusting circle positions on each tick. The circles, whose radii vary randomly, are colored via d3.scale.category10 and loaded from an external CSV file, while the root’s position tracks the cursor to repel the swarm.

JJdlv00
85% match
Loading thumbnail…

Untitled

A cluster of 100 circles, each colored by one of four categories, moves under a force-directed layout in an animated SVG scene. D3's `d3.layout.force` continuously updates node positions, while a custom tick function applies directional offsets based on node index to separate groups into distinct clusters. Clicking or dragging any circle adds random jitter, causing the clusters to scatter and then re-form. The visualization uses D3 v3 with React, fading the entire SVG in over one second on load.

CCO18323
85% match
Loading thumbnail…

Untitled

An interactive force-directed graph lets users create nodes by clicking, with new nodes automatically linking to any existing nodes within a 30-pixel radius. The visualization uses d3.layout.force for physics simulation, SVG circles for nodes, and lines for links, rendered in a React-free vanilla HTML page with d3.v3. A brown cursor circle tracks the mouse, and nodes are draggable via force.drag.

Ppoppy
83% match
Loading thumbnail…

Untitled

This example shows a force-directed network graph with circular nodes and connecting lines, rendered as an SVG. The visualization loads JSON data from a GitHub gist, positions nodes using a physics simulation, and displays the resulting layout. The code uses d3.forceSimulation, d3.forceLink, d3.forceManyBody, and d3.forceCenter to compute node positions, then updates the SVG circle and line elements during each simulation step.

Aanushaanumula
83% match