Home▸AI & Machine Learning▸PCA and Dimensionality Reduction: Finding the Directions That Matter

🧭 PCA and Dimensionality Reduction: Finding the Directions That Matter

A live 3D PCA lab: watch Three.js compute the principal axes of a correlated data cloud in real time, then drag the dimensionality slider to see points collapse onto the top components.

AI & Machine Learning3DAdvanced60 FPS

A correlated 3D data cloud with its principal axes computed live in the browser via eigendecomposition of the covariance matrix, letting you drag a slider and watch every point collapse onto a lower-dimensional summary.

🔬 What It Demonstrates

PCA rotates the data onto new, uncorrelated axes ranked by how much variance each one explains. Keeping only the top axes gives the best possible lower-dimensional approximation of the data in a least-squares sense.

🎮 How to Use

Choose how many components to keep, then drag the reduction blend slider to morph points from their true position onto that subspace. Adjust axis correlation and variance flatness to see how the principal axes and the variance they capture change.

💡 Did You Know?

Points that turn brighter rose as you increase the blend are the ones losing the most information — their true position sits farthest from the kept subspace, which is exactly the quantity PCA minimizes in aggregate.

⚙ Under the hood

A live 3D PCA lab: watch Three.js compute the principal axes of a correlated data cloud in real time, then drag the dimensionality slider to see points collapse onto the top components.

pcadimensionality reductionprincipal componentsdata analysismachine learningalgorithmsThree.js

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install