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
},
{
‘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’
}
],
‘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’
},
{}
]
}]
}
}
I still have a problem, all the data are displayed at first, until i move the slider. More infos here: ScatterGeo with a slider