100%

Kohonen SOM

✓ Published0🌍 Public

Last edited Sep 6, 2016

Created on Sep 6, 2016

A self-organizing map (SOM) trains a 12×12 hexagonal grid of neurons to organize 500 random three-dimensional data points, visualized as colored circles that cluster according to the HSL color space. The animation shows data points initially scattered randomly, then transitioning toward their matched neurons as the Kohonen algorithm runs over 500 steps. Built with d3.js and the seracio/kohonen library, the SVG rendering uses d3.transition to smoothly move circles as neuron positions update.

AI-generated description

Creating a self-organizing map (SOM)

First tentative.

Made by Philippe Rivière with <a href="https://d3js.org/">d3.js</a> and <a href="https://github.com/seracio/kohonen">seracio/kohonen</a>.

Same maths, differents color spaces:

<a href='http://bl.ocks.org/Fil/70dccbad91ffcf253387645fadb94614'>d3.cubehelix()</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Kohonen SOM

A Kohonen self-organizing map trains a 12×12 hexagonal grid of neurons on 500 random RGB data points, then animates both the neurons and the mapped data points into a clustered arrangement. The visualization uses d3.js for SVG rendering and transitions, with the kohonen library handling the neural network training. Each neuron’s color is derived from its weight vector via a cubehelix color space, while the data points, initially scattered randomly, smoothly transition to their nearest matching neurons over a four-second animation, revealing how the SOM organizes high-dimensional input into a low-dimensional topological layout.

PPhilippe Rivière

96% match

Loading thumbnail…

Kohonen SOM

A self-organizing map arranges random points in 3D color space onto a hexagonal grid, with each grid cell colored via d3.lab. The animation shows 500 data points and 144 neuron positions transitioning as the kohonen library trains the network. Built with d3.js and the seracio/kohonen library, the example uses SVG circles with fill-opacity transitions to reveal the mapping process.

PPhilippe Rivière

96% match

Loading thumbnail…

Kohonen SOM

Fil demonstrates a self-organizing map (SOM) as an animated SVG using d3.js and the kohonen library. The visualization initializes a grid of neurons and 500 random RGB data points, then runs a training phase where neurons migrate to fit the data, with each neuron filled according to its learned color value. The code transitions the neurons' fills and positions over four seconds, while the data points are scattered around their nearest matching neurons. Alternative color spaces—rgb, hsl, lab, and cubehelix—are linked for comparison.

PPhilippe Rivière

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

64% match

Loading thumbnail…

t-SNE Voronoi

A t-SNE Voronoi diagram visualizes 200 random four-dimensional colors projected into two dimensions in real time. Each point is rendered as a polygon according to its Voronoi cell, colored by its RGB values and with opacity derived from its fourth dimension, while a grey line chart displays the algorithm's cost per iteration. The t-SNE computation runs in a JavaScript worker using science.ai's TSNE implementation, and the visualization is rendered with d3.v4's d3.voronoi, d3.area, d3.scaleLinear, and d3.timer APIs. The SVG output animates as points converge, with polygons updating their shape each frame.

PPhilippe Rivière

63% match

Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel

63% match

Loading thumbnail…

Animated Voronoï map

This example demonstrates an animated Voronoï map that self-organizes over time, showing both live iterative updates and a static final arrangement. The visualization uses the d3-voronoi-map plugin (v2) to compute weighted Voronoï diagrams on a circular clipping polygon, with each iteration rendered on canvas. Users can toggle between drawing the Voronoï cells, their weights as circles, or both, and choose among greyscale, radial rainbow, or conical rainbow backgrounds. The code relies on d3.v5 and the d3-weighted-voronoi plugin, with user interactions handled through HTML radio buttons and checkboxes.

KKcnarf

62% match

Loading thumbnail…

hexagon clip + blend

A grid of kitten images, each clipped to a hexagon shape, is arranged in a staggered pattern across the canvas. The images are layered with semi-transparent circles in pink, blue, and green, all using CSS screen blend modes to create overlapping color effects. The visualization is built with D3 v4, using SVG elements such as `clipPath` and `polygon` for the hexagonal clipping, and `append` with `.classed` to apply the clip. The code also references `d3.select` and `d3.scaleOrdinal` for color schemes, though the images come from external placeholder URLs.

PPatrick Wojda

61% match