[Media] Rust + WASM real‑time rendering in the browser using Charton

Charton (a rust visualization crate based on Grammar of Graphics) now has WASM support — build browser‑native interactive charts in Rust, no JS plotting libraries required.

This demo runs a real‑time color‑gradient scatter plot in the browser. Every frame is a fresh SVG computed by Rust/WASM (~20–25 FPS), simulating a sensor sampling signal intensity over time.

Core Rust (lib.rs):

#[wasm_bindgen]
pub fn draw_wave(xs: Vec<f64>, ys: Vec<f64>, colors: Vec<f64>) -> Result<String, JsValue> {
    let ds = Dataset::new()
        .with_column("x", xs)?
        .with_column("y", ys)?
        .with_column("Intensity", colors)?;

    let chart = Chart::build(ds)?
        .mark_point()?
        .encode((alt::x("x"), alt::y("y"), alt::color("Intensity")))?
        .with_size(800, 400);

    Ok(chart.to_svg()?)
}

Core JS (index.html):

import init, { draw_wave } from './pkg/wave.js';

async function run() {
    await init();
    const container = document.getElementById('chart');
    let xs = [], ys = [], t = 0;

    function loop() {
        ys.push(Math.sin(t * 0.3) + (Math.random() - 0.5) * 0.2);
        xs.push(t++);
        if (xs.length > 200) { xs.shift(); ys.shift(); }
        container.innerHTML = draw_wave(xs, ys, [...ys]);
        requestAnimationFrame(loop);
    }
    loop();
}
run();

Build with wasm-pack build --release --target web, serve with any HTTP server, and you’re good to go.