Clusters

K-means clustering of wine data

This visualization demonstrates the results of K-means clustering on the wine dataset, plotting each sample as a dot based on its Alcohol and Malic attributes, with colors indicating cluster membership. The code uses D3.js v3 to render an SVG scatterplot, employing d3.scale.linear for axes, d3.svg.axis for tick marks, and d3.scale.category20 for coloring clusters. Mouseover events trigger a tooltip showing cluster, Alcohol, and Malic values. Data comes from the clusters.csv file, which includes precomputed cluster assignments.

JJverma

Scatter Plot with Menus

This interactive scatter plot animates k-means clustering on synthetic data, using buttons to step through iterations, restart, or reset the algorithm. Menus let the viewer select x- and y-axis columns from the loaded Auto MPG dataset. The visualization uses D3 v5 with SVG rendering, applying `transition.attr` for animated circle movement, `axisBottom` and `axisLeft` for axes, and custom `dropdownMenu` and `scatterPlot` modules to manage clustering groups and redraws.

ZZhi Guangda

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

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

Cluster Dendrogram II

This cluster dendrogram visualizes a hierarchical dataset from a flare.json file, displaying nodes as circles connected by curved links. The layout uses d3.layout.cluster to position nodes, with SVG paths generated using cubic Bézier curves to create distinctive non-intersecting links. Node styling includes white circles with steelblue strokes and text labels, while the entire chart renders at a fixed 960 by 2200 pixel size within an SVG container.

Mmbostock

Scatterplot Tour

An animated tour of a three-cluster scatterplot cycles through zoomed-in views of each cluster’s bounding box before returning to the full overview. The visualization uses d3.zoom transitions to animate between predefined transforms, rendering points as zero-length SVG strokes with round caps for performance. Data is generated randomly with d3.randomNormal, and cluster colors are assigned via d3.scaleOrdinal with d3.schemeCategory10.

FFilmonM

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, with menus for selecting the x- and y-axis columns. It also demonstrates k-means clustering through step, restart, and reset buttons that animate the clustering process. The visualization uses D3 v5 for rendering, relying on scaleLinear, axisLeft, and axisBottom for axes, and SVG transitions to animate the movement of circles between positions. The implementation shows clusters being computed and drawn dynamically, with each point's group assignment changing the fill color as the algorithm progresses.

ZZhi Guangda

Scatter Plot with Menus

ZZhi Guangda