refined the plots

app.py

@@ -161,36 +161,93 @@ District of Columbia Mayor’s Office. (2023, June 9). *Air quality continues to
     """
 )
 
+# -----------------------------------------------------------
+# Additional Trial and Error Visualizations (Unpolished/Cluttered)
+# Place this code block at the bottom of your existing code
+# -----------------------------------------------------------
+
+import altair as alt
+
+st.markdown("""
+### Early Trial Visualizations (Cluttered Prototypes)
+
+Below are some of our initial attempts at visualizing all pollutants together.
+These attempts are intentionally left here to demonstrate the "scaffolding" nature 
+of our work. They are cluttered and not very user-friendly, but they show our trial-and-error process.
+""")
+
+# Melt the dataframe to a long format for plotting multiple pollutants at once
+long_df = df_air_quality.melt(id_vars="datetime", value_vars=air_quality_vars, 
+                              var_name="Pollutant", value_name="Concentration")
+
+# Attempt 1: A single line chart with ALL pollutants at once
+# This leads to a very cluttered chart where it's hard to distinguish individual lines.
+st.markdown("#### Attempt 1: All Pollutants in One Line Chart")
+all_in_one_line = alt.Chart(long_df).mark_line().encode(
+    x=alt.X('datetime:O', title='Date and Time'),
+    y=alt.Y('Concentration:Q', title='Concentration'),
+    color=alt.Color('Pollutant:N', legend=alt.Legend(title='Pollutant')),
+    tooltip=['datetime', 'Pollutant', 'Concentration']
+).properties(
+    width=700,
+    height=400,
+    title="A Very Overcrowded Line Chart"
+)
+st.altair_chart(all_in_one_line, use_container_width=True)
+
 st.markdown("""
-### Reflecting on the Process for Part 2
-
-Throughout this development phase, we approached the observatory as a prototype. 
-We experimented with different data visualizations and refresh mechanisms. The prompt's pseudo-real-time requirement 
-led us to implement a simple 'Refresh Data' button. This choice balanced complexity 
-with user control.
-
-Before settling on our current format, we tried various approaches:
-- We tested line charts displaying multiple pollutants at once, but found it overwhelming.
-- We considered scatter plots to reveal correlations between pollutants. While interesting, 
-  it felt too complex for a first draft.
-- We focused instead on ensuring data quality, clarity in timestamps, and straightforward 
-  on-demand refreshing to highlight core functionalities.
-
-This phase wasn't about perfection. It was about testing ideas, learning what worked, and 
-laying down a foundation for future enhancements.
+*As you can see, this single chart becomes difficult to interpret due to the sheer 
+number of lines and colors overlapping. While it technically "works," it doesn't provide 
+clear insights at a glance.*
 """)
 
+# Attempt 2: A scatter plot of all pollutants over time
+# Again, this will be cluttered. Each pollutant on the same time axis, different colors.
+# With so many pollutants, the chart becomes a mass of points.
+st.markdown("#### Attempt 2: Scatter Plot of All Pollutants Over Time")
+all_in_one_scatter = alt.Chart(long_df).mark_circle(size=40).encode(
+    x=alt.X('datetime:O', title='Date and Time'),
+    y=alt.Y('Concentration:Q', title='Concentration'),
+    color=alt.Color('Pollutant:N', legend=alt.Legend(title='Pollutant')),
+    tooltip=['datetime', 'Pollutant', 'Concentration']
+).properties(
+    width=700,
+    height=400,
+    title="Scatter Plot with All Pollutants"
+)
+st.altair_chart(all_in_one_scatter, use_container_width=True)
+
 st.markdown("""
-Early Prototype:
-Trying a line chart with multiple pollutants:
-This code was functional but visually cluttered.
+*This scatter plot presents all pollutants simultaneously as well. While we can see 
+some variance in concentration over time, the chart is noisy and doesn't direct the user 
+to any immediate insights. It's a good reminder that "more data on one chart" 
+does not always mean "more understanding."*
+""")
+
+st.markdown("#### Attempt 3: Bar Chart of All Pollutants at a Single Timestamp")
+first_time = df_air_quality['datetime'].iloc[0]
+single_point_data = long_df[long_df['datetime'] == first_time]
+
+all_in_one_bar = alt.Chart(single_point_data).mark_bar().encode(
+    x=alt.X('Pollutant:N', sort=None, title='Pollutant'),
+    y=alt.Y('Concentration:Q', title='Concentration'),
+    tooltip=['Pollutant', 'Concentration']
+).properties(
+    width=700,
+    height=400,
+    title=f"Bar Chart at {first_time}"
+)
+st.altair_chart(all_in_one_bar, use_container_width=True)
+
+st.markdown("""
+*At a single timestamp, a bar chart of all pollutants quickly becomes unwieldy if 
+we have too many pollutants. Even though it's simpler than a time-series plot, 
+it's still not very informative due to the volume of categories.*
+
+---
+
+These attempts illustrate that while we can technically display all the data 
+at once, it's not always the most practical or insightful approach. 
+This helps us understand which visualizations to refine 
+and which ones to discard or simplify in future iterations.
 """)
-selected_pollutant = "pm10"
-line_chart = alt.Chart(df_air_quality).mark_line(point=True).encode(
-    x=alt.X('datetime:O', sort='x'),
-    y=alt.Y(f'{selected_pollutant}:Q', title=selected_pollutant.upper()),
-    tooltip=['datetime', selected_pollutant]).properties(width=800, height=400)
-st.altair_chart(line_chart, use_container_width=True)
-
-#By leaving this commented code and narrative here, we give our peers insight into 
-#our thought process—this is the "viz for peers" stage, not a polished final product.