made the user app presentable for the demo

app.py

@@ -7,7 +7,7 @@ from src.helper_functions import custom_metric_box, pollution_box
 from src.predict import get_data_and_predictions
 
 st.set_page_config(
-    page_title="Utrecht Pollution Dashboard",
+    page_title="Utrecht Pollution Dashboard ",
     page_icon="🌱",
     layout="wide",
     initial_sidebar_state="expanded",
@@ -37,87 +37,102 @@ dates = dates_past + dates_future
 df = pd.DataFrame({"Date": dates, "O3": o3_values, "NO2": no2_values})
 
 # App Title
-st.title("Utrecht Pollution Dashboard🌱")
+st.title("Utrecht Pollution Dashboard 🌱")
 
-col1, col2 = st.columns((2, 3))
+col1, col2 = st.columns((1, 3))
 # Create a 3-column layout
 with col1:
     st.subheader("Current Weather")
-    subcol1, subcol2 = st.columns((1, 1))
-    with subcol1:
-        custom_metric_box(
-            label="Temperature",
-            value=f"{round(today['mean_temp'] * 0.1)} °C",
-            delta=f"{round(today['mean_temp'] * 0.1) - round(previous_day['mean_temp'] * 0.1)} °C",
-        )
-        custom_metric_box(
-            label="Humidity",
-            value=f"{round(today['humidity'])} %",
-            delta=f"{round(today['humidity']) - round(previous_day['humidity'])} %",
-        )
-        custom_metric_box(
-            label="Pressure",
-            value=f"{round(today['pressure'] * 0.1)} hPa",
-            delta=f"{round(today['pressure'] * 0.1) - round(previous_day['pressure'] * 0.1)} hPa",
-        )
-    with subcol2:
-        custom_metric_box(
-            label="Precipitation",
-            value=f"{round(today['percipitation'] * 0.1)} mm",
-            delta=f"{round(today['percipitation'] * 0.1) - round(previous_day['percipitation'] * 0.1)} mm",
-        )
-        custom_metric_box(
-            label="Solar Radiation",
-            value=f"{round(today['global_radiation'])} J/m²",
-            delta=f"{round(today['global_radiation']) - round(previous_day['global_radiation'])} J/m²",
-        )
-        custom_metric_box(
-            label="Wind Speed",
-            value=f"{round(today['wind_speed'] * 0.1, 1)} m/s",
-            delta=f"{round(today['wind_speed'] * 0.1, 1) - round(previous_day['wind_speed'] * 0.1, 1)} m/s",
-        )
+    
+    
+    custom_metric_box(
+        label="Temperature",
+        value=f"{round(today['mean_temp'] * 0.1)} °C",
+    )
+    custom_metric_box(
+        label="Humidity",
+        value=f"{round(today['humidity'])} %",
+    )
+    custom_metric_box(
+        label="Pressure",
+        value=f"{round(today['pressure'] * 0.1)} hPa",
+    )
+
+    custom_metric_box(
+        label="Precipitation",
+        value=f"{round(today['percipitation'] * 0.1)} mm",
+    )
+    custom_metric_box(
+        label="Solar Radiation",
+        value=f"{round(today['global_radiation'])} J/m²",
+    )
+    custom_metric_box(
+        label="Wind Speed",
+        value=f"{round(today['wind_speed'] * 0.1, 1)} m/s",
+    )
 
 with col2:
     st.subheader("Current Pollution Levels")
     sub1, sub2 = st.columns((1, 1))
-    # Display the prediction
-    # st.write(f'Predicted Pollution Level: {prediction[0]:.2f}')
+    
+    # Ozone (O₃) Pollution Box
     with sub1:
         pollution_box(
             label="O<sub>3</sub>",
             value=f"{round(today['O3'])} µg/m³",
             delta=f"{round(int(today['O3']) - int(previous_day['O3']))} µg/m³",
+            threshold=120
         )
         with st.expander("Learn more about O3", expanded=False):
             st.markdown(
-                "*Ozone (O<sub>3</sub>)*: A harmful gas at ground level, contributing to respiratory issues and aggravating asthma.",
+                """
+                *Ozone (O<sub>3</sub>)*: A harmful gas at ground level that can irritate the respiratory system and aggravate asthma.<br>
+                **Good/Bad**: "Good" means safe levels for most people, while "Bad" suggests harmful levels, especially for sensitive groups.
+                """, 
                 unsafe_allow_html=True,
             )
+    
+    # Nitrogen Dioxide (NO₂) Pollution Box
     with sub2:
         pollution_box(
             label="NO<sub>2</sub>",
             value=f"{round(today['NO2'])} µg/m³",
             delta=f"{round(int(today['NO2']) - int(previous_day['NO2']))} µg/m³",
+            threshold=40
         )
-        with st.expander("Learn more about O3", expanded=False):
+        with st.expander("Learn more about NO2", expanded=False):
             st.markdown(
-                "*Wadeva particle (NO<sub>2</sub>)*: A harmful gas at ground level, contributing to respiratory issues and aggravating asthma.",
+                """
+                *Nitrogen Dioxide (NO<sub>2</sub>)*: A toxic gas that contributes to lung irritation and worsens asthma and other respiratory issues.<br>
+                **Good/Bad**: "Good" means safe air quality, while "Bad" indicates levels that could cause respiratory problems, especially for vulnerable individuals.
+                """, 
                 unsafe_allow_html=True,
             )
 
     # Create two columns for two separate graphs
     # Plot O3 in the first subcolumn
-    st.subheader("O3 and NO2 Prediction")
+    st.subheader("O3 Forecast")
     # Plot NO2 in the second subcolumn
+    # Define the new color logic: green, orange, and red based on the threshold
+    def get_simple_color_scale(values, threshold):
+        """Returns green for values below the threshold, orange for values between the threshold and 2x the threshold, and red for values above 2x the threshold."""
+        return [
+            "#77C124" if v < threshold else 
+            "#E68B0A" if v < 2 * threshold else 
+            "#E63946" for v in values
+        ]
+
+    # O3 Bar Plot (threshold: 40)
+    o3_colors = get_simple_color_scale(o3_values, 40)  # Green below 40, Orange above 40, Red above 80
+
     fig_o3 = go.Figure()
     fig_o3.add_trace(
-        go.Scatter(
+        go.Bar(
             x=df["Date"],
             y=df["O3"],
-            mode="lines+markers",
             name="O3",
-            line=dict(color="rgb(0, 191, 255)", width=4),
-            hovertemplate="%{x|%d-%b-%Y}<br> %{y} µg/m³<extra></extra>",
+            marker=dict(color=o3_colors),  # Apply the color scale
+            hovertemplate="%{x|%d-%b-%Y}<br>%{y} µg/m³<extra></extra>",
         )
     )
     fig_o3.add_shape(
@@ -148,14 +163,17 @@ with col2:
     )
     st.plotly_chart(fig_o3, key="fig_o3")
 
+    # NO2 Bar Plot (threshold: 120)
+    no2_colors = get_simple_color_scale(no2_values, 120)  # Green below 120, Orange above 120, Red above 240
+    st.subheader("NO2 Forecast")
     fig_no2 = go.Figure()
     fig_no2.add_trace(
-        go.Scatter(
+        go.Bar(
             x=df["Date"],
             y=df["NO2"],
-            mode="lines+markers",
             name="NO2",
-            line=dict(color="rgb(255, 20, 147)", width=4),
+            marker=dict(color=no2_colors),  # Apply the color scale
+            hovertemplate="%{x|%d-%b-%Y}<br>%{y} µg/m³<extra></extra>",
         )
     )
     fig_no2.add_shape(
@@ -165,7 +183,7 @@ with col2:
             x1=pd.Timestamp.today(),
             y0=min(no2_values),
             y1=max(no2_values),
-            line=dict(color="gray", width=3, dash="dash"),
+            line=dict(color="White", width=3, dash="dash"),
         )
     )
     fig_no2.update_layout(
@@ -185,3 +203,26 @@ with col2:
         ),
     )
     st.plotly_chart(fig_no2, key="fig_no2")
+
+    import matplotlib.pyplot as plt
+    import numpy as np
+
+    fig, ax = plt.subplots()
+
+    bar = ax.bar([1,2,3,4,5,6],[4,5,6,3,7,5])
+
+    def gradientbars(bars):
+        grad = np.atleast_2d(np.linspace(0,1,256)).T
+        ax = bars[0].axes
+        lim = ax.get_xlim()+ax.get_ylim()
+        for bar in bars:
+            bar.set_zorder(1)
+            bar.set_facecolor("none")
+            x,y = bar.get_xy()
+            w, h = bar.get_width(), bar.get_height()
+            ax.imshow(grad, extent=[x,x+w,y,y+h], aspect="auto", zorder=0)
+        ax.axis(lim)
+
+    gradientbars(bar)
+
+    plt.show() 

predictions_history.csv

@@ -5,9 +5,9 @@ O3,2024-10-24,2024-10-26,16.000984317626852
 NO2,2024-10-24,2024-10-26,25.760307451092384
 O3,2024-10-24,2024-10-27,19.64377495640328
 NO2,2024-10-24,2024-10-27,31.210576791105115
-O3,2024-10-24,2024-10-25,10.33808859423279
-NO2,2024-10-24,2024-10-25,25.68519991558237
-O3,2024-10-24,2024-10-26,16.000984317626852
-NO2,2024-10-24,2024-10-26,25.760307451092384
-O3,2024-10-24,2024-10-27,19.64377495640328
-NO2,2024-10-24,2024-10-27,31.210576791105115
+O3,2024-10-24,2024-10-25,10.338088594245967
+NO2,2024-10-24,2024-10-25,25.685199915579293
+O3,2024-10-24,2024-10-26,16.00098431760588
+NO2,2024-10-24,2024-10-26,25.7603074510804
+O3,2024-10-24,2024-10-27,19.643774956417968
+NO2,2024-10-24,2024-10-27,31.21057679109889

src/helper_functions.py

@@ -2,7 +2,7 @@ import streamlit as st
 
 
 # Custom function to create styled metric boxes with compact layout
-def custom_metric_box(label, value, delta):
+def custom_metric_box(label, value):
     st.markdown(f"""
         <div style="
             padding: 5px;
@@ -17,14 +17,18 @@ def custom_metric_box(label, value, delta):
             </div>
             <div>
                 <p style="font-size: 18px; font-weight: bold; margin: 0;">{value}</p>  <!-- Smaller metric -->
-                <p style="color: {'green' if '+' in delta else 'orange'}; font-size: 12px; margin: 0;">{delta}</p> <!-- Smaller delta text -->
             </div>
         </div>
     """, unsafe_allow_html=True)
 
 # Custom function to create pollution metric boxes with side-by-side layout for label and value
 # Custom function to create pollution metric boxes with side-by-side layout and fixed width
-def pollution_box(label, value, delta):
+def pollution_box(label, value, delta, threshold):
+    # Determine if the pollution level is "Good" or "Bad"
+    status = "Good" if float(value.split()[0]) < threshold else "Bad"
+    status_color = "#77C124" if status == "Good" else "#E68B0A"
+
+    # Render the pollution box
     st.markdown(f"""
         <div style="
             background: rgba(255, 255, 255, 0.05);
@@ -35,10 +39,9 @@ def pollution_box(label, value, delta):
             border: 1px solid rgba(255, 255, 255, 0.15);
             padding: 15px;
             margin-bottom: 10px;
-            width: 300px;  /* Fixed width */
         ">
-            <h4 style="font-size: 18px; font-weight: normal; margin: 0;">{label}</h4>  <!-- Smaller label -->
-            <p style="font-size: 36px; font-weight: bold; margin: 0;">{value}</p>  <!-- Larger metric -->
-            <p style="color: {'green' if '+' in delta else 'orange'}; margin: 0;">{delta}</p>
+            <h4 style="font-size: 24px; font-weight: bold; margin: 0;">{label}</h4>  <!-- Bigger label -->
+            <p style="font-size: 36px; font-weight: bold; color: {status_color}; margin: 0;">{status}</p>  <!-- Good/Bad with color -->
+            <p style="font-size: 18px; margin: 0;">{value}</p>  <!-- Smaller value where delta used to be -->
         </div>
-        """, unsafe_allow_html=True)
+    """, unsafe_allow_html=True)