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)
Or maybe you could have a look at minichart from dash-leaflet: https://dash-leaflet-docs.onrender.com/