# Animating transitions between plots **URL:** \ **Category:** Help\ **Created:** [March 11, 2022, 12:52pm UTC](https://talk.observablehq.com/t/animating-transitions-between-plots/6337 "2022-03-11T12:52:02Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![arky](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/arky/32/4486_2.png) [@arky](https://talk.observablehq.com/u/arky)\ **Post date:** [March 11, 2022, 12:52pm UTC](https://talk.observablehq.com/t/animating-transitions-between-plots/6337/1 "2022-03-11T12:52:02Z")
Is there a way to animate between plot transitions as you see in [this example visualization](https://app.datawrapper.de/river/_/U2GFo) I would like to show animation when switching selected countries in this notebook > **[Agriculture commodity exports in Lower Mekong countries (2015)](https://observablehq.com/@arky/mekong-commodity-exports-2015)** ---
**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\ **Post date:** [March 11, 2022, 2:48pm UTC](https://talk.observablehq.com/t/animating-transitions-between-plots/6337/2 "2022-03-11T14:48:51Z")
There is nothing built-in, but you can play with [Plot: Animate a bar chart / Fil / Observable](https://observablehq.com/@fil/plot-animate-a-bar-chart) if you are felling adventurous. ---
**Author:** ![arky](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/arky/32/4486_2.png) [@arky](https://talk.observablehq.com/u/arky)\ **Post date:** [March 11, 2022, 3:52pm UTC](https://talk.observablehq.com/t/animating-transitions-between-plots/6337/3 "2022-03-11T15:52:09Z")
Thanks @Fil Going to play around with this even it is beyond my current skill level. ---
**Author:** ![bz-jm](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@bz-jm](https://talk.observablehq.com/u/bz-jm)\ **Post date:** [July 7, 2022, 9:50pm UTC](https://talk.observablehq.com/t/animating-transitions-between-plots/6337/4 "2022-07-07T21:50:35Z")
I wanted to animate a bar chart in Plot based upon a new dataset. It would have been straight forward to load a new dataset without any animation. But we are using d3 and Plot for the “awesomeness” it offers us in visualizing our data! After fumbling around for a few hours finding plenty of d3 options but nothing from Plot, I was about to post the question to the forum when I stumbled upon this thread. After another couple of hours (primarily because I’m so new to both d3 and Plot) I was able to create the transition I was hoping to achieve thanks to @Fil’s d3/barY function. I am posting the results here in case someone stumbles upon this thread in the future looking to accomplish something similar. The bar chart + transition is towards the bottom and you will observe that the function that does all of the heavy lifting is a direct copy from @Fil 's notebook above. [Plot Testing / Brian / Observable](https://observablehq.com/@bz-jm/plot-testing) (click reset chart / update chart buttons to see the transition) The next question @Fil is can we modify the function to do something similar for the linearRegressionY line? ---
**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\ **Post date:** [July 8, 2022, 6:20am UTC](https://talk.observablehq.com/t/animating-transitions-between-plots/6337/5 "2022-07-08T06:20:44Z")
We don’t have a mechanism (yet!) to support animations. Transitioning the bars’ height and color is possible because we can use the scales to compute the new visual properties from the new data values, directly. With the linear regression, it might be a bit more difficult since we’d need to evaluate the regression with the new data. The mark doesn’t give a way to read those values, which are computed only when it’s time to render them. But you might be able to copy the code ([plot/linearRegression.js at main · observablehq/plot · GitHub](https://github.com/observablehq/plot/blob/main/src/marks/linearRegression.js#L118)) and apply it to the data? ---
**Author:** ![bz-jm](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@bz-jm](https://talk.observablehq.com/u/bz-jm)\ **Post date:** [July 8, 2022, 9:05pm UTC](https://talk.observablehq.com/t/animating-transitions-between-plots/6337/6 "2022-07-08T21:05:35Z")
@Fil I’m going to give it a go, however I spent today banging my head against the wall on updating the y axis once the data transitions (which is working perfectly). I’ve been all over the place with trying to learn how to do it in d3 and searching the forums for a solution but I am once again stuck. I’m sure there is a simple solution, I just haven’t been able to stumble upon it. Thanks for your patience. (Edit: For clarity now that the data on the chart is updating I need to update the y axis to the new domain so that the axis ticks are appropriate). ---
**Author:** ![bz-jm](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@bz-jm](https://talk.observablehq.com/u/bz-jm)\ **Post date:** [July 27, 2022, 10:27pm UTC](https://talk.observablehq.com/t/animating-transitions-between-plots/6337/7 "2022-07-27T22:27:55Z")
I had to step away for a couple weeks and now I’m back at it. I am trying to modify the axis from your example above. I have been trying to work through the d3 documentation but it has been painfully slow, In particular because there is a lot of dated information (on stack overflow / blogs) and reading the source straight… well there is a lot of source and a lot to learn. This is what I have been trying: ```auto /* //generate rangeY const rangeY = d3.scaleLinear().range([0, 100]); var yRange = d3.axisLeft([0,100]); //var yAxis = d3.selectAll(G) //.selectAll("y-axis"); // return d3.selectAll(G).transition().duration(1000).call(rangeY); let yScale = d3.scaleLinear() .domain([0, 100]) .range([600, 0]); const yAxis = d3.axisLeft() .scale(yScale); */ let yScale = d3.scaleLinear() .domain([0, 1000]) .range([600, 0]); const yAxis = d3.axisLeft() .scale(yScale); var svg = d3.selectAll(G) .selectAll("rect") .transition() .delay(delay) .duration(duration) .attr("height", height) .attr("fill", (i) => c.scales.color(C[i])) .attr("y", y); svg.selection().merge(d3.selectAll(G).attr('transform', 'translate(1)').call(yAxis)); return svg; ``` Keeping in mind I’m just copy/pasting/testing variations of code snippets. I’ve tried a lot of variations but can’t seem to affect the axis at all, even so much as to make it disappear from doing something incorrectly. I’m wondering if it would be better to just do this all in d3 until Plot is further along versus trying to combine Plot / d3? ---
**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\ **Post date:** [July 28, 2022, 12:43pm UTC](https://talk.observablehq.com/t/animating-transitions-between-plots/6337/8 "2022-07-28T12:43:34Z")
@bz-jm can you please share a notebook? It’s much harder to read code if we don’t immediately see what it does. ---
**Author:** ![bz-jm](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@bz-jm](https://talk.observablehq.com/u/bz-jm)\ **Post date:** [July 28, 2022, 4:32pm UTC](https://talk.observablehq.com/t/animating-transitions-between-plots/6337/9 "2022-07-28T16:32:46Z")
@Fil no problem sorry here it is: [Plot: Animate a bar chart / Brian / Observable](https://observablehq.com/@bz-jm/plot-animate-a-bar-chart) This is a fork of your animation link above with the modifications trying to change the axis. Appreciate the help. ---
**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\ **Post date:** [July 28, 2022, 7:28pm UTC](https://talk.observablehq.com/t/animating-transitions-between-plots/6337/10 "2022-07-28T19:28:25Z")
This variant animates the y axis. [Plot: Animate a bar chart & scales / Fil / Observable](https://observablehq.com/@fil/plot-animate-a-bar-chart-scales) ---
**Author:** ![bz-jm](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@bz-jm](https://talk.observablehq.com/u/bz-jm)\ **Post date:** [July 28, 2022, 7:49pm UTC](https://talk.observablehq.com/t/animating-transitions-between-plots/6337/11 "2022-07-28T19:49:04Z")
@Fil Brilliant! Greatly indebted.