:sparkles: Add Plotly and interactivity enhancements to dashboard

Integrated Plotly and streamlit-plotly-events for improved data visualization and interactivity in the dashboard. Updated the pyproject.toml and poetry.lock files to include these new dependencies. The electric vehicle data dashboard now features interactive charts and maps, allowing users to click on data points to filter and explore the information more effectively.

app.py

@@ -1,115 +1,134 @@
-# INSTRUCTIONS:
-# 1. Open a "Terminal" by: View --> Terminal OR just the "Terminal" through the hamburger menu
-# 2. run in terminal with: streamlit run app.py
-# 3. click the "Open in Browser" link that pops up OR click on "Ports" and copy the URL
-# 4. Open a Simple Browswer with View --> Command Palette --> Simple Browser: Show
-# 5. use the URL from prior steps as intput into this simple browser
-
-import altair as alt
 import pandas as pd
+import plotly.express as px
 import pydeck as pdk
 import streamlit as st
+from streamlit_plotly_events import plotly_events
 
+# Group 5 Final Project - Part 2 Dashboard
+# Group Members: Nabeel Bashir, Tony An, Devansh Kumar, Jiajun Li
+
+# Streamlit application setup
 st.title('Group 5 Final Project - Part 2 (Dashboard)')
 st.text("Group Members: Nabeel Bashir, Tony An, Devansh Kumar, Jiajun Li")
 
+# Project URL
 st.text("The URL for this app is: https://huggingface.co/spaces/fa24-is445-group5/Final_Project_Part2")
 
+# Load the electric vehicle dataset
 ev_data = pd.read_csv('data/Electric_Vehicle_Population_Data.csv')
 
+# Dashboard introduction
 st.title('Electric Vehicle Population Data Dashboard')
 st.markdown('''Explore the electric vehicle data interactively using this dashboard.
 This dashboard helps experts and stakeholders understand the distribution and characteristics of electric vehicles
 in various counties and cities.''')
 
+# Dashboard usage explanation
 st.markdown('''### How to Use This Dashboard
-To explore the dataset, use the sidebar options to filter by county and make. The filtered dataset is displayed in the 
-table, and corresponding charts will help you explore the distribution of electric vehicle types, their electric ranges, 
-and model years. The map also provides a visualization of the locations of the vehicles in the selected county.
+To explore the dataset, use the global filter options in the sidebar to filter by county and make. These filters will update all the visualizations, providing a focused view of the data.
+
+Alternatively, you can select a specific vehicle make directly in the "Vehicle Count by Make" chart. This selection will link to and update the rest of the visualizations to display data relevant to the selected make.
 
 All charts are interactive. You can click on bars to highlight corresponding data points in other charts, making it easier to discover patterns and relationships.
 
 The map is also interactive; you can zoom in, rotate, and click on points to see additional information about each vehicle.''')
 
+# Extract latitude and longitude from 'Vehicle Location' column
+ev_data[['Longitude', 'Latitude']] = ev_data['Vehicle Location'].str.extract(r'POINT \((-?\d+\.\d+) (-?\d+\.\d+)\)')
+ev_data['Latitude'] = pd.to_numeric(ev_data['Latitude'], errors='coerce')
+ev_data['Longitude'] = pd.to_numeric(ev_data['Longitude'], errors='coerce')
+
+# Sidebar filter options
 county_list = ev_data['County'].unique()
 make_list = ev_data['Make'].unique()
 
 selected_county = st.sidebar.selectbox('Select County', county_list)
 selected_make = st.sidebar.multiselect('Select Make', make_list, default=make_list)
 
+# Filter data based on sidebar selections
 filtered_data = ev_data[(ev_data['County'] == selected_county) & (ev_data['Make'].isin(selected_make))]
 
+# Display filtered data
 st.subheader('Filtered Data')
 st.write(filtered_data)
 
-st.subheader('Distribution of Electric Vehicle Types')
-ev_type_count = filtered_data['Electric Vehicle Type'].value_counts().reset_index()
-ev_type_count.columns = ['Electric Vehicle Type', 'Count']
-
-bar_chart = alt.Chart(ev_type_count).mark_bar().encode(
-    x=alt.X('Electric Vehicle Type', sort='-y', title='Electric Vehicle Type'),
-    y=alt.Y('Count', title='Number of Vehicles'),
-    tooltip=['Electric Vehicle Type', 'Count'],
-    color='Electric Vehicle Type'
-).properties(
-    width=600,
-    height=400,
-    title='Distribution of Electric Vehicle Types in Selected County'
-).interactive()
-
-st.altair_chart(bar_chart)
-
-st.subheader('Electric Range Distribution')
-electric_range_chart = alt.Chart(filtered_data).mark_bar().encode(
-    alt.X('Electric Range', bin=alt.Bin(maxbins=30), title='Electric Range (Miles)'),
-    alt.Y('count()', title='Frequency'),
-    tooltip=['count()'],
-    color=alt.value('steelblue')
-).properties(
-    width=600,
-    height=400,
-    title='Electric Range Distribution in Selected County'
-).interactive()
-
-st.altair_chart(electric_range_chart)
-
-st.subheader('Vehicle Count by Model Year')
-model_year_count = filtered_data['Model Year'].value_counts().reset_index()
-model_year_count.columns = ['Model Year', 'Count']
-
-year_chart = alt.Chart(model_year_count).mark_bar().encode(
-    x=alt.X('Model Year:N', sort='-y', title='Model Year'),
-    y=alt.Y('Count', title='Number of Vehicles'),
-    tooltip=['Model Year', 'Count'],
-    color='Model Year:N'
-).properties(
-    width=600,
-    height=400,
-    title='Number of Vehicles by Model Year'
-).interactive()
-
-st.altair_chart(year_chart)
+# Interactive Bar Chart - Vehicle Count by Make
+st.subheader('Vehicle Count by Make')
+make_counts = filtered_data['Make'].value_counts().reset_index()
+make_counts.columns = ['Make', 'Count']
 
+def create_bar_chart(selected_make=None):
+    # If a make is selected, highlight it in blue, otherwise default to green
+    if selected_make:
+        make_counts['Color'] = make_counts['Make'].apply(
+            lambda x: 'blue' if x == selected_make else 'green'
+        )
+        color_map = make_counts.set_index('Make')['Color']
+    else:
+        color_map = 'green'
+
+    # Create a bar chart showing vehicle count by make
+    chart = px.bar(
+        make_counts,
+        x='Make',
+        y='Count',
+        title="Vehicle Count by Make",
+        labels={'Make': 'Vehicle Make', 'Count': 'Number of Vehicles'},
+        color='Make',
+        color_discrete_map=color_map if isinstance(color_map, dict) else None
+    )
+    chart.update_layout(clickmode='event+select')  # Enable click interactions
+    return chart
+
+# Display the bar chart and capture click data
+bar_chart = create_bar_chart(st.session_state.get('selected_make', None))
+clicked_points = plotly_events(bar_chart, click_event=True, hover_event=False, select_event=False)
+
+# Update the selected make based on user interaction
+if clicked_points:
+    st.session_state['selected_make'] = clicked_points[0]['x']  # Get clicked make
+else:
+    st.session_state['selected_make'] = None
+
+# Display selected make
+selected_make = st.session_state['selected_make']
+if selected_make:
+    st.write(f"Selected Make: {selected_make}")
+
+# Filter data for the line chart based on selected make
+if selected_make:
+    filtered_data = ev_data[ev_data['Make'] == selected_make]
+else:
+    filtered_data = ev_data
+
+# Group data by model year for the filtered data
+model_year_data = filtered_data.groupby('Model Year').size().reset_index(name='Count')
+
+# Create the line chart for model count by year
+st.subheader(f"Number of Vehicles by Model Year for {selected_make if selected_make else 'All Makes'}")
+line_chart = px.line(
+    model_year_data,
+    x='Model Year',
+    y='Count',
+    title=f"Number of Vehicles by Model Year for {selected_make if selected_make else 'All Makes'}",
+    labels={'Model Year': 'Year', 'Count': 'Number of Vehicles'},
+    markers=True
+)
+
+# Display the line chart
+st.plotly_chart(line_chart, use_container_width=True)
+
+# Interactive Map of Vehicle Locations
 st.subheader('Map of Vehicle Locations')
-ev_data[['Longitude', 'Latitude']] = ev_data['Vehicle Location'].str.extract(r'POINT \((-?\d+\.\d+) (-?\d+\.\d+)\)')
-ev_data['Latitude'] = pd.to_numeric(ev_data['Latitude'], errors='coerce')
-ev_data['Longitude'] = pd.to_numeric(ev_data['Longitude'], errors='coerce')
-
-filtered_data[['Longitude', 'Latitude']] = filtered_data['Vehicle Location'].str.extract(r'POINT \((-?\d+\.\d+) (-?\d+\.\d+)\)')
-filtered_data['Latitude'] = pd.to_numeric(filtered_data['Latitude'], errors='coerce')
-filtered_data['Longitude'] = pd.to_numeric(filtered_data['Longitude'], errors='coerce')
-
 filtered_data = filtered_data.dropna(subset=['Latitude', 'Longitude'])
 filtered_data.rename(columns={'Latitude': 'latitude', 'Longitude': 'longitude'}, inplace=True)
-# st.map(filtered_data[['latitude', 'longitude']])
 
+# Create an interactive map using PyDeck
 st.pydeck_chart(pdk.Deck(
-    # map_style='mapbox://styles/mapbox/light-v9',
     initial_view_state=pdk.ViewState(
         latitude=filtered_data['latitude'].mean(),
         longitude=filtered_data['longitude'].mean(),
         zoom=10,
-        # pitch=50,
     ),
     layers=[
         pdk.Layer(
@@ -129,3 +148,13 @@ st.pydeck_chart(pdk.Deck(
         }
     }
 ))
+
+# Contextual datasets
+st.markdown('''### Contextual Datasets
+A potentially useful contextual dataset could be the [Electric Charging Stations Locations](https://afdc.energy.gov/fuels/electricity_locations.html).
+This dataset will provide information about the availability of charging stations in each county, allowing for a deeper
+analysis of the convenience and accessibility of electric vehicles in different regions.''')
+
+# Dataset size comment
+st.markdown('''### Dataset Size
+This dataset is uploaded huggingface repo using Git LFS, so there is no need to revise the plan for hosting this data.''')

poetry.lock

@@ -686,6 +686,21 @@ tests = ["check-manifest", "coverage", "defusedxml", "markdown2", "olefile", "pa
 typing = ["typing-extensions"]
 xmp = ["defusedxml"]
 
+[[package]]
+name = "plotly"
+version = "5.24.1"
+description = "An open-source, interactive data visualization library for Python"
+optional = false
+python-versions = ">=3.8"
+files = [
+    {file = "plotly-5.24.1-py3-none-any.whl", hash = "sha256:f67073a1e637eb0dc3e46324d9d51e2fe76e9727c892dde64ddf1e1b51f29089"},
+    {file = "plotly-5.24.1.tar.gz", hash = "sha256:dbc8ac8339d248a4bcc36e08a5659bacfe1b079390b8953533f4eb22169b4bae"},
+]
+
+[package.dependencies]
+packaging = "*"
+tenacity = ">=6.2.0"
+
 [[package]]
 name = "protobuf"
 version = "5.29.0"
@@ -1039,6 +1054,21 @@ watchdog = {version = ">=2.1.5,<7", markers = "platform_system != \"Darwin\""}
 [package.extras]
 snowflake = ["snowflake-connector-python (>=2.8.0)", "snowflake-snowpark-python[modin] (>=1.17.0)"]
 
+[[package]]
+name = "streamlit-plotly-events"
+version = "0.0.6"
+description = "Plotly chart component for Streamlit that also allows for events to bubble back up to Streamlit."
+optional = false
+python-versions = ">=3.6"
+files = [
+    {file = "streamlit-plotly-events-0.0.6.tar.gz", hash = "sha256:1fe25dbf0e5d803aeb90253be04d7b395f5bcfdf3c654f96ff3c19424e7f9582"},
+    {file = "streamlit_plotly_events-0.0.6-py3-none-any.whl", hash = "sha256:e63fbe3c6a0746fdfce20060fc45ba5cd97805505c332b27372dcbd02c2ede29"},
+]
+
+[package.dependencies]
+plotly = ">=4.14.3"
+streamlit = ">=0.63"
+
 [[package]]
 name = "tenacity"
 version = "9.0.0"
@@ -1183,4 +1213,4 @@ watchmedo = ["PyYAML (>=3.10)"]
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.12"
-content-hash = "bd2d59f3fedd9cab57202c080d3ce049a5ad2a45273c567e6aad87cd58d1ebca"
+content-hash = "6caa9520ca582a0ad3e2e5b651aee6f48bd78d20c6a544eef764c6c8eb5249cd"

pyproject.toml

@@ -12,6 +12,8 @@ streamlit = "^1.40.0"
 altair = "^5.4.1"
 vega-datasets = "^0.9.0"
 pydeck = "^0.9.1"
+plotly = "^5.24.1"
+streamlit-plotly-events = "^0.0.6"
 
 
 [build-system]