chart = Plot.barY(alphabet, {
x: "letter",
y: "frequency",
fill: "steelblue",
mixBlendMode: "multiply",
render: (index, scales, values, dimensions, context, next) => {
const {x} = scales;
const X = x.domain();
const y0 = dimensions.height - dimensions.marginBottom;
const bars = next(index, scales, values, dimensions, context);
const svg = context.ownerSVGElement;
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({
x: {domain: alphabet.map(d => d.letter)}
})