plotly / plotly/plotly.js

showframe not working for scattergeo if geo.scope is set

Open
#7,051 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

Expect that when showframe=True that there's a border around the map.

To Reproduce:

from dash.dash import PreventUpdate
import xarray as xr
import pandas as pd
import numpy as np
import plotly.express as px
import plotly.graph_objects as go
import requests
from datetime import datetime, timedelta
from dash import Dash, dcc, html, Input, Output, State, callback, dash_table

# Create a sample dataframe
np.random.seed(42)  # For reproducibility
data_size = 500

data_1041 = pd.DataFrame({
    'latitude': np.random.uniform(low=10.0, high=35.0, size=data_size),
    'longitude': np.random.uniform(low=-91.0, high=-55.0, size=data_size)
})

app = Dash(__name__)
server = app.server

def blank_fig():
    fig = go.Figure(go.Scatter(x=[], y=[]))
    fig.update_layout(template=None)
    fig.update_xaxes(showgrid=False, showticklabels=False, zeroline=False)
    fig.update_yaxes(showgrid=False, showticklabels=False, zeroline=False)
    
    return fig

color_sequence = ['#2E91E5', '#E15F99', '#1CA71C', '#FB0D0D', '#DA16FF', '#222A2A', '#B68100', '#750D86', '#EB663B', '#511CFB', '#00A08B', '#FB00D1', '#FC0080', '#B2828D', '#6C7C32', '#778AAE', '#862A16', '#A777F1', '#620042', '#1616A7', '#DA60CA', '#6C4516', '#0D2A63', '#AF0038']

app.layout = html.Div(
    [
        dcc.Dropdown(
            options=['1041'],
            value=['1041'],
            multi=True,
            id='dropdown-drone-choice'
        ),
        html.Div([dcc.Graph(id='saildrone-map', figure=blank_fig(), style={'width': '90vw', 'height': '90vh'})])
    ],
    style={"margin": "1em 5em", "font": "Times New Roman"}
)

@app.callback(
    Output('saildrone-map', 'figure'),
    Input('dropdown-drone-choice', 'value')
)
def update_drone(droneid_nam):
    dronedata_all = {
        '1041': data_1041,
    }

    fig = go.Figure()
    for i, drone in enumerate(droneid_nam):
        fig.add_trace(go.Scattergeo(
            lat=dronedata_all[drone]['latitude'][-180:],
            lon=dronedata_all[drone]['longitude'][-180:],
            name=drone,
            mode='markers',
            marker=dict(
                color=color_sequence[i]
            ),
            showlegend=True
        ))
        fig.add_trace(go.Scattergeo(
            lat=[dronedata_all[drone]['latitude'].iloc[-1]],
            lon=[dronedata_all[drone]['longitude'].iloc[-1]],
            name=drone,
            mode='markers',
            marker=dict(
                symbol='x',
                size=8,
                color=color_sequence[i],
                line=dict(
                    color='black',
                    width=1
                )
            ),
            showlegend=False
        ))

    fig.update_layout(
        geo=dict(
            scope='north america',
            showframe=True,
            showland=True,
            landcolor='rgb(204, 204, 204)',
            projection_type='mercator',
            lonaxis=dict(
                showgrid=True,
                gridwidth=0.5,
                gridcolor='gray',
                range=[-91.0, -55.0],
                dtick=5
            ),
            lataxis=dict(
                showgrid=True,
                gridwidth=0.5,
                gridcolor='gray',
                range=[10.0, 35.0],
                dtick=5
            )
        ),
        legend=dict(
            title='droneID',
            bordercolor='black',
            borderwidth=1
        ),
        font=dict(
            family='Times New Roman',
            size=16
        ),
        margin=dict(
            l=20, r=20, t=20, b=20
        )
    )

    dtick = 5
    x = list(range(-90, -55 + dtick, dtick))
    y = list(range(10, 40 + dtick, dtick))
    xpos = -90
    ypos = 10
    fig.add_trace(go.Scattergeo(
        lon=x[1:-1] + [xpos] * (len(y) - 2),
        lat=[ypos] * (len(x) - 2) + y[1:-1],
        showlegend=False,
        text=x[1:-1] + y[1:-1],
        mode='text',
        hoverinfo='skip'
    ))

    return fig

if __name__ == "__main__":
    app.run_server(debug=True)

Produces:
Screen Shot 2024-07-16 at 4 43 14 PM

Workaround:
Get rid of scope='north america', and the frame will appear with and without showframe defined

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the supplied Scattergeo reproduction and compare the rendered map with and without geo.scope set to "north america". Trace the geo frame rendering path in plotly.js, then verify that showframe=True produces the expected border when a scope is configured and that the existing workaround is no longer needed.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.