modify pages

Home.py

@@ -48,16 +48,16 @@ def create_discontinuous_colormap(n_colors):
     colors = [cmap(i / (n_colors - 1)) for i in range(n_colors)]
     return mcolors.ListedColormap(colors)
 
-def create_colormap_legend(vmin, vmax, cmap, n_colors, attribute_name):
+def create_colormap_legend(vmin, vmax, cmap, n_colors):
     fig, ax = plt.subplots(figsize=(6, 0.8))
     fig.subplots_adjust(bottom=0.5)
 
     bounds = np.linspace(vmin, vmax, n_colors + 1)
     norm = mcolors.BoundaryNorm(bounds, cmap.N)
     cbar = fig.colorbar(plt.cm.ScalarMappable(norm=norm, cmap=cmap), cax=ax, orientation='horizontal', 
-                        spacing='proportional', boundaries=bounds, format='%.2f')
+                        spacing='proportional', boundaries=bounds, format='%.0f')
     cbar.set_ticks(bounds)
-    ax.set_title(f"{attribute_name}", fontsize=10, pad=10)
+    ax.set_title("緑被率 %", fontsize=10, pad=10)
     
     buf = io.BytesIO()
     plt.savefig(buf, format='png', dpi=300, bbox_inches='tight')
@@ -82,6 +82,9 @@ def app():
         st.error("Failed to load data. Please try again later.")
         return
 
+    # Convert FRAC_VEG to percentage
+    gdf['FRAC_VEG_PERCENT'] = gdf['FRAC_VEG'] * 100
+
     # City filter
     cities = sorted(gdf['CITY_NAME'].unique().tolist())
     selected_cities = st.multiselect("市区町村", cities, default=[])
@@ -92,8 +95,7 @@ def app():
     else:
         gdf_filtered = gdf
 
-    selected_attribute = "FRAC_VEG"
-    selected_attribute_jp = "緑被率"
+    selected_attribute = "FRAC_VEG_PERCENT"
 
     # Custom CSS to create a box around the color scale controls
     st.markdown("""
@@ -109,16 +111,16 @@ def app():
 
     # Color scale controls in an expander
     with st.expander("カラースケール設定", expanded=True):
-        # st.markdown('<div class="color-scale-box">', unsafe_allow_html=True)
+        st.markdown('<div class="color-scale-box">', unsafe_allow_html=True)
         col1, col2, col3, col4 = st.columns(4)
         with col1:
             n_colors = st.slider("分割数", min_value=2, max_value=20, value=5)
         with col2:
             alpha = st.slider("透過率", min_value=0.0, max_value=1.0, value=0.8, step=0.1)
         with col3:
-            vmin = st.number_input("最小値", value=0.0, step=0.1)
+            vmin = st.number_input("最小値 (%)", value=0.0, step=1.0)
         with col4:
-            vmax = st.number_input("最大値", value=1.0, step=0.1)
+            vmax = st.number_input("最大値 (%)", value=100.0, step=1.0)
         st.markdown('</div>', unsafe_allow_html=True)
 
     # Other controls
@@ -174,13 +176,13 @@ def app():
         layers=[layer],
         initial_view_state=view_state,
         map_style="mapbox://styles/mapbox/light-v9",
-        tooltip={"text": "{CITY_NAME} {S_NAME}\n{" + selected_attribute_jp + "}: {" + selected_attribute_jp + "}"}
+        tooltip={"text": "{CITY_NAME} {S_NAME}\n緑被率: {FRAC_VEG_PERCENT:.2f}%"}
     )
 
     st.pydeck_chart(r)
 
     # Create and display color scale legend
-    legend_img = create_colormap_legend(vmin, vmax, cmap, n_colors, selected_attribute_jp)
+    legend_img = create_colormap_legend(vmin, vmax, cmap, n_colors)
 
     # Create three columns, with the middle one being 30% width
     left_spacer, center_col, right_spacer = st.columns([1, 1, 1])