cybernetic.dev

Data-centric UI experiments

Evolving byproducts of learning Svelte

Helix

Helical visualization of OHLC data


Tech stack
Svelte.js, Three.js
Data source
Kraken REST API
Render target
DOM, Canvas (WebGL)
View Experiment

Matrix

Computes and visualizes correlation coefficients and confidence intervals

WASM temporarily disabled


Tech stack
Svelte.js, Rust, WASM
Data source
Simulated
Render target
DOM
View Experiment

Graph

Computes and visualizes correlation networks


Tech stack
Svelte.js, Cytoscape.js
Data source
Kraken REST API
Render target
DOM, Canvas
View Experiment
   Asset
Price
Change %
Change
Best Bid
Best Ask
Spread
Volume
Volume USD
24H Low/High
Amount
Total
Allocation %
01 
AAVE
585.4000000 +13.03 +67.4700000 585.4000000 585.8400000 0.4400000 65,716.66 34,036,630.81
461.51
621.44
0 0
02 
ADA
1.7194320 -3.40 -0.0605680 1.7194320 1.7207270 0.0012950 58,254,495.75 103,693,002.44
1.500000
1.800000
0 0
03 
BCH
1,319.1200000 -14.09 -216.3900000 1,319.1200000 1,319.5800000 0.4600000 31,493.86 48,359,129.92
1,140.01
1,547.91
0 0
04 
BTC
50,806.8000000 -11.07 -6,325.1000000 50,801.9000000 50,806.8000000 4.9000000 13,617.89 778,015,830.65
45,000.0
57,245.1
0 0
05 
DOGE
0.4301943 -16.33 -0.0839726 0.4301943 0.4305262 0.0003319 458,288,072.43 235,636,557.51
0.3510000
0.5420000
0 0
06 
DOT
40.1707000 +1.20 +0.4753000 40.1707000 40.1747000 0.0040000 2,089,908.94 82,959,771.16
32.5466
42.4500
0 0
07 
EOS
11.1023000 -16.65 -2.2184000 11.1023000 11.1097000 0.0074000 4,413,978.71 58,797,286.24
9.6933
14.0859
0 0
08 
ETC
91.3710000 -17.84 -19.8450000 91.3710000 91.4550000 0.0840000 313,594.12 34,876,683.82
81.000
111.598
0 0
09 
ETH
3,964.7100000 -7.99 -344.2100000 3,967.0000000 3,967.4600000 0.4600000 197,232.03 849,857,041.81
3,521.00
4,380.00
0 0
10 
LINK
44.0190400 -9.31 -4.5174100 44.0008200 44.0190400 0.0182200 797,985.16 38,731,366.99
38.51320
48.77079
0 0
11 
LTC
327.0400000 -14.55 -55.6700000 327.0400000 327.1400000 0.1000000 188,869.27 72,282,156.61
296.66
386.56
0 0
12 
XRP
1.3635500 -8.51 -0.1268600 1.3633000 1.3635500 0.0002500 67,377,738.95 100,420,455.91
1.20000
1.49539
0 0

Table

Crypto market screener and portfolio tracker combined in one table


Tech stack
Svelte.js
Data source
Kraken WebSockets API
Render target
DOM
View Experiment

Mesh

Visualizes synchronized order book spread for multiple markets in 3d space

GPU-intensive
Tech stack
Svelte.js, Three.js
Data source
Kraken WebSockets API
Render target
DOM, Canvas (WebGL)
View Experiment

Dense

An experiment in UI density adaptation and customization


Tech stack
Svelte.js
Data source
Kraken WebSockets API
Render target
DOM
View Experiment
ADA/BTC
561
5.612e-5
5.612 x 10-5
0.000056120
GRT/BTC
206
2.055e-5
2.055 x 10-5
0.000020550
SC/BTC
411
4.114e-7
4.114 x 10-7
0.0000004114
XMR/BTC
942
9.424e-3
9.424 x 10-3
0.009424

Chunk

Chunked number representation concept


Tech stack
Svelte.js
Data source
Kraken WebSockets API
Render target
DOM
View Experiment
BTC/USD | ticker
<
>
x
No IntersectionObserver support.
AAVE/USD | ticker
<
>
x
No IntersectionObserver support.

Boards

Tests the performance of Svelte.js in rendering fast crypto market data


Tech stack
Svelte.js
Data source
Kraken WebSockets API
Render target
DOM
View Experiment