values = [0.3, 1, 2, 3, 4, 5, 6, 7, 8, 9]
viewof existing = {
await vg.coordinator().exec(`CREATE TABLE IF NOT EXISTS data AS
SELECT UNNEST([${values.map(String).join(",")}])::DOUBLE AS value`);
const makePlot = column => vg.plot(
vg.rectY(
vg.from("data"),
{ x: vg.bin(column, {steps: values.length, nice: true}), y: vg.count(), fill: "steelblue", inset: 0.5 }
),
vg.xDomain([0, 11]),
vg.xTicks(Array.from({ length: values.length + 1 }).map((_, i) => i)),
vg.width(600),
vg.height(200)
);
return makePlot("value");
}
// import vgplot and configure Mosaic to use DuckDB-WASM
vg = {
const vg = await import('https://cdn.jsdelivr.net/npm/@uwdata/vgplot@0.16.2/+esm');
const wasm = await vg.wasmConnector();
vg.coordinator().databaseConnector(wasm);
return vg;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
