Published
Edited
May 21, 2020
13 stars
Line-Sweep Ambient Occlusion with WebGPUSpring TrainingLine Sweep Ambient Occlusion in JavaScriptLine Sweep Terrain LightingSpeed Climbing World Record ProgressionWebGPU ShaderHydraulic Erosion SimulationHow Does Mapbox Raster Colorization Work?Arc Length of a Quadratic Bézier SplineMagnetic PendulumTracing Lamb Wave Modes in the Complex PlaneMissing Fundamental IllusionSliced Optimal TransportLine Integral ConvolutionShanks TransformationUeda's AttractorCubic basis vs. Hermite interpolationBicubic Texture Interpolation using Linear FilteringFactor-of-Two Lanczos Image ResamplingRendering the Aperiodic Monotileeqn [WIP]SDF Points with reglKnocking Down the Gates with our Friend JacobiFast Generalized Winding Numbers in 2DHTML+CSS Periodic Three-Body OrbitsClifford and de Jong AttractorsStrange Attractors on the GPU, Part 1: ImplementationStrange Attractors on the GPU, Part 2: Fun!Lawson's Klein BottleInteractive Multi-scale Turing PatternsComputing π with the Bailey-Borwein-Plouffe FormulaThe Double Pendulum MapMalkus WaterwheelRegister Allocation and the k-Coloring ProblemMultiscale Turing Patterns in WebGLSelecting the Right Opacity for 2D Point CloudsKuramoto-Sivashinsky Equation in 2DAdaptive Contouring in Fragment ShadersComplex function plotterGPU Voronoi Diagrams using the Jump Flooding AlgorithmBaker's MapHello, g9Dispersion in Water Surface WavesFake Transparency for 3D SurfacesUniformly Distributed Points on a SphereGPU BoidsDomain Coloring for Complex FunctionsDrawing indexed mesh data as screen-space normals without duplicating dataFinding Roots in the Complex PlanePeriodic Planar Three-Body Orbits2D (Non-physical) N-body Gravity with Poisson's EquationHalf-Precision Floating-Point, VisualizedIntegers in Single-Precision Floating-PointDomain Coloring with Adaptive ContouringInstanced WebGL CirclesDouble Compound Pendulums3D Reaction-DiffusionMathematical Easter Egg ColoringToiletpaperfullerenes and Charmin Nanotubes
Grouping Points with Principal Component Analysis
Also listed in…
Math
axes = Eigen.ensure(invalidation, () => {
// `ensure` is a small memory management wrapper that cleans up resource
// allocated on the wasm heap (e.g. Matrixf in the return values) when
// this cell is invalidated.
// Accumulate the centroid:
let xc = 0;
let yc = 0;
// Components of cross-covariance matrix A
let A00 = 0;
let A10 = 0;
let A11 = 0;
// Iterate over points
let xi, yi;
for (let i = 0; i < n; i++) {
xi = x.get(i, 0);
yi = x.get(i, 1);
// Accumulate the centroid
xc += xi;
yc += yi;
// Sum moments
// NOTE: Don't do this! You should compute the centroid in one pass,
// then sum, e.g. (xi - xc) * (yi - yc) *relative to the centroid* in
// order to prevent catastrophic cancellation below.
A00 += xi * xi;
A10 += xi * yi;
A11 += yi * yi;
}
// Divide to get the centroid
xc /= n;
yc /= n;
// Unshift the cross-covariance by the centroid using the parallel axis theorem
// This may cause unnecessary catastrophic cancellation if the centroid is not
// right at the origin!
A00 = A00 / n - xc * xc;
A10 = A10 / n - yc * xc;
A11 = A11 / n - yc * yc;
return {
centroid: Matrixf.fromArray([xc, yc], [1, 2]),
covariance: Matrixf.fromArray([A00, A10, A10, A11], [2, 2])
};
})
eig = Eigen.ensure(invalidation, () => {
const eig = axes.covariance.selfAdjointEigenSolver(Eigen.ComputeEigenvectors);
const vals = eig.eigenvalues();
const vecs = eig.eigenvectors();
// Compute indices which sort the eigenvalues e.g. [1, 0] if they are reversed,
// and not to be confused with sorted eigenvalues themselves.
const eigOrder = argsort(Array.apply(null, vals.buffer));
// Return sorted eigenvalues and eigenvectors.
return {
vals: vals.map((i, j, val) => vals.get(eigOrder[i], j)),
vecs: vecs.map((i, j, val) => vecs.get(eigOrder[i], j))
};
})
viewof axisProjection = Eigen.ensure(invalidation, () =>
x
.sub(Matrixf.ones([n, 1]).mul(axes.centroid))
.mul(Matrixf.fromCol(eig.vecs.col(1)))
.show('(x - x_c) \\cdot v')
)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
