🏠 back to Observable

Syncing animated lines chart

I am trying to visualize the weekly COVID+ cases per 100k by county in Virginia for two counties at a time (Animated Line Chart / Ben Lobo / Observable). I read through Learn D3: Animation / D3 / Observable and have managed to get an animation that shows the lines for both counties, but because of the way each line is animated (a percentage of the total line length is shown at each time point), the two lines are “out of sync” - i.e., if you select ‘Accomack’ as county 1 and ‘Albemarle’ as county 2 and pause the animation at 104, the line for Albemarle county is right at September 2020, while the line for Accomack is still in April:

Is there a way to sync up the lines so they progress across the x-axis (time) at the same rate? Ideally if you pause the animation the end of each line would be at the same x-axis value.