How to change the layout of geo_scatter map (i.e., the animation-bar margins and location)

📊 Plotly Python
1

Hi all,

Like many others, I am playing around with John Hopkins data and have created an animated px.geo_scatter world map to show the confirmed cases, deaths and recovered cases over time:

Screenshot 2020-07-16 at 08.11.53
Screenshot 2020-07-16 at 08.11.531874×1398 197 KB

However, I am not happy with the layout - and have not been able to find any solutions online:

  • I would like to have the animation bar closer to the map. I have tried changing margins and padding without any luck (and have not been able to find a way to change it in online discussions).
  • I would like to have the animation bar above the map, but again, I have not found any information on how one can do that.
  • I would like to remove (or change) the dateStr=Jan 22, 2020 Above the animation bar (to just show the date without dateStr=).

Do any of you know how to change these things?

Thanks in advance.

Best wishes, Birgitte

Here is the code:

layout = html.Div([

    html.Div(className='row', children=[
        html.H1('Global COVID-19 cases', style=h1Style)
    ], style=headerStyle),

    html.Div(className='row', children=[html.Div(
        className='three columns', children=[
            html.P('Select case-type: ', style=pStyle),
            dcc.Dropdown(id='covid-case-types',
                         options=[{'label': m, 'value': m} for m in ['Confirmed', 'Deaths', 'Recovered']],
                         value='Confirmed',
                         style=dropdownStyle)
        ])], style=areaboxStyle),

    html.Div(className='row', children=[
        dcc.Graph(id='covid-map')
    ])
])


@app.callback(Output('covid-map', 'figure'),
              [Input('covid-case-types', 'value')])
def update_covid_map(case):
    cum_df['dateStr'] = cum_df['Date'].dt.strftime('%b %d, %Y')
    covid_world_map = go.Figure(
        data=px.scatter_geo(cum_df,
                            lon='Long', lat='Lat',
                            hover_name='Country/Region',
                            size=case, color=case,
                            color_continuous_scale=['Gold', 'DarkOrange', 'Crimson'],
                            animation_frame='dateStr',
                            title='COVID-19 progression ({})'.format(case)))
    covid_world_map.update_geos(showland=True, landcolor='LightBlue',
                                showocean=True, oceancolor='#F7FBFE',
                                showcoastlines=False)
    covid_world_map.update_layout(margin={'r': 0, 't': 50, 'l': 0, 'b': 0},
                                  height=500,
                                  font=tickFont,
                                  autosize=False,
                                  legend={'yanchor': 'top'})
    return covid_world_map