100%

Kohonen SOM

✓ Published0🌍 Public

Last edited Sep 6, 2016

Created on Sep 5, 2016

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.

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

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

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

92% match

Loading thumbnail…

Rotating Voronoi in colors

Dozens of colored points orbit along concentric circular paths, while the Voronoi cells surrounding them are resampled and smoothed into curved, lens-like shapes that continuously rotate and morph. The animation is rendered as an SVG, with each cell’s fill and stroke sampled from a two-color linear scale. The code uses d3.geom.voronoi to compute cells, a basis-closed line interpolator for curvature, and d3.timer to drive the point motion and redraw the paths.

PPhilippe Rivière

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

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

65% match

Loading thumbnail…

Voronoi binning (animated)

Four thousand random points are colored by size, with the largest ten percent becoming Voronoi sites. The animation cycles through stages: it sorts points by size, uses the top ten percent as sites for d3.voronoi, then assigns every point the color of its site’s cell via the customized `diagram.find()` method. Points and cells fade, recolor, and reset every nine seconds using d3.interval and transitions.

PPhilippe Rivière

63% match

Loading thumbnail…

t-SNE, a force, and voronoi

A t-SNE projection of 300 random five-dimensional points is rendered as a Voronoi diagram, with each cell colored by the point's RGB values and opacity. A d3.forceSimulation combines a custom force that follows the t-SNE coordinates with forceCollide to separate overlapping centers, updating the Voronoi polygons on each tick. The computation runs asynchronously in a Web Worker using the tsne-js library.

PPhilippe Rivière

63% match