Public
Edited
Jan 12, 2024
1 star
Insert cell
Insert cell
import { aq, op } from '@uwdata/arquero'
Insert cell
datasaurus.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
dinosaur = datasaurus.filter(d => d.dataset === "dino")
Insert cell
aq.from(dinosaur).view()
Insert cell
function getSummaryStats(dt) {
return aq.from(dt).rollup({
mean_x: (d) => op.mean(d.x),
mean_y: (d) => op.mean(d.y),
std_x: (d) => op.stdev(d.x),
std_y: (d) => op.stdev(d.y),
corr: (d) => op.corr(d.x, d.y)
}).objects()[0]
}
Insert cell
baseStats = getSummaryStats(dinosaur)
Insert cell
stats = ({
"mean_x": [baseStats.mean_x.toFixed(7).slice(0,5), baseStats.mean_x.toFixed(7).slice(5)],
"mean_y": [baseStats.mean_y.toFixed(7).slice(0,5), baseStats.mean_y.toFixed(7).slice(5)],
"std_x": [baseStats.std_x.toFixed(7).slice(0,5), baseStats.std_x.toFixed(7).slice(5)],
"std_y": [baseStats.std_y.toFixed(7).slice(0,5), baseStats.std_y.toFixed(7).slice(5)],
"corr": [baseStats.corr.toFixed(7).slice(0,5), baseStats.corr.toFixed(7).slice(5)]
})
Insert cell
baseStats.mean_x.toFixed(7).slice(0,5)
Insert cell
addAnimation(
Plot.plot({
height: 250,
width: 360,
y: { nice: 5 },
x: { domain: [0, 100], nice: 5 },
marks: [
Plot.frame({ fill: "#eaeaea" }),
Plot.gridY({ stroke: "white", strokeOpacity: 1 }),
Plot.gridX({ stroke: "white", strokeOpacity: 1 }),
Plot.dot(dinosaur, {
x: "x",
y: "y",
fill: "#404042",
opacity: 0.5,
fillOpacity: 0
})
]
})
)
Insert cell
Plot.plot(
(() => {
const n = 4; // number of facet columns
const keys = Array.from(
d3.union(
datasaurus.filter((d) => d.dataset != "dino").map((d) => d.dataset)
)
);
const index = new Map(keys.map((key, i) => [key, i]));
const fx = (key) => index.get(key) % n;
const fy = (key) => Math.floor(index.get(key) / n);
return {
height: 700,
width: 1150,
marginBottom: 30,
y: { insetTop: 10 },
fx: { padding: 0.05 },
marks: [
Plot.frame({ fill: "#eaeaea" }),
Plot.gridY({ stroke: "white", strokeOpacity: 1 }),
Plot.gridX({ stroke: "white", strokeOpacity: 1 }),
Plot.dot(
datasaurus.filter((d) => d.dataset != "dino"),
{
fill: "#404042",
opacity: 0.5,
fx: (d) => fx(d.dataset),
fy: (d) => fy(d.dataset),
x: "x",
y: "y"
}
),
]
};
})()
)
Insert cell
keys = Array.from(
d3.union(datasaurus.map((d) => d.dataset))
)
Insert cell
datasaurus_grid = keys.map((k) => {
return {
name: k,
data: datasaurus.filter((d) => d.dataset)
};
})
Insert cell
// Function to add an animation to a plot
addAnimation = (
plot,
{ type = "circle", attribute = "fill-opacity", delay = 10, endValue = 1 } = {}
) => {
const wrapper = d3.create("div");
const chart = d3.select(plot);
// Matching the camelCase of plot to the D3 attribute
let attr;
switch (attribute) {
case "fillOpacity":
attr = "fill-opacity";
break;
case "strokeOpacity":
attr = "stroke-opacity";
break;
default:
attr = attribute;
}

const marks = chart.selectAll(type).filter(function () {
return !this.parentNode.classList.contains("tick");
});

marks
.transition()
.duration(500)
.delay((d, i) => i * delay)
.style(attr, endValue);
if (attr === "r") {
marks
.transition()
.duration(300)
.delay((d, i) => i * delay)
.attr(attr, endValue);
}

return chart.node();
}
Insert cell

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.
Learn more