Animate a plotly figure to draw a line

plotly.js
1

So I have this code from the docs to create a line and animate whenever the line y values are updated.


Plotly.newPlot('myDiv', [{
  x: [1, 2, 3],
  y: [0, 0.5, 1],
  line: {simplify: false},
}]);

function randomize() {
  Plotly.animate('myDiv', {
    data: [{y: [Math.random(), Math.random(), Math.random()]}],
    traces: [0],
    layout: {}
  }, {
    transition: {
      duration: 500,
      easing: 'cubic-in-out'
    },
    frame: {
      duration: 500
    }
  })
}

any ideas how to animate the line to make it show up as a point first, then a line from point 1 to point 2, then a line from pt1 → pt2 → pt3?

I’ve tried plotting sequentially larger portions of the plot and it doesn’t work for me - it just doesn’t plot anything until the for loop completes

        for (i = 0; i < x.length; i++) {
            out.tympfigL.data[0].x = x.slice(-i)
            out.tympfigL.data[0].y = y3.slice(-i)
            console.log(out.tympfigL.data[0].x,out.tympfigL.data[0].y)
            Plotly.newPlot('tympdiv', out.tympfigL.data, out.tympfigL.layout, out.tympfigL.config);
            pause(500)
        }

Thanks!