Animating transitions between plots

Community Help
1

Is there a way to animate between plot transitions as you see in this example visualization

I would like to show animation when switching selected countries in this notebook

2

There is nothing built-in, but you can play with Plot: Animate a bar chart / Fil / Observable if you are felling adventurous.

1 Like
3

Thanks @Fil

Going to play around with this even it is beyond my current skill level.

4

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 (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?

1 Like
5

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) and apply it to the data?

1 Like
6

@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).

1 Like
7

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:

   /*
    //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?

8

@bz-jm can you please share a notebook? Itā€™s much harder to read code if we donā€™t immediately see what it does.

9

@Fil no problem sorry here it is: Plot: Animate a bar chart / Brian / Observable

This is a fork of your animation link above with the modifications trying to change the axis.

Appreciate the help.

10

This variant animates the y axis. Plot: Animate a bar chart & scales / Fil / Observable

1 Like
11

@Fil Brilliant! Greatly indebted.