Black Lives Matter. Please consider donating to Black Girls Code today.

Slider for map marker+lines plotting

Hello guys !

I have been fighting trying to make my interactive plot works. I want to use a slider to animate frames, each frames containing multiple markers and multiple lines (one marker/line = a scattergeo dict) .
It works for the first two frames but I have an error starting at the third frame (I made a GIF below to illustrate, also I am giving the image with the error only). Do you have any idea of what I can do to make it work at first sight ? I can give more details if needed


Thanks !

I do a plotly.offline.plot(figure, filename="test.html), with figure the dict below (shorted):

{
  'layout': {
    'title': 'Energy Flow',
    'showlegend': True,
    'width': '800',
    'height': '600',

  ## etc ..  
  ## general layout
  },
  
  'sliders': [{
    'args': ['slider.value', {
      'duration': 400,
      'ease': 'cubic-in-out'
    }],
    'plotlycommand': 'animate',
    'initialValue': '2010',
    'steps': [{
      'args': [
        ['2010'], {
          'frame': {
            'duration': 70,
            'redraw': True
          },
          'mode': 'immediate',
          'transition': {
            'duration': 0
          }
        }
      ],
      'label': '2010',
      'method': 'animate'
    }, {
      'args': [
        ['2011'], {
          'frame': {
            'duration': 70,
            'redraw': True
          },
          'mode': 'immediate',
          'transition': {
            'duration': 0
          }
        }
      ],
      'label': '2011',
      'method': 'animate'
    }, {
      'args': [
        ['2012'], {
          'frame': {
            'duration': 70,
            'redraw': True
          },
          'mode': 'immediate',
          'transition': {
            'duration': 0
          }
        }
      ],
      'label': '2012',
      'method': 'animate'
    }, {
      'args': [
        ['2013'], {
          'frame': {
            'duration': 70,
            'redraw': True
          },
          'mode': 'immediate',
          'transition': {
            'duration': 0
          }
        }
      ],
      'label': '2013',
      'method': 'animate'
    },
    {}
    ## etc ..
    ## slider data for each frame
  ],
    
  'data': [
  ## data of the first frame
  {
    'type': 'scattergeo',
    'lon': [101.9199, 99.7129],
    'lat': [30.1904, 38.166],
    'hoverinfo': 'text',
    'text': 'Sichuan>Gansu: 0.19 by gas_transmission ',
    'mode': 'lines',
    'line': {
      'width': 1.4501452310666547,
      'color': '#8465A9'
    },
    'legendgroup': 'gas_transmission',
    'name': 'gas_transmission:Sichuan',
    'opacity': 0.6
  },
  ## a line dict
  {
    'type': 'scattergeo',
    'lon': [99.7129],
    'lat': [38.166],
    'hoverinfo': 'text',
    'text': 'Gansu: 0.02 of prod (gas)',
    'mode': 'markers',
    'marker': {
      'symbol': 'dot',
      'opacity': 0.6,
      'size': 1.0473837085333322,
      'color': 'orange'
    },
  ## and a marker dict  
  ## etc ..
    ],
  'frames': [
  [],
  [],
  ## etc ..
  ## all the frames data
  ]
}

I HAVE MADE IT GUYS ! haha
I’ll share how I made it works soon$

Edit:
here is my figure dict (I am not using “frames”):
{
‘data’: [{
‘type’: ‘scattergeo’,
‘lon’: [118.8586, 117.2461],
‘lat’: [32.915, 32.0361],
‘hoverinfo’: ‘text’,
‘text’: 'Jiangsu>Anhui: 1.84 by gas_transmission ',
‘mode’: ‘lines’,
‘line’: {
‘width’: 5.359301185066551,
‘color’: ‘#8465A9
},
‘legendgroup’: ‘gas_transmission’,
‘name’: ‘gas_transmission:Jiangsu’,
‘opacity’: 0.6
},

a line

{
‘type’: ‘scattergeo’,
‘lon’: [120.498],
‘lat’: [29.0918],
‘hoverinfo’: ‘text’,
‘text’: ‘Zhejiang: 0.76 of lng_import (gas)’,
‘mode’: ‘markers’,
‘marker’: {
‘symbol’: ‘dot’,
‘opacity’: 0.6,
‘size’: 2.806030050747952,
‘color’: ‘blue’
},
‘legendgroup’: ‘lng_import’,
‘name’: ‘lng_import’
}

a marker

etc…

],
‘layout’: {
‘title’: ‘Energy Flow’,
‘showlegend’: True,
‘width’: ‘900’,
‘height’: ‘600’,
‘hovermode’: ‘closest’,
‘geo’: {
‘scope’: ‘world’,
‘showland’: True,
‘showcountries’: True,
‘showsubunits’: True,
‘showocean’: True,
‘oceancolor’: ‘#aec6cf’,
‘subunitcolor’: ‘blue’,
‘countrycolor’: ‘green’,
‘countrywidth’: 0.5,
‘subunitwidth’: 0.5,
‘lonaxis’: {
‘range’: [80.77808, 130.26872]
},
‘lataxis’: {
‘range’: [16.25295, 51.66675]
},
‘landcolor’: ‘rgb(255,255,255)’
},
‘sliders’: [{
‘active’: ‘2010’,
‘currentvalue’: {
‘visible’: True,
‘prefix’: 'Timestep: ’
},
‘pad’: {
‘t’: 50
},
‘steps’: [{
‘method’: ‘restyle’,
‘args’: [‘visible’, [True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False, False]],
‘label’: ‘2010’
},
{}

for each step, define to true all the scattergeo dict you want to be visible, false to all the others

etc …

  ]
}]

}
}

I still have a problem, all the data are displayed at first, until i move the slider. More infos here: ScatterGeo with a slider