app.py

import pandas as pd
import streamlit as st
import altair as alt

# Main title for the app
st.title("Streamlit App for IS445: ID29937")

# Text description with URL
st.text("The URL for this app is: https://huggingface.co/spaces/Shrek29/is445_demo")

# Divider to separate sections
st.divider()

# Header for the scatter plot section
st.header("Scatter Plot of Weather Data from the BFRO Dataset")

source = "https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/bfro_reports_fall2022.csv"
data = pd.read_csv(source).dropna()

# Scatter plot using Altair
scatter = (
    alt.Chart(data).mark_circle().encode(
        alt.X('visibility:Q').title('Visibility'),
        alt.Y('wind_speed:Q').title('Wind Speed'),
        alt.Color('season:N').scale(scheme="set2"),  # Using 'set2' color scheme
        alt.Size('temperature_high:Q'),
        alt.Tooltip(['visibility', 'wind_speed', 'season', 'pressure'])
    ).interactive()
)

st.altair_chart(scatter, use_container_width=True)

# Divider to separate sections
st.divider()

# Header for mixed chart section
st.header("Mixed Chart of Weather Data from the BFRO Dataset")

pts = alt.selection_point(encodings=['x'])
rect = alt.Chart(data).mark_rect().encode(
    alt.X('uv_index:Q').bin().title('UV Index'),
    alt.Y('cloud_cover:Q').bin().title('Cloud Cover'),
    alt.Color('count()').scale(scheme='greens').title('Count of UV Index'),
)

circ = rect.mark_point().encode(
    alt.ColorValue('darkred'),  # Change point color to dark red
    alt.Size('count()').title('Count of Cloud Cover')
).transform_filter(pts)

bar = alt.Chart(data, width=550, height=200).mark_bar().encode(
    x='season:N',
    y='count()',
    color=alt.condition(pts, alt.ColorValue("orange"), alt.ColorValue("grey"))
).add_params(pts)
    
special = alt.vconcat(
    rect + circ,
    bar
).resolve_legend(
    color="independent",
    size="independent"
)

# Display mixed chart
st.altair_chart(special)


st.divider()
st.title("1st Plot Write-UP")
st.write("""
Scatter Plot of Weather Data
The scatter plot visualizes the relationship between visibility and wind speed, with additional encodings for season and temperature. The x-axis represents visibility, while the y-axis shows wind speed, providing insight into how these two weather variables interact. Seasons are encoded using a categorical color scheme (set2), ensuring that each season is visually distinct. The size of the points represents the high temperature, allowing for a multi-dimensional analysis. This design choice effectively highlights clusters and patterns in the data, such as seasonal variations in visibility and wind speed. If I had more time, I would add interactivity to filter by season or temperature range and include annotations to highlight outliers or trends.

""")

st.title("2nd Plot Write-UP")
st.write("""
Mixed Chart of Weather Data
The mixed chart combines a heatmap and a bar chart to provide a comprehensive view of weather data. The heatmap visualizes the relationship between UV index and cloud cover, with the color intensity representing the count of UV index values and circle sizes showing the count of cloud cover. This dual encoding enables a detailed exploration of how these variables correlate. The bar chart complements this by showing the distribution of records across seasons, using distinct colors to emphasize seasonal differences. If I had more time, I would refine the heatmap by adding hover-based tooltips for precise counts and enhance the bar chart with interactive sorting or filtering options to focus on specific seasons or weather conditions.
""")