Choropleth / slider animation sluggish with many frames

plotly.js
1

Hello. I run grafana on a website to visualize electricity grid data and have created a choropleth map showing prices over time.
I’m using this plotly plugin for Grafana: Plotly plugin for Grafana | Grafana Labs

The animation is super fast when showing 1 day / 24 frames in this example: Grafana

But when increasing timerange to 30 days / 720 frames it becomes very sluggish. Grafana

I found advice in forum for optimizing, but it’s very fast with low number of frames so not sure they’re relevant.

update: Removing the slider makes it very fast again! Any suggestions on how to speed up the slider? It’s useful to display current date and progress through the animation.

The code is available and editable on my website by using edit panel (press e or use top right corner dropdown). I’ll also provide the code here, it’s based on Map animations example from your website Map animation in JavaScript

var frames=[];
var slider_steps = [];
for (let i = 0; i < data.series[0].fields[0].values.length; i++) {
  var locations = [];
  var values = [];
  var date = new Date(data.series[0].fields[0].values[i]).toISOString();
  data.series[0].fields.slice(1).forEach(series => {
    locations.push(series.name);
    values.push(series.values[i]);
  });
  frames[i] = {data: [{z: values, locations: locations, text: locations}], name: date}
  slider_steps.push ({
    label: date,
    method: "animate",
    args: [[date], {
      mode: "immediate",
      transition: {duration: 0},
      frame: {duration: 0}
    }]
  })
}

var data = [{
  type: 'choropleth',
  geojson: geojson,
  locationmode: 'geojson-id',
  featureidkey: 'properties.zoneName',
  locations: frames[0].data[0].locations,
  text: frames[0].data[0].locations,
  z: frames[0].data[0].z,
  colorscale: 'Jet',
  zauto: false,
  zmax: 800,
  colorbar: {ticksuffix: '€/MWh'}
}];

var layout = {
    updatemenus: [{
      x: 0.1,
      y: 0,
      yanchor: "top",
      xanchor: "right",
      showactive: false,
      direction: "left",
      type: "buttons",
      pad: {"t": 87, "r": 10},
      buttons: [{
        method: "animate",
        args: [null, {
          fromcurrent: true,
          transition: {
            duration: 0,
          },
          frame: {
            duration: variables.frame_duration
          }
        }],
        label: "Play"
      }, {
        method: "animate",
        args: [
          [null],
          {
            mode: "immediate",
            transition: {
              duration: 0
            },
            frame: {
              duration: 0
            }
          }
        ],
        label: "Pause"
      }]
    }],
    sliders: [{
      tickwidth: 0,
      active: 0,
      steps: slider_steps,
      x: 0.1,
      len: 0.9,
      xanchor: "left",
      y: 0,
      yanchor: "top",
      pad: {t: 50, b: 10},
      currentvalue: {
        xanchor: "right",
        font: {
          size: 20,
          color: "#666"
        }
      },
      transition: {
        duration: 0
      }
    }]
};

return {data:data,frames:frames,layout:layout};