aprender-viz 0.31.1

SIMD/GPU/WASM-accelerated visualization library for data science and ML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

# WebAssembly

Trueno-viz compiles to WebAssembly for browser-based visualization with
near-native performance.

## Building for WASM

```toml
[dependencies]
trueno-viz = { version = "0.1", features = ["wasm"] }
```

Build:

```bash
wasm-pack build --target web
```

## JavaScript Integration

```javascript
import init, { create_scatter_plot, render_to_canvas } from './trueno_viz.js';

async function main() {
    await init();

    const x = new Float32Array([1, 2, 3, 4, 5]);
    const y = new Float32Array([2, 4, 1, 5, 3]);

    const plot = create_scatter_plot(x, y);
    render_to_canvas(plot, 'myCanvas', 800, 600);
}

main();
```

## Canvas Rendering

```html
<canvas id="myCanvas" width="800" height="600"></canvas>
<script type="module">
    import init, { ScatterPlot } from './trueno_viz.js';

    async function render() {
        await init();

        const plot = new ScatterPlot()
            .x([1, 2, 3, 4, 5])
            .y([2, 4, 1, 5, 3])
            .color('#4285f4')
            .title('My Plot');

        plot.render_to_canvas('myCanvas');
    }

    render();
</script>
```

## ImageData Output

For manual canvas manipulation:

```javascript
const imageData = plot.render_to_image_data(800, 600);
ctx.putImageData(imageData, 0, 0);
```

## SVG Output in Browser

```javascript
const svgString = plot.render_to_svg(800, 600);
document.getElementById('container').innerHTML = svgString;
```

## SIMD in WASM

WebAssembly SIMD is auto-detected:

```rust
#[cfg(target_arch = "wasm32")]
{
    use trueno_viz::accel;

    if accel::wasm_simd_available() {
        println!("WASM SIMD128 enabled");
    }
}
```

## Bundle Size

Typical bundle sizes:

| Configuration | Size (gzipped) |
|---------------|----------------|
| Minimal | ~150 KB |
| With all plots | ~300 KB |
| With GPU (WebGPU) | ~500 KB |

## Performance

WASM performance is typically 60-80% of native:

```text
Scatter plot (10k points):
  Native:  12ms
  WASM:    18ms

Heatmap (500x500):
  Native:  45ms
  WASM:    65ms
```

## Complete Example

```html
<!DOCTYPE html>
<html>
<head>
    <title>Trueno-Viz WASM Demo</title>
</head>
<body>
    <canvas id="plot" width="800" height="600"></canvas>
    <script type="module">
        import init, { LineChart } from './trueno_viz.js';

        async function main() {
            await init();

            // Generate sine wave
            const x = Array.from({length: 100}, (_, i) => i * 0.1);
            const y = x.map(v => Math.sin(v));

            const chart = new LineChart()
                .x(new Float32Array(x))
                .y(new Float32Array(y))
                .color('#4285f4')
                .title('Sine Wave')
                .build();

            chart.render_to_canvas('plot');
        }

        main();
    </script>
</body>
</html>
```

## Next Chapter

Continue to [Aprender Integration](../integration/aprender.md) for ML pipeline visualization.