BlitZoom Demos

Standalone pages exercising specific BlitZoom features and integration patterns. Each demo is self-contained — open in a browser, no build step.

Embedding examples

Minimal example

Two graphs side by side: one loaded from SNAP files via createBlitZoomView, one built from inline JS objects via createBlitZoomFromGraph. The smallest possible embedding.

<bz-graph> web component

Declarative HTML examples: graphs paired with <bz-compass> for radial controls, <bz-controls> for slider panels, and inline JSON via <script type="application/json">.

Bundle smoke test test

Loads the minified single-file dist/blitzoom.bundle.js and exercises <bz-graph>, inline JSON, WebGL, WebGPU, and the programmatic createBlitZoomView API from one bundle import.

API and feature demos

Incremental API: Gaussian vs Norm

Side-by-side comparison of quantMode: 'gaussian' and quantMode: 'norm' as nodes are added in batches via addNodes. Watch how Gaussian shifts existing nodes while Norm keeps them stable.

Synthetic data demos

All Unicode characters

Empty <bz-graph incremental> populated by streaming all ~150 000 assigned Unicode codepoints in batches. Layout reorganizes by major category and block, revealing the script structure of the standard.

Numbers 2..200,000 by arithmetic

Streams every natural number up to 200K with properties derived from a smallest-prime-factor sieve: prime/semiprime/composite, distinct-prime-factor count, divisor count, last digit, largest prime factor. Primes form rays; smooth-number bands and last-digit classes separate visibly.

Every possible 8-base DNA sequence (4⁸ = 65 536), each annotated with GC content, palindromicity, longest homopolymer run, and restriction-enzyme membership (EcoRI, BamHI, NotI, …). Layout clusters by GC band; palindromic and enzyme-cut k-mers form distinct subsets.

A 64×64×64 sample of the RGB cube — 262 144 colors — with hue/saturation/lightness derived per node and a 12-name color family classification. The layout reorganizes the cube by perceptual color similarity instead of by axis order.

Rendering / compute comparisons

Canvas 2D vs WebGL test

Same datasets rendered side by side using Canvas 2D and WebGL2. Verifies that both renderers produce visually equivalent results across grid, edges, heatmap, and circle layers.

CPU vs GPU compute test

Same datasets projected and blended on CPU (float64) and GPU (float32 via WebGPU compute) side by side. Cluster structure matches; small precision differences may shift rank quantization sort order for tightly packed nodes.