Svelte Correlation Matrix
This is an experimental project to explore what's possible in terms of browser-based data visualization and analysis with Svelte 5 and its signals-based reactivity system.
Cryptocurrencies tend to be highly correlated, making their correlations an ideal candidate for a correlation matrix. Meme coins represent a trivialization of the crypto space and are therefore excluded. The correlation matrix created here with Svelte visualizes a large amount of data, currently up to:
- Crypto Markets
- 353
- Matrix Height (px)
- 11,296
- Matrix Width (px)
- 22,592
- Correlations
- 62,128
- Matrix Cells
- 125,315
- Data Points
- 129,551
- Correlated Data Points
- 22,800,976
To put these numbers in context, a 1920×1080px screen would only be able to display 0.81% of the entire correlation matrix at once, while a 3840×2160px screen would be able to display 3.25%. Additionally, all statistical computations — time series detrending, correlation coefficient computation, hierarchical clustering — are performed on the client.
To maintain optimal performance given the amount of data and client-side statistical computations, the project uses:
- A 2D windowing/virtualization approach to dynamically render only visible matrix cells to the DOM, significantly reducing the DOM size
- The CSS
containproperty to restrict layout, style, paint and size recalculations to specific DOM subtrees - Svelte's
$state.raw()rune for managing large objects and arrays, avoiding the overhead associated with$state()-induced proxification
As recommended by the Svelte documentation, the $effect() rune is used as little as
possible. Instead, an event-driven approach is used. If the $effect() rune is used
at all, e.g. for drawing on the chart's <canvas> element, untrack() is
used with explicit dependency declarations for maximum control.
Semantic HTML is used wherever possible, and all input elements are browser-native and mostly
only customized with the CSS accent-color property.
If you have any questions, feel free to reach out.