From 63e89e9f03390c3310b39e012130bbd4be1697d1 Mon Sep 17 00:00:00 2001 From: Markus Haller Date: Wed, 8 Nov 2023 18:07:02 +0100 Subject: [PATCH 1/4] improve map layout --- app/ptxboa_functions.py | 38 +++++++++++++++++++++++--------------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/app/ptxboa_functions.py b/app/ptxboa_functions.py index a4b7c33d..20dd21bf 100644 --- a/app/ptxboa_functions.py +++ b/app/ptxboa_functions.py @@ -232,37 +232,45 @@ def create_sidebar(api: PtxboaAPI): def create_world_map(settings: dict, res_costs: pd.DataFrame): - parameter_to_show_on_map = st.selectbox( - "Select cost component:", res_costs.columns, index=len(res_costs.columns) - 1 - ) + parameter_to_show_on_map = "Total" title_string = ( f"{parameter_to_show_on_map} cost of exporting {settings['chain']} to " f"{settings['country']}" ) - # Create a choropleth world map using Plotly Express + # define color scale: + color_scale = [ + (0, "rgb(60, 194, 204)"), # Starting color at the minimum data value + (1, "rgb(208, 110, 162)"), # Ending color at the maximum data value + ] + + # Create a choropleth world map: fig = px.choropleth( locations=res_costs.index, # List of country codes or names locationmode="country names", # Use country names as locations color=res_costs[parameter_to_show_on_map], # Color values for the countries hover_name=res_costs.index, # Names to display on hover - color_continuous_scale="Turbo", # Choose a color scale + color_continuous_scale=color_scale, # Choose a color scale title=title_string, ) - # Add black borders to the map + # update layout: fig.update_geos( showcountries=True, # Show country borders showcoastlines=False, # Hide coastlines for a cleaner look - bgcolor="lightgray", # Set background color - countrycolor="white", # Set default border color for other countries + countrycolor="black", # Set default border color for other countries + countrywidth=0.5, # Set border width; adjust as needed for 'thin' appearance showland=True, - landcolor="white", # Set land color - oceancolor="lightblue", # Set ocean color + landcolor="#f3f4f5", # Set land color to light gray + oceancolor="#e3e4ea", # Optionally, set ocean color to light blue ) - fig.update_layout(coloraxis_colorbar={"title": settings["output_unit"]}) + fig.update_layout( + coloraxis_colorbar={"title": settings["output_unit"]}, + height=600, + margin={"t": 20, "b": 20, "l": 20, "r": 20}, + ) - # Display the map using st.plotly_chart + # Display the map: st.plotly_chart(fig, use_container_width=True) return @@ -365,11 +373,11 @@ def content_dashboard(api, res_costs: dict, context_data: dict, settings: pd.Dat """ ) - c_1, c_2 = st.columns([1, 2]) - with c_1: + c_1, c_2 = st.columns([2, 1]) + with c_2: create_infobox(context_data, settings) - with c_2: + with c_1: create_world_map(settings, res_costs) st.divider() From c3d689fb0b62bf0efbbfe6b73a209bc667bd67a3 Mon Sep 17 00:00:00 2001 From: Markus Haller Date: Wed, 8 Nov 2023 21:52:54 +0100 Subject: [PATCH 2/4] improved map layout --- app/ptxboa_functions.py | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/app/ptxboa_functions.py b/app/ptxboa_functions.py index 20dd21bf..cc46ef88 100644 --- a/app/ptxboa_functions.py +++ b/app/ptxboa_functions.py @@ -243,12 +243,28 @@ def create_world_map(settings: dict, res_costs: pd.DataFrame): (1, "rgb(208, 110, 162)"), # Ending color at the maximum data value ] + # Create custom hover text: + custom_hover_data = res_costs.apply( + lambda x: f"{x.name}

" + + "
".join( + [ + f"{col}: {x[col]:.1f} {settings['output_unit']}" + for col in res_costs.columns[:-1] + ] + + [ + f"──────────
{res_costs.columns[-1]}: " + f"{x[res_costs.columns[-1]]:.1f} {settings['output_unit']}" + ] + ), + axis=1, + ) + # Create a choropleth world map: fig = px.choropleth( locations=res_costs.index, # List of country codes or names locationmode="country names", # Use country names as locations color=res_costs[parameter_to_show_on_map], # Color values for the countries - hover_name=res_costs.index, # Names to display on hover + custom_data=[custom_hover_data], # Pass custom data for hover information color_continuous_scale=color_scale, # Choose a color scale title=title_string, ) @@ -256,9 +272,9 @@ def create_world_map(settings: dict, res_costs: pd.DataFrame): # update layout: fig.update_geos( showcountries=True, # Show country borders - showcoastlines=False, # Hide coastlines for a cleaner look + showcoastlines=True, # Show coastlines countrycolor="black", # Set default border color for other countries - countrywidth=0.5, # Set border width; adjust as needed for 'thin' appearance + countrywidth=0.5, # Set border width showland=True, landcolor="#f3f4f5", # Set land color to light gray oceancolor="#e3e4ea", # Optionally, set ocean color to light blue @@ -270,6 +286,9 @@ def create_world_map(settings: dict, res_costs: pd.DataFrame): margin={"t": 20, "b": 20, "l": 20, "r": 20}, ) + # Set the hover template to use the custom data + fig.update_traces(hovertemplate="%{customdata}") # Custom data + # Display the map: st.plotly_chart(fig, use_container_width=True) return From e9226224e46fa678d224a6f78a518a449c6da569 Mon Sep 17 00:00:00 2001 From: Markus Haller Date: Thu, 9 Nov 2023 08:15:12 +0100 Subject: [PATCH 3/4] comments --- app/ptxboa_functions.py | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/app/ptxboa_functions.py b/app/ptxboa_functions.py index cc46ef88..bdd583ed 100644 --- a/app/ptxboa_functions.py +++ b/app/ptxboa_functions.py @@ -232,7 +232,10 @@ def create_sidebar(api: PtxboaAPI): def create_world_map(settings: dict, res_costs: pd.DataFrame): + """Create world map.""" parameter_to_show_on_map = "Total" + + # define title: title_string = ( f"{parameter_to_show_on_map} cost of exporting {settings['chain']} to " f"{settings['country']}" @@ -266,7 +269,7 @@ def create_world_map(settings: dict, res_costs: pd.DataFrame): color=res_costs[parameter_to_show_on_map], # Color values for the countries custom_data=[custom_hover_data], # Pass custom data for hover information color_continuous_scale=color_scale, # Choose a color scale - title=title_string, + title=title_string, # set title ) # update layout: @@ -275,15 +278,15 @@ def create_world_map(settings: dict, res_costs: pd.DataFrame): showcoastlines=True, # Show coastlines countrycolor="black", # Set default border color for other countries countrywidth=0.5, # Set border width - showland=True, + showland=True, # show land areas landcolor="#f3f4f5", # Set land color to light gray - oceancolor="#e3e4ea", # Optionally, set ocean color to light blue + oceancolor="#e3e4ea", # Optionally, set ocean color slightly darker gray ) fig.update_layout( - coloraxis_colorbar={"title": settings["output_unit"]}, - height=600, - margin={"t": 20, "b": 20, "l": 20, "r": 20}, + coloraxis_colorbar={"title": settings["output_unit"]}, # colorbar + height=600, # height of figure + margin={"t": 20, "b": 20, "l": 20, "r": 20}, # reduce margin around figure ) # Set the hover template to use the custom data From f8f54ddabff3d1a114c979cd8db8f8cc721cb00e Mon Sep 17 00:00:00 2001 From: Markus Haller Date: Thu, 9 Nov 2023 08:43:44 +0100 Subject: [PATCH 4/4] improve map layout --- app/ptxboa_functions.py | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/ptxboa_functions.py b/app/ptxboa_functions.py index bdd583ed..79ef48d2 100644 --- a/app/ptxboa_functions.py +++ b/app/ptxboa_functions.py @@ -277,10 +277,14 @@ def create_world_map(settings: dict, res_costs: pd.DataFrame): showcountries=True, # Show country borders showcoastlines=True, # Show coastlines countrycolor="black", # Set default border color for other countries - countrywidth=0.5, # Set border width + countrywidth=0.2, # Set border width + coastlinewidth=0.2, # coastline width + coastlinecolor="black", # coastline color showland=True, # show land areas landcolor="#f3f4f5", # Set land color to light gray oceancolor="#e3e4ea", # Optionally, set ocean color slightly darker gray + showocean=True, # show ocean areas + framewidth=0.2, # width of frame around map ) fig.update_layout(