Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published1🌍 Public
CCO18323
Last edited May 5, 2020
Created on May 5, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example shows 100 unlabeled circular nodes clustering into four groups through a force-directed layout. The nodes are pushed in different directions based on their index, creating a visual separation of categories while the simulation runs. The visualization uses the D3.js v3 force layout with custom tick logic to apply directional forces, and renders the nodes as SVG circles with categorical colors from `d3.scale.category10()`. Clicking the background applies random jitter to all nodes and resumes the force simulation, while dragging individual nodes is supported via `force.drag`. A fade-in transition animates the SVG’s opacity on load.

YYashasvi Koul
91% 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
87% match
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
87% 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
86% match
Loading thumbnail…

Untitled

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.

JJeet Jain
85% 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
85% match
Loading thumbnail…

Untitled

A force-directed network graph renders a small set of linked nodes as green circles connected by gray lines. The visualization uses D3.js v4 with a React-compatible setup, loading JSON data from an external GitHub source. The `d3.forceSimulation` API applies link, charge, and centering forces to position nodes, while a `ticked` callback updates SVG line and circle coordinates on each simulation tick. Circle offsets of +6/-6 pixels shift node positions slightly from their computed force locations, and all elements are drawn inside an SVG container with defined margins.

FFrancesco Deaglio
85% match
Loading thumbnail…

Untitled

This visualization generates a dense packing of animated circles that grow from the center of an SVG canvas. Using a quadtree data structure to optimize collision detection, the algorithm iteratively places new circles in the largest available gaps, gradually increasing the number of candidate positions per circle. The code uses `d3.quadtree()` for spatial indexing and SVG `circle` elements with `transition()` animations to scale each circle's radius from zero. The process continues for 25,000 circles, with fill opacity randomly varied between 50% and 100%, creating an organically growing, space-filling composition.

Ppoppy
85% match