Published unlisted
Edited
Sep 14, 2021
function domainY(data, { x, y, transform, reverse = true, top } = {}) {
if (transform) transform(data, [d3.range(data.length)]);
const X = x.transform ? x.transform() : x;
const Y = y.transform ? y.transform() : y;
const I = d3.range(X.length);
let Z = d3.sort(I, (i) => Y[i]).map((i) => X[i]);
if (reverse) Z.reverse();
if (top) Z = Z.slice(0, top);
return Z;
}
Plot.plot({
y: {
grid: true
},
x: {
domain: domainY(letters, {
...Plot.groupX({ y: "count" }),
top: 10
})
},
marks: [Plot.barY(letters, Plot.groupX({ y: "count" })), Plot.ruleY([0])]
})
cheekyHistogram(letters, { top: 10 }).plot({
marks: [Plot.tickY([100], { stroke: "red" })],
y: { grid: true }
})
function cheekyHistogram(data, { reduce = "count", top, ...options } = {}) {
const A = Plot.barY(data, Plot.groupX({ y: reduce }, options));
A._plot = A.plot;
A.plot = function (opts) {
return this._plot({
x: {
domain: domainY(data, {
...Plot.groupX({ y: reduce }, options),
top
})
},
...opts
});
};
return A;
}
Plot.plot({
y: {
grid: true
},
x: {
domain: d3
.groupSort(
letters,
(v) => v.length,
(d) => d
)
.reverse()
.slice(0, 10)
},
marks: [Plot.barY(letters, Plot.groupX({ y: "count" })), Plot.ruleY([0])]
})
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.
