Hello,
similarly to what done by @nirco13 here, I am trying to use plotly_events to provide interactivity (clickable) on a chart - in my case a plotly express scatter_geo.
The problem is that when calling the plotly_events function, a chart is plotted that does not allow to fit the screen or use the full container width - unlike the st.plotly_chart(fig,use_container_width=True) command. Also formatting, not just color, is lost.
import streamlit as st
from streamlit_plotly_events import plotly_events
import pandas as pd, numpy as np
import plotly.express as px
import pydeck as pdk
# Load your data
@st.cache_resource
def load_data():
df = pd.read_csv('your_data.csv')
return df
df = load_data()
def page2():
st.title("Climate Heat Map")
st.subheader("Visualizing Future Climate Scenarios in Italian Cities")
col1, col2, col3 = st.columns([6,1,5])
with col1:
fig = px.scatter_geo(
df,
lat='latitude', lon='longitude',
color='heat_index',
projection='stereographic', scope='europe',
fitbounds='locations',
)
fig.update_traces(marker=dict(size=10))
fig.update_layout(
showlegend=False,
height=600,
margin=dict(l=10,r=10,t=0,b=0),
geo=dict(
center=dict(lat=42.3,lon=13.8),
projection_scale=2,
)
)
# st.plotly_chart(fig,use_container_width=True)
selected_points = plotly_events(fig, click_event=True, hover_event=False)
with col3:
try:
pt_index = selected_points[0]['pointIndex']
st.write(df.at[pt_index,'city'], df.at[pt_index,'latitude'])
except:
st.write('Please select a location on the map')
st.write('---')
city = st.selectbox('Alternatively select a city using the dropdown menu', df['city'].unique())
city_data = df[df['city'] == city]
# Create a dictionary of your pages
pages = {
# "Introduction": page1,
"Climate Heat Map": page2
}
# Use a selectbox for page navigation
st.sidebar.title('Navigation')
selection = st.sidebar.radio("Go to", list(pages.keys()))
page = pages[selection]
page()
