Public
Edited
Sep 23, 2023
2 stars
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
myPlot = {
let plot = Plot.plot({
marks: [
Plot.barY(alphabet, {
x: "letter",
y: "frequency",
sort: { x: "y", reverse: true }
}),
Plot.ruleY([0])
]
});
return plot;
}
updateMyPlot = {
replay;
const selection = d3.select(myPlot).select("g[aria-label='bar']");
const colors = d3.quantize(
d3.interpolateHcl(randomColor(), randomColor()),
alphabet.length
);
selection
.selectAll("rect")
.data(updateData(alphabet))
.join("rect")
.transition()
.duration(750)
.attr("y", (d) => y(d.frequency))
.attr("height", (d) => y(0) - y(d.frequency))
.style("fill", (d, i) => colors[i]);
}
function randomColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return `rgb(${r}, ${g}, ${b})`;
}
yScale = myPlot.scale("y")
y = d3
.scaleLinear()
.domain(yScale.domain)
.range(yScale.range)
.interpolate(yScale.interpolate)
.clamp(yScale.clamp)
function updateData(data) {
return data.map((d) => ({ ...d, frequency: Math.random() * 0.1 }));
}
updateData(alphabet)
alphabet
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.
