Public
Edited
Jul 3, 2023
8 forks
5 stars
Insert cell
Insert cell
Insert cell
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)}
})
Insert cell
update = chart.update(order)
Insert cell
data = FileAttachment("alphabet.csv").csv({typed: true})
Insert cell
Insert cell
Insert cell
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)));
}
Insert cell

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.
Learn more