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)));
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.