Scatter_geo and pie chart

đź“Š Plotly Python
1

Hello,
from a while, i am trying to create a “map chart”, where (in some locations) i would have a kind of pie charts.

i found that the “px.scatter_geo” allows displaying a world map where we can display different kind of distributions.

i want to know if it’s possible to display “pie charts” instead if a simple “dot”.

here is the df i am trying to display :

data = {'country': ['United States', 'France', 'Turkey'],
        'iso_alpha': ['USA', 'FRA', 'TUR'],
        '%S': [50, 50, 50],
        '%P': [30, 30, 30],
        f'%G': [20, 20, 20]}
df = pd.DataFrame(data)

to display these data within a worlmap, i used this code :

import plotly.express as px
df = px.data.gapminder()

fig = px.scatter_geo(df, locations="iso_alpha",
    color="country", 
    hover_name="country", 
    size="%S",
    projection="orthographic",
    hover_data=[%S],)
fig.show()

But as you can see i anly display %S, is there a way to have (instead of dots), a pie chart (%S+%P+%G) by country.

Can anyone help me about this.

Thank you all !

1 Like
2

Can you use Dash? With Dash I think you can use dcc.Tooltip to show another graph when hovering points on scatter_geo. Something as below:

import plotly.graph_objects as go
import dash
import dash_bootstrap_components as dbc
from dash import Input, Output, State, dcc, html, no_update
import pandas as pd
import plotly.express as px

data = {'country': ['United States', 'France', 'Turkey'],
        'iso_alpha': ['USA', 'FRA', 'TUR'],
        '%S': [50, 50, 50],
        '%P': [30, 30, 30],
        f'%G': [20, 20, 20]}
df = pd.DataFrame(data)


fig = px.scatter_geo(df, locations="iso_alpha",
    color="country", 
    hover_name="country", 
    projection="natural earth",
    hover_data=["%S",'%P','%G'])
fig.update_traces(
    hoverinfo="none",
    hovertemplate=None,
)

# connect dahs page to main app
app = dash.Dash(__name__, title='Dashboard', external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([
    dbc.Row([
        dbc.Col([
            dcc.Graph(id='scatter_geo', figure=fig)
        ]),
        dcc.Tooltip(id="graph-tooltip", direction='bottom')
    ])
])

@app.callback(
    Output("graph-tooltip", "show"),
    Output("graph-tooltip", "bbox"),
    Output("graph-tooltip", "children"),
    Input('scatter_geo','hoverData'))

def update_graph(hoverData):
    if hoverData is None:
        return False, no_update, no_update

    else:
        pt = hoverData["points"][0]['hovertext']
        pt2 = hoverData["points"][0]
        bbox = pt2["bbox"]

        dff = df[df['country']==pt]
        dff2 = dff.melt(id_vars=['country','iso_alpha'], value_vars=['%S','%P','%G'])
        fig2 = px.pie(dff2, values='value', names='variable')
        fig2.update_layout(margin=dict(l=0, r=0, t=0, b=0), showlegend=True)
        children = [
        html.Div([
            dcc.Graph(
                figure=fig2,style={"width": "200px", 'height':'200px'})
            ])
        ]

        return True, bbox, children

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

Screenshot 2023-03-24 165444
Screenshot 2023-03-24 165444966Ă—492 40.3 KB

Or maybe you could have a look at minichart from dash-leaflet: https://dash-leaflet-docs.onrender.com/

2 Likes
3

Hello, Thank you so much for the answer !