Public
Edited
Jun 17
1 star
Insert cell
Insert cell
Insert cell
data = olympians
Insert cell
chart = Plot.plot({
height: 140,
marks: [
Plot.rectY(data, Plot.binX({y: "count"}, {x: "weight"})),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
x = chart.scale("x")
Insert cell
y = chart.scale("y")
Insert cell
Insert cell
rects = [...chart.querySelectorAll('[aria-label="rect"] rect')]
Insert cell
{
const rx = +rects[10].getAttribute("x");
const rw = +rects[10].getAttribute("width");
const ry = +rects[10].getAttribute("y");
return {
x1: x.invert(rx),
x2: x.invert(rx + rw),
inferredCount: y.invert(ry)
};
}
Insert cell
Insert cell
data.filter(d => d.weight >= 50 && d.weight < 52)
Insert cell
Insert cell
inferredBins = rects.map((rect) => {
const rx = +rect.getAttribute("x");
const rw = +rect.getAttribute("width");
const ry = +rect.getAttribute("y");
return {
x1: Math.round(x.invert(rx)),
x2: Math.round(x.invert(rx + rw)),
inferredCount: Math.round(y.invert(ry))
};
})
Insert cell
Insert cell
Insert cell
Insert cell
chart1 = Plot.plot({
height: 140,
marks: [
Plot.rectY(data, Plot.binX({y: "count"}, {x: "height"})),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart2 = Plot.plot({
height: 140,
marks: [
Plot.rectY(data, Plot.binX({y: "count"}, {x: "height", render: extractData})),
Plot.ruleY([0])
]
})
Insert cell
function extractData(index, scales, values, dimensions, context, next) {
const { channels } = values;
mutable extractedBins = [];
for (const i of index) {
mutable extractedBins.push({
x1: channels.x1.value[i],
x2: channels.x2.value[i],
count: channels.y2.value[i]
});
mutable extractedBins = mutable extractedBins;
}
return next(index, scales, values, dimensions, context);
}
Insert cell
Insert cell
mutable extractedBins = []
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
bin = d3.bin().thresholds(d3.thresholdScott).value(d => d.height);
Insert cell
bins = bin(data)
Insert cell
chart3 = Plot.plot({
height: 140,
marks: [
Plot.rectY(bins, {x1: "x0", x2: "x1", y: d => d.length, inset: 0.5}),
Plot.ruleY([0])
]
})
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