👨💻 Modelling consultant
🧮 numbers 📊 actuarial
📈 viz, interactivity, transparency
stringFields = ['sex', 'nationality'].map(d => ({label: d, value: vg.column(d)}));
numFields = ['weight', 'height', 'gold', 'silver'].map(d => ({label: d, value: vg.column(d)}));
viewof regression = {
await vg.coordinator().exec([
vg.loadParquet("athletes", "https://cdn.jsdelivr.net/gh/uwdata/mosaic@main/data/athletes.parquet")
]);
const $query = vg.Selection.intersect();
const $x = vg.Param.value(numFields[0].value);
const $y = vg.Param.value(numFields[1].value);
const $color = vg.Param.value(stringFields[0].value);
return vg.vconcat(
vg.hconcat(
vg.menu({ label: "X-axis", as: $x, options: numFields }),
vg.menu({ label: "Y-axis", as: $y, options: numFields }),
vg.menu({ label: "Color", as: $color, options: stringFields }),
),
vg.plot(
vg.dot(
vg.from("athletes"),
{x: vg.sql`${$x}`, y: vg.sql`${$y}`, fill: vg.sql`${$color}`, r: 2, opacity: 0.05}
),
vg.regressionY(
vg.from("athletes", {filterBy: $query}),
{x: vg.sql`${$x}`, y: vg.sql`${$y}`, stroke: vg.sql`${$color}`}
),
vg.intervalXY({as: $query, brush: {fillOpacity: 0, stroke: "currentColor"}}),
// vg.xyDomain(vg.Fixed),
// vg.colorDomain(vg.Fixed)
)
);
}
// import vgplot and configure Mosaic to use DuckDB-WASM
vg = {
const vg = await import('https://cdn.jsdelivr.net/npm/@uwdata/vgplot@0.7.1/+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.
