{
await vg.coordinator().exec(
vg.loadObjects('kpis', [
{ date: 1, visits: 5, clicks: 3 },
{ date: 2, visits: 10, clicks: 5 },
{ date: 3, visits: 17, clicks: 4 }
])
);
const globalSelection = vg.Selection.single();
const xOptions = ['date', 'visits', 'clicks'].map(d => ({label: d, value: vg.column(d)}));
const $x = vg.Param.value(xOptions[0].value); // value is explicitly a column
const color = vg.Param.value('steelblue');
return vg.vconcat(
vg.hconcat(
vg.menu({ label: "X-axis", as: $x, options: xOptions })
),
vg.plot(
vg.lineY(vg.from('kpis', { filterBy: globalSelection }), {
y: vg.sql`${$x}`, // dynamic SQL expression provides column dependency logic
y: 'clicks',
stroke: color // works directly as params are treated as scalar values
})
));
}
// import vgplot and configure Mosaic to use DuckDB-WASM
vg = {
const vg = await import('https://cdn.jsdelivr.net/npm/@uwdata/vgplot@0.5.0/+esm');
vg.coordinator().databaseConnector(vg.wasmConnector());
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.
