HomeRendering & Computer Graphicst-SNE Interactive Visualization

🧪 t-SNE Interactive Visualization

Watch the real t-SNE algorithm project a synthetic high-dimensional dataset into 2D: Gaussian-kernel similarities, perplexity-based bandwidth search and gradient descent on the actual KL-divergence objective, live.

Rendering & Computer Graphics2DModerate60 FPS
data-science-data-visualization-simulation ↗ Open standalone

t-Distributed Stochastic Neighbor Embedding (t-SNE) is the standard technique for turning a high-dimensional dataset into a 2D picture a human can actually read. This simulation generates a synthetic dataset of points sampled from several separated Gaussian blobs in a 4–20 dimensional space, then runs the real t-SNE optimization: it computes Gaussian-kernel conditional probabilities between every pair of points in the original space (with per-point bandwidth chosen by binary search to hit a target perplexity), turns those into symmetric joint probabilities, initializes a random 2D layout, and repeatedly follows the exact gradient of the Kullback–Leibler divergence between the high-dimensional probabilities and a Student-t-distributed low-dimensional approximation. Watch the scattered initial layout resolve into distinct, separated clusters as the KL divergence readout falls, and use the perplexity slider to see how the size of the neighbourhood t-SNE considers "local" changes the shape of the resulting map.

⚙ Under the hood

Explore how t-SNE maps high-dimensional clusters into 2D space by computing Gaussian-kernel probabilities and optimizing KL-divergence with binary-search perplexity and gradient descent. Real-time visualization shows cluster separation as iterations reduce divergence.

tsnekl-divergencegradient-descenthigh-dimensional-reductiondata-visualizationmachine-learningdimensionality-reduction

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)