Animated scattergeo map--size of markers do not change

Hello,

Iam struggling with an animation of a worldmap where the size of markers should dynamically change over time. However, the markers always remain at the original size of the first frame and do not change. When using a choropleth map and dynamically changing colors it works without problems. So it seems to me that somehow the addFrames do not accept changing marker sizes? I have tried various things, but so far without success.

I would be very grateful for any help. Thx a lot!

HTML:

<head>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
<div id='myDiv'></div>
<script src="world_map.js"></script>
</body>

JS:

d3.csv("https://raw.githubusercontent.com/cieb-unibas/innoscape-part-II-descriptive-analysis/master/report_en/trad_data.csv", function(err, rows){

function filter_and_unpack(rows, key, year) {
  return rows.filter(row => row['year'] == year).map(row => row[key])
  }

  var frames = [];
  var slider_steps = [];
  var n = 21;
  var num = 1990;
  
  for (var i = 0; i <= n; i+=1) {
    var value = filter_and_unpack(rows, 'value', num).map(x => x * 100)
    var locations = filter_and_unpack(rows, 'par.code', num)
    var text = filter_and_unpack(rows, 'Country', num)
    
    frames[i] = {data: [{locations: locations, text: text, size: value}], name: num}
    
    slider_steps.push ({
        label: num.toString(),
        method: "animate",
        args: [[num], {
            mode: "immediate",
            transition: {duration: 500},
            frame: {duration: 800}
          }]
      })
    num = num + 1
  }


var width_plot = 900;
var heigth_plot = 450;

var  data = [{
      hovertemplate:  '<b>%{text}</b>' + 
                      '<extra></extra>',
      type: 'scattergeo', 
      locations: frames[0].data[0].locations,
      text: frames[0].data[0].text,
    marker: {
    size: frames[0].data[0].size,
       sizeref: 0.25
     },
      colorscale: [[0,'rgb(178, 24, 34)'],[1,'rgb(220, 220, 220)']],     autocolorscale: false,
     reversescale: true,
  showscale: false
}];


var geo_var = {
       scope: "world",
       countrycolor: 'rgb(255, 255, 255)',
       showland: true,
       landcolor: 'rgb(217, 217, 217)',
       showlakes: false,
       lakecolor: 'rgb(255, 255, 255)',
       subunitcolor: 'rgb(255, 255, 255)',
       lonaxis: { range: [-200, 220] },
       lataxis: { range: [-55, 80] },
    showframe: false,
    showcoastlines: false
    };


var layout = {
  dragmode: false, 
  xaxis: {fixedrange: true},
  yaxis: {fixedrange: true},
 autosize: true,
 width: width_plot,
 height: heigth_plot, 
    title: '',
    yanchor: 'left',
    xanchor: 'left',
    margin: {r:20, t:0, l:0, b:20, pad: 0},
    geo: geo_var,
    updatemenus: [{
      x: 0.1,
      y: 0,
      yanchor: "top",
      xanchor: "right",
      showactive: false,
      direction: "left",
      type: "buttons",
      pad: {"t": -412, "r": 0, "l": 0},
      buttons: [{
        method: "animate",
        args: [null, {
          fromcurrent: true,
          transition: {
            duration: 10,
          },
          frame: {
            duration: 1000, redraw: true
          }
        }],
        label: "Play"
      }, {
        method: "animate",
        args: [
          [null],
          {
            mode: "immediate",
            transition: {
              duration: 0
            },
            frame: {
              duration: 0, redraw: true
            }
          }
        ],
        label: "Pause"
      }]
    }],
    
    sliders: [{
      active: 0,
      steps: slider_steps,
      x: 0.15,
      len: 0.9,
      xanchor: "top",
      y: 0,
      yanchor: "top",
      pad: {t: -50, b: 10, r: 50, l:0},
      currentvalue: {
        visible: true,
        prefix: "Year:",
        xanchor: "right",
        font: {
          size: 18,
          color: "#666"
        }
      },
      transition: {
        duration: 200,
        easing: "linear"
      }
    }]
};

const config = {displayModeBar: false, responsive: true};


Plotly.newPlot('myDiv', data, layout, config).then(function() {
    Plotly.addFrames('myDiv', frames);
  });

})
1 Like

Hi @ch54321, I have exactly the same case, it would be nice if you can share the solution if you already solved it :slightly_smiling_face:

Hi Khaledalsayyed. Unfortunately, I haven’t found a solution. Sorry.