Enhanced Data
Immersive data visualization experiments powered by Three.js + Svelte + SvelteKit.
Experiment #1: Helix
Inspired by the concept of a time spiral, OHLC data is mapped onto a helix with an adjustable pitch. Going beyond 2D candlestick charts, the 3rd dimension is used to encode trading volume in candle thickness.
Experiment #2: Table
The combined scrollbar / minimap here is particularly cool.
Combines a market screener and a portfolio tracker in a simple, unified design. The data distribution of the sorted column is visualized to provide an extended context for the current position in the dataset.
Experiment #4: Grid
Fits as much data on a screen as possible, while allowing in-depth control of data density to ensure legibility. Pagination is used only when absolutely necessary.
Changing the density-relevant settings Decimals, Group Digits, Min Font Size, Min x-Padding, Min y-Padding does not always lead to a change in UI density, since it is determined by all parameters jointly or, as in the case of Min Font Size, Min x-Padding, Min y-Padding, is already realized since these are minimum values.
See ⮂ Also
⭐ Shaders 101 Brad Woods The pipeline that transforms three.js code to pixels looks like this:
- three.js JavaScript code is executed on the CPU
- Shader code is executed on the GPU
- Pixels are rendered on the screen
A shader has two parts, a vertex and fragment shader. They work like this:
- Each vertex runs through the vertex shader to get its viewport space position.
- Primitives are converted into fragments. Fragments are data corresponding to a potential pixel.
- Each fragment runs through the fragment shader to get its color.