knn

100%

✓ Published0🌍 Public

Last edited Mar 11, 2016

Created on Mar 11, 2016

This interactive visualization shows a k-nearest neighbors (k-NN) decision boundary on a 2D scatterplot. Users can generate random labeled points, click to add their own, and adjust the zoom by dragging axis ticks. After specifying a number of neighbors, clicking “Find Decision Boundary” draws a steelblue contour line separating the classified regions, based on the current point distribution. The implementation uses D3 v3 with SVG rendering, custom mouse-drag interactions for axis scaling, and jQuery for input handling. The boundary is computed and drawn dynamically as the underlying points or zoom level changes.

AI-generated description

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

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

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

63% match

Loading thumbnail…

D3 voronoi interaction

This example demonstrates how Voronoi diagrams improve hover interaction on a scatterplot by partitioning the chart area into cells around 50 randomly generated points. Clicking the chart reveals the Voronoi overlay, while moving the mouse highlights the nearest data point with a colored ring and displays its properties in a text output. The implementation uses D3 v4’s `d3.voronoi` layout with the `find()` method to locate the closest site, alongside `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for scales and axes. Points and axes are rendered as SVG elements within an HTML page.

FFrissAnalytics

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

62% match

Loading thumbnail…

Scatterplot basic

This example shows an interactive scatterplot of clustered data points, where users can brush a rectangular region to zoom into that area and double-click to zoom back out. As the view changes, the x and y axes smoothly transition to the new domain. Built with D3.js v4, it uses `d3.brush` for selection, `d3.scaleLinear` for axes, and SVG transitions to animate the rescaling of circles. The data comes from a CSV file containing x, y coordinates and cluster labels, with colors assigned via `d3.scaleOrdinal`.

MMNoichl

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

62% match

Loading thumbnail…

D3: Scatterplot!

This interactive scatterplot displays 50 random data points on Cartesian axes, with each circle colored blue or red depending on whether its x-coordinate falls in the left or right half of the plot. Clicking the “Randomize” button generates a fresh dataset and smoothly animates the points, axes, and color updates over two seconds. The visualization is built with D3 3.5.5, using the `d3.scale.linear`, `d3.svg.axis`, and `transition().duration(2000)` APIs, and renders entirely as SVG. The code derives from Scott Murray’s examples, forked from earlier gists by anonymous and jalapic.

MMissHanJ

61% match