The end-to-end solution for building and hosting better data apps, dashboards, and reports.
chart = Plot.barY(alphabet, {
x: "letter",
y: "frequency",
fill: "steelblue",
mixBlendMode: "multiply",
// This render transform adds an update() function on the chart.
render: (index, scales, values, dimensions, context, next) => {
const {x} = scales;
const X = x.domain();
const y0 = dimensions.height - dimensions.marginBottom; // vertical position of the y-axis
const bars = next(index, scales, values, dimensions, context);
const svg = context.ownerSVGElement;
// When called with a reordered domain, the update function transitions the
// bars (and the axis ticks!) to their new positions.
svg.update = (domain) => {
x.domain(domain);
const t = d3.transition().duration(750);
d3.select(bars)
.selectAll("rect")
.transition(t)
.attr("x", (i) => x(X[i]));
d3.select(svg)
.selectAll("[aria-label^='x-axis tick']>*")
.transition(t)
.attr("transform", (i) => `translate(${x(X[i])},${y0})`);
};
return bars;
}
}).plot({
// Ensure that bars and axis ticks are parallel.
x: {domain: alphabet.map(d => d.letter)}
})
update = chart.update(order)
data = FileAttachment("alphabet.csv").csv({typed: true})
trigger = {
const input = viewof order.input;
const interval = d3.interval(() => {
input.selectedIndex = (input.selectedIndex + 1) % input.length;
input.dispatchEvent(new Event("input", {bubbles: true}));
}, 4000);
const clear = () => interval.stop();
input.addEventListener("change", clear, {once: true});
invalidation.then(() => (clear(), input.removeEventListener("change", clear)));
}
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.
