Normalizing Clusters

100%

Normalizing Clusters

✓ Published0🌍 Public

Last edited Oct 25, 2016

Created on Oct 24, 2016

A thousand points generated with d3.randomNormal are grouped into five clusters of nearly equal size, shown as colored lines radiating from each point to its centroid, with numeric labels displaying each cluster’s population. The animation cycles through Lloyd’s algorithm, recentering centroids and trading points between adjacent Voronoi cells—computed via d3.voronoi—until deviation stabilizes or reaches zero. Controls start and stop the iterative process, which runs asynchronously with d3.timeout and transitions.

AI-generated description

This is an attempt at an algorithm that finds clusters of even quantity. It's draws from k-means style clustering and Lloyd's algorithm, but points also get traded among adjacent clusters based on their difference. The 1,000 points are purposely placed unevenly using d3.RandomNormal and the centroids are randomly selected from those points.

The process automatically stops if a cycle's ending deviation equals zero. Otherwise it continues until the ending deviation stays the same for a few cycles, so that it doesn't get caught in an infinite loop.

There is no real significance to the number of clusters, but you can play around with that by opening this in <a href="http://blockbuilder.org/alexmacy/8592b0852145ea2808be88f673a41a55" target="_blank">Blockbuilder</a> and editing the value for k. Keep in mind that the process takes much longer when k gets higher, because it has to iterate through so many more adjacencies.

The idea for this came from wanting to find a way to draw a voronoi diagram on top of random dots in such a way that each polygon would have the same quantity. That first experiment can be found <a href="http://bl.ocks.org/alexmacy/3986db72dc4b81db8e788dd837ee6e3b" target="_blank">here</a>. One next step could be to re-draw the borders for the contiguous United States so that they all have equal populations.

mit Licensed

Similar vizzes

Loading thumbnail…

K-Means Voronoi Relaxation

This interactive visualization uses k-means clustering and Lloyd’s algorithm to relax a Voronoi diagram, normalizing the dispersion of 20,000 random points across 100 polygons. As the animation runs, each polygon’s center moves toward the centroid of its assigned points, equalizing polygon populations over successive steps. The SVG rendering uses D3 v4’s `d3.voronoi` for polygon generation, with color scaling from white to black indicating point density per cell, and text labels showing live counts. Buttons control start, stop, and redraw actions, while deviation statistics update in real time.

Aalexmacy

76% match

Loading thumbnail…

Clustered Force Layout III

This example shows a clustered force layout where 200 circles are grouped into 10 color-coded clusters, with node sizes varying by cluster. D3’s force layout initializes nodes near their cluster’s center on a circular path, then applies custom cluster and collision forces during each tick to converge on a stable arrangement. An entry transition uses `transition.attrTween` to grow circle radii from zero, delaying collision detection to reduce jitter. The visualization is rendered as animated SVG using D3 v3, with data generated randomly via `Math.random` and `d3.scale.category10` for colors.

Mmbostock

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

73% match

Loading thumbnail…

d3-cluster

The example demonstrates d3-cluster, a layout that groups overlapping circles into clusters and highlights the merged boundaries. After rendering 500 randomly positioned circles with varied radii and colors, the code applies the cluster layout, which sorts points by size and detects overlaps to assign each circle to a cluster. The resulting visualization overlays new circles with a distinct orange stroke, where the stroke width reflects the number of overlapping points in each cluster. The implementation uses custom d3-cluster APIs like `.x()`, `.y()`, and `.radius()`, built with d3-scale, while the initial rendering relies on d3 selections and SVG circle elements.

PPhilippe Rivière

73% match

Loading thumbnail…

Clustered Force Layout II

Ten clusters of colored circles drift and separate on a dark background, with each cluster gathering around its largest member while circles avoid overlapping. The visualization uses d3.layout.force with custom cluster and collide forces, leveraging d3.geom.quadtree for collision detection and d3.scale.category10 for colors. Data is procedurally generated in the browser, with 200 circles of varying radii across 10 groups, rendered as SVG elements.

Mmbostock

73% match

Loading thumbnail…

Voronoi binning (animated)

Four thousand random points are colored by size, with the largest ten percent becoming Voronoi sites. The animation cycles through stages: it sorts points by size, uses the top ten percent as sites for d3.voronoi, then assigns every point the color of its site’s cell via the customized `diagram.find()` method. Points and cells fade, recolor, and reset every nine seconds using d3.interval and transitions.

PPhilippe Rivière

72% match

Loading thumbnail…

clusters force

This example shows 300 circular nodes grouped into three distinct clusters, each with its own radial gradient color scheme. The visualization uses a force-directed simulation with `d3.forceSimulation` and a custom cluster force to keep nodes near their group’s center, while `d3.forceCollide` prevents overlap by applying padding based on node radius. The nodes are drawn as SVG circles, with each cluster’s color derived from a linear scale mapped to a radial gradient, creating a smooth visual distinction. The code defines three separate radial gradients and assigns them based on the node’s cluster value, while the custom cluster force adjusts node positions relative to a designated cluster center.

EEfratVil

72% match

Loading thumbnail…

Clustered Force Layout I

This clustered force layout visualizes 200 circles organized into 10 color-coded clusters, with each circle’s size varying by cluster. The d3.v3 force layout uses two custom forces: a cluster force that pulls circles toward the largest node of the same color, and a collide force using d3.geom.quadtree to prevent overlaps. Circle separation differs between same-color and different-color pairs. The SVG rendering updates circle positions on each tick event, with colors assigned via d3.scale.category10.

Mmbostock

72% match