Public
Edited
Apr 3, 2024
Insert cell
Insert cell
Insert cell
Plot.plot({
y: { grid: true },
color: { legend: true },
marks: [
Plot.rectY(data, Plot.binX({ y: "count" }, { x: "flipper_length_mm" })),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
bin1 = d3.bin()
Insert cell
Insert cell
bin1(data.map((d) => d.flipper_length_mm))
Insert cell
Insert cell
Insert cell
mark = Plot.rectY(data, Plot.binX({ y: "count" }, { x: "flipper_length_mm" }))
Insert cell
Insert cell
mark.plot()
Insert cell
Insert cell
// A global var reflecting the values intercepted
mutable innerValues = null
Insert cell
histInternal = (data) => {
const mark = Plot.rectY(
data,
Plot.binX({ y: "count" }, { x: "flipper_length_mm" })
);

// Intercepting the `mark.render` method
const _render = mark.render;
mark.render = function (index, scales, values) {
mutable innerValues = values;
console.log(values);
return _render.apply(this, arguments);
};

return mark.plot();
}
Insert cell
histInternal(data)
Insert cell
Insert cell
data = FileAttachment("penguins.csv").csv({typed: true})
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