Fork of K means clustering

100%

Fork of K means clustering

✓ Published0🌍 Public

Last edited Apr 27, 2021

Created on Apr 27, 2021

This example demonstrates the k-means clustering algorithm on a small dataset of ten points loaded from a CSV file. Two initial centroids are randomly placed, and the animation iteratively assigns each point to the nearest centroid using Euclidean distance, updates cluster centers by computing their mean, and recolors the points accordingly over ten iterations. The SVG chart, rendered with D3 v6, uses `d3.csv` to load the data and `transition().delay()` to animate the movement of circles and centroids, with a label displaying the current iteration.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

K means clustering

This example shows the k-means clustering algorithm in action, animating the iterative process of grouping a small set of points from `data.csv` into three clusters. Initially, three randomly placed centroids are drawn, and each iteration assigns points to the nearest centroid using Euclidean distance, then moves the centroids to the cluster mean. The visualization uses D3 v6’s selection and `transition` methods to animate the points and centroids, with the centroid styled distinctly via a black stroke. The iteration count is displayed as text, and the animation stops after ten iterations.

Kkaviya-ds

87% match

Loading thumbnail…

KMeans clustering

This example demonstrates KMeans clustering on a small dataset of six points loaded from a CSV file. It shows how points are iteratively assigned to one of three clusters, with colored hulls drawn around each group and centroids recalculated until a local minimum cost is reached. The visualization uses D3.js v4 with a React framework, rendering SVG circles and polygon hulls with animated transitions. The code employs `d3.csv`, `d3.polygonHull`, `d3.scaleLinear`, and `d3.interval` to animate the clustering process, displaying the iteration count in the final state.

NNaveenaS12

80% match

Loading thumbnail…

Untitled

This interactive example demonstrates the k-means clustering algorithm on a one-dimensional dataset of ten random points. Users click an "Iteration Step" button to advance the algorithm, which reassigns each point to its nearest centroid and recalculates centroid positions. The visualization uses D3 v7 with an SVG rendering, where points are colored by cluster assignment (blue, green, orange) and larger gray-stroked circles represent centroids. The code employs d3.scaleLinear to map data values to x-coordinates, and point assignment uses absolute distance calculations to update cluster memberships.

Ssz2036

79% match

Loading thumbnail…

K Means

This visualization demonstrates k-means clustering on EEG data, showing how four centroids iteratively partition points into clusters based on their F3 and P4 channel values. The animation runs for ten iterations, updating cluster assignments and recalculating centroid positions with each step. The code uses d3.csv to load the dataset, d3.schemeCategory10 for cluster colors, d3.mean for computing cluster centers, and D3 transitions to animate point movements and color changes. A setInterval drives the iterative process, while text elements display the current iteration number.

HHariprashanth75

75% match

Loading thumbnail…

Untitled

This animation demonstrates the k-means clustering algorithm in action, showing how a set of random points are iteratively grouped into clusters and how cluster centers move toward the mean of their assigned points. Users can click the SVG or press buttons to step through the algorithm, restart, or reset with new parameters. The visualization uses D3.js selections, transitions, and SVG elements like circles, lines, and cross-shaped paths to render the data. Interactive controls allow adjusting the number of points and clusters before initialization.

ZZhi Guangda

74% match

Loading thumbnail…

K-Means as a force

A thousand colored circles of varying sizes drift on a canvas, continuously regrouping into distinct clusters as they move. The example runs a K-Means clustering algorithm inside a d3.forceSimulation loop, with each tick reassigning every node to its nearest of 20 cluster centers and then moving those centers toward their group’s barycenter. Rendered using Canvas 2D, the visualization combines force-based collision detection and positioning forces with the clustering logic, displaying the emergent dynamic partitioning of the dataset in real time.

PPhilippe Rivière

74% match

Loading thumbnail…

K-Means clustering of Tweets

This example visualizes the results of K-Means clustering on tweets, grouping them into ten thematic clusters displayed as a circle-packing layout. The visualization shows each cluster as a collection of orange leaf nodes representing individual tweets, with blue parent circles indicating cluster boundaries. Hovering over a node reveals the tweet text in a tooltip. The code uses the D3.js v3 layout `d3.layout.pack` to compute the hierarchical layout and binds data loaded from a tab-separated text file containing tweet text and cluster assignments. The visualization is rendered as SVG with animated transitions.

JJverma

71% match

Loading thumbnail…

Visualization

This interactive scatter plot displays the Davies-Bouldin index (y-axis) against the number of clusters k (x-axis) for K-means clustering results on citation data from philosophy journals. It visualizes how clustering quality changes from 2 to 10 clusters, showing a minimum at k=7. The visualization uses D3 v3 with `d3.scale.linear`, `d3.svg.axis`, and `d3.scale.category20`, rendering circles in SVG. A button switches the x-axis to a different (unused) data column, while the underlying data comes from a CSV file loaded via `d3.csv`, with tooltips via the d3-tip library and zoom/pan through `d3.behavior.zoom`.

MMNoichl

70% match