Public
Edited
Mar 31, 2024
Importers
26 stars
DruidJS workerNatural breaksWord Tour: 40k words and their friendsHead/tail breaksHello, kmeans-engineHello, jsgeoda!n-dimensions binning?Ternary binningHello, Reorder.jsGeometric MedianUMAP SleepwalkDisc TransportHello, AutoencoderCumulative binningPlateau detectionSpherical smallest-circle problemFrida Kahlo’s paletteMean shift clustering with flatbushMean shift clusteringMean shift clustering with kd-treeManhattan Voronoi IIH3 odditiesProtein MatrixUMAP-o-MaticUMAP in A-FrameUMAP of temperatures in Minneapolis/Saint-PaulUMAP Simple TopologiesUMAP & a personalized distance functiont-SNE VoronoiTravelling salesperson approximation with t-SNEtsne.js & workertsne.jsHello tfjs-tsneTravelling salesperson approximation on the globe, with UMAP-jsUMAP-js, worker versionHello UMAP (via Algorithmia)MNIST & UMAP-jsHello UMAP-js
Self-Organizing Maps meet Delaunay
dimensions = ["r", "g", "b"]
randomDatum = () =>
Object.fromEntries(dimensions.map(d => [d, Math.random() * 255]))
data = Array.from({ length: 3000 }, randomDatum)
distance = (a, b) => Math.hypot(...dimensions.map(d => a[d] - b[d]))
neurons = Array.from({ length: 308 }, randomDatum, replay)
positions = neurons.map(randomPoint) // see implementation below
voronoi = d3.Delaunay.from(positions).voronoi([0, 0, width, height])
// Any function or generator that lists the neighbors of a node is good to use
// see https://observablehq.com/@d3/voronoi-neighbors
neighbors = i => voronoi.neighbors(i)
bmu = d => d3.leastIndex(neurons, u => distance(u, d))
learning_rate = .1
function step(i) {
const d = data[i];
// find the BMU and update it
const u = bmu(d);
update_neuron(u, d, learning_rate);
// update its neighbors too, more gently
for (const n of neighbors(u)) update_neuron(n, d, .25 * learning_rate);
return u;
}
function update_neuron(u, d, alpha) {
const a = neurons[u];
for (const i of dimensions) a[i] += alpha * (d[i] - a[i]);
}
function* run() {
const t = 1 / 200, // sampling for change%
target = 0.05; // target change%
let change = 1,
i = 0;
do {
// select a data point to update
const n = i++ % data.length;
const u = step(n);
// log the number of unhappy data points
change = (change + t * (u !== bmus[n])) / (1 + t);
bmus[n] = u;
// draw this step (progressive time)
if (Math.sqrt(i) % 1 === 0) {
draw();
yield `step ${i}, change rate: ${(change * 100).toFixed(1)}%`;
}
// stop when less than 5% of the recently examined data points are unhappy
} while (change > target && i < 100000);
draw();
yield `stopped after ${i} steps, change: ${(change * 100).toFixed(1)}%`;
}
randomPoint = {
const positions = [...pick2d(width + 30, height, neurons.length, topology)];
return (_, i) => [
positions[i % positions.length][0],
positions[i % positions.length][1] + Math.random()
];
}
bmus = (neurons, Int32Array.from(data).fill(-1))
mutable replay = -1 // ensure neurons, positions, bmus are reset
(show, draw()) // redraw the map when the color selector is clicked
height = 600
import { pick2d } from "@fil/2d-point-distributions"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.