100%

Kohonen SOM

✓ Published0🌍 Public

Last edited Mar 4, 2017

Created on Mar 4, 2017

This visualization demonstrates a Kohonen self-organizing map (SOM) training on 500 random 3D data points, projecting them onto a grid of 144 hexagon neurons. The animation shows the neurons and data points transitioning over 4 seconds as the map converges, with colors assigned using the d3.cubehelix color space. Built with d3.js and the seracio/kohonen library, it uses the `kohonen.hexagonHelper.generateGrid()` function to create the hexagonal lattice and animates the training process via `transition().duration(4000)` on both the neuron colors and data point positions.

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>

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/70dccbad91ffcf253387645fadb94614'>Kohonen / SOM with 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

93% match

Loading thumbnail…

Kohonen SOM

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.

PPhilippe Rivière

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

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

87% match

Loading thumbnail…

Generating hex grid positions

This example visualizes the positions of a hex grid using an animated scatter plot. As the mouse moves across the screen, the number of points generated increases, creating a growing cluster of colored circles. The code computes cube coordinates and maps them to screen positions using a custom `toScreen` function, while an animation loop and the `requestAnimationFrame` API continuously add or remove circles based on mouse distance. The SVG circles are colored by their cube coordinate values, and the D3.js v4 library manages selection, insertion, and removal of the points.

TThanaporn-sk

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

63% match

Loading thumbnail…

Rotated hexbin

Two thousand randomly generated points orbit in a circular drift while a rotating hexbin grid displays their changing local density. The hexagons are rotated 90 degrees and the x and y coordinates are swapped relative to the original implementation. The visualization uses d3.v3 with the d3.hexbin plugin, SVG paths, and a d3.timer to update the hexagon colors and positions as points are replaced each frame.

TThanaporn-sk

62% match