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.