Untitled

100%

✓ Published0🌍 Public

Last edited Aug 13, 2019

Created on Aug 13, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

86% match

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

78% match

Loading thumbnail…

Untitled

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.

CCO18323

77% match

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

74% match

Loading thumbnail…

Fork of K means clustering

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.

Ssmeiljoe

74% match

Loading thumbnail…

Untitled

This interactive scatter plot displays three clusters of points, colored by category, and allows users to brush a region to zoom into that area. The visualization uses D3 v4 to generate data from a normal distribution, render SVG circles, and implement brushing with `d3.brush`. Axes are drawn with `d3.axisTop` and `d3.axisRight`, and zoom animations are handled via `svg.transition()`. The code also references a `data.csv` file with population figures, though the chart itself visualizes synthetic points.

Pprincit

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

72% match

Loading thumbnail…

Untitled

This example visualizes eye-tracking data across multiple city images, plotting fixation points on a scatterplot with a timeline slider for temporal exploration. Users can select stimuli via a dropdown menu and apply K-means clustering with adjustable cluster counts and iteration limits. The visualization uses D3 v5 for SVG rendering and animation, with React for structure, dynamically scaling axes to each image’s resolution from a CSV file.

JJiapengFan

71% match