The goal of this function is to generate a map with animation by drawing lines first, and putting stations and their names. I'm using async to finish the animation before transit movement starts. The problem here is that its success is unstable. The line drawing often finishes in the middle even though I imitated the d3 animation code referring to the medium page (https://medium.com/@louisemoxy/create-a-d3-line-chart-animation-336f1cb7dd61). I'm not sure it doesn't work well because there is something wrong with the codes, or observable is not good at this type of animation.

The problem here is that the scale of the axis doesn't work well. In this chart, I'm trying to show the initial budget that the user set by a red bar and the spending in each iteration by blue charts, and the remaining budget by a yellow line. Blue bars are flipped to show the balance intuitively. The scale linear of yScale and the numbers of budget and spending don't match, so the bars exceed the scale.