👨💻 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)}));
data = FileAttachment("athletes.parquet")
pq.readParquet(new Uint8Array(await data.arrayBuffer()))
pq = {
const pq = await import("https://unpkg.com/parquet-wasm@0.1.1/web.js");
// default seems to need to resolve first?
await pq.default();
return pq;
}
athletes = FileAttachment("athletes.parquet")
viewof regression = {
await vg
.coordinator()
.exec([
vg.loadObjects("athletes", FileAttachment("athletes.parquet").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.
