Force move 400 dots in 10 buildings

100%

Force move 400 dots in 10 buildings

✓ Published0🌍 Public

Last edited Oct 2, 2016

Created on Sep 29, 2016

Four hundred colored dots, each assigned to one of ten randomly placed building centers, are drawn on a Canvas as they converge into ten distinct clusters. A custom force named `shape` pulls each node toward its building’s center, while `d3.forceCollide` keeps the circles from overlapping. The simulation runs via `d3.forceSimulation`, with each tick redrawing the canvas using `fillStyle` and `arc` calls. The color scale `d3.scaleOrdinal` with `schemeCategory10` distinguishes the groups by building.

AI-generated description

This example uses d3.forceCollide to prevent circles from overlapping.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/31ce330646fa8bcb7289ff3b97aab3f5'>Collision Detection</a>

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/69f1d5f68099bf6350ed42aed0941e5c'>Collision Detection in a tight square</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Expand and fill force (work in progress)

Five hundred colored circles cluster in a cloud, then slowly diffuse outward as a force simulation seeks lower-density regions. The visualization uses custom forces within d3.forceSimulation, including a grid force and a hexbin-based expand force that samples random hexagon rotations and pushes nodes toward emptier neighboring bins. Rendered on Canvas, the circles respond to mouse movement, with the first node pinned to the cursor and the simulation restarting on interaction. The code employs d3.hexbin to compute density weights and d3.forceCollide to prevent overlaps.

PPhilippe Rivière

82% match

Loading thumbnail…

d3-force-cluster and d3-force-attract

Two hundred circles, shaded by cluster with a sequential rainbow scale, are positioned by a force simulation that combines `d3.forceAttract` to pull nodes toward the screen center and `d3.forceCluster` to group them into ten distinct clusters. The layout uses `d3.forceSimulation` with a custom `d3.forceCollide` whose strength ramps up over three seconds for a smooth transition. Each node is an SVG circle, rendered with `d3.drag` for interactive repositioning, while the tick handler updates the `cx`, `cy`, and `r` attributes. The data is generated randomly, with radii varying by cluster, and the example runs in the browser using D3 v4 and the `d3-force-attract` and `d3-force-cluster` plugins.

AAlainRo

80% match

Loading thumbnail…

Dots

A force-directed simulation scatters and repels 300 small circles within a square field, with each new dot entering at the center and easing outward through an animated radius transition. The code uses the `d3.layout.force` API for physics, appends `circle` elements to an SVG canvas, and triggers a `transition` with a `Math.sqrt` easing function. Data points are generated procedurally with random offsets, and the simulation stops once the node count exceeds 300.

Mmbostock

80% match

Loading thumbnail…

Clustered Force Layout 4.0

This example shows a force-directed layout with 200 circles organized into 10 distinct clusters, each rendered in a different color from the `d3.schemeCategory20` palette. The circles are separated into their groups by the `clustering` custom force, while the `collide` function, which uses a quadtree, prevents overlap both within and between clusters. The visualization is built with D3 v4, uses the `d3.forceSimulation` API for physics, and renders via SVG. The `ticked` callback updates each circle’s `cx` and `cy` attributes as the simulation runs.

AAjayyy

79% match

Loading thumbnail…

Collision Detection

A thousand circles of random radii are arranged into a tidy cluster, with d3.forceCollide preventing any overlap between them while d3.forceX and d3.forceY gently pull the whole group toward the center. The simulation runs on a fixed 960×960 canvas, where each tick clears the drawing and renders all circles as filled and stroked arcs. The code uses d3.forceSimulation with a velocity decay of 0.2, and draws the result directly via the Canvas 2D API.

Mmbostock

78% match

Loading thumbnail…

Custom Force Manipulation

This example demonstrates a custom force-directed simulation where 250 nodes, grouped into five color-coded types, repel each other and are pulled toward the center while colliding and settling into a stable clustered layout. Using d3.forceSimulation with configurable forces for charge, x/y centering, and collision, the nodes animate in SVG as the simulation ticks. The rendering includes touch interaction support, allowing users to place temporary circular touch zones on the canvas that subtly pull nearby nodes toward them through the tick handler’s custom logic.

MMTClass

78% match

Loading thumbnail…

Collision Detection in a tight square

A thousand colored circles of varying radii bounce and slide within a square boundary, colliding and repelling to avoid overlap. The simulation uses d3.forceSimulation with a custom force function that pushes nodes away from the square’s edges, while d3.forceCollide handles circle-to-circle collisions. The Canvas API renders each circle with a distinct fill from the d3.schemeCategory10 palette, and the white strokes emphasize boundaries during the continuous tick updates.

PPhilippe Rivière

78% match

Loading thumbnail…

Cluster Force Layout IV

This example shows 200 circles grouped into 10 color-coded clusters, with node positions initialized using the d3.layout.pack circle-packing layout and then animated into a clustered force layout via d3.layout.force. The simulation applies a custom cluster function to pull same-color nodes together and a collide function using d3.geom.quadtree to resolve overlaps. Circles enter with a staggered radius transition via attrTween, and the force tick updates SVG circle positions. The data is generated randomly, with radii derived from a log distribution and clusters defined by a categorical color scale.

Mmbostock

77% match