Today I added animation to the rect and text elements. With the bars, I used d3.easeLinear with a duration of 1000:
const bars = bounds
.selectAll("rect")
.data(sortedData)
.join("rect")
.attr("x", xScale(0))
.attr("y", (d, i) => yScale(i))
.attr("height", yScale.bandwidth())
.attr("width", 0)
.transition()
.duration(1000)
.ease(d3.easeLinear)
.attr("width", d => xScale(d.number) - xScale(0))
.attr("height", yScale.bandwidth())
.attr("class", "rect")
For the bar values to appear, I just changed the opacity from zero to one, and had a slower duration of 3000 to allow the bars to shift into place first. There's probably a way to do this staged, but this way will do for now:
const text = bounds
.selectAll("text")
.data(sortedData)
.join("text")
.attr("x", d => xScale(d.number))
.attr("y", (d, i) => yScale(i) + yScale.bandwidth() / 2)
.attr("dy", "0.35em")
.attr("dx", -30)
.attr("class", "bar_label")
.text(d => format(d.number))
.attr("opacity", "0")
.transition()
.duration(3000)
.attr("opacity", "1")