refactor: replace matplotlib with plotly for interactive charts

Author: indrasuhyar

Homepage.py

@@ -1,7 +1,8 @@
 import time
 
-import matplotlib.pyplot as plt
 import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
 import streamlit as st
 from google.cloud import bigquery
 from google.oauth2 import service_account
@@ -339,11 +340,17 @@ def compute_product_price_sensitivity(
 with left_col:
     st.subheader("Total Product Supplied")
 
-    fig, ax = plt.subplots(figsize=(7, 4))
-    ax.plot(filtered_total["week"], filtered_total["total_supply"])
-    ax.set_xlabel("Week")
-    ax.set_ylabel("Total Product Supplied")
-    st.pyplot(fig)
+    fig = px.line(
+        filtered_total,
+        x="week",
+        y="total_supply",
+        labels={"week": "Week", "total_supply": "Total Product Supplied"},
+    )
+    fig.update_layout(hovermode="x unified")
+    fig.update_traces(
+        hovertemplate="<b>%{x|%b %d, %Y}</b><br>Total Supply: %{y:,.0f}<extra></extra>"
+    )
+    st.plotly_chart(fig, use_container_width=True)
 
     with st.expander("Show total supply data table"):
         total_display = filtered_total.sort_values("week", ascending=False).copy()
@@ -360,15 +367,22 @@ def compute_product_price_sensitivity(
             filtered_product["product_name"].isin(selected_products)
         ].copy()
 
-        fig2, ax2 = plt.subplots(figsize=(7, 4))
-        for product_name in selected_products:
-            temp = product_plot_df[product_plot_df["product_name"] == product_name]
-            ax2.plot(temp["week"], temp["product_supplied"], label=product_name)
-
-        ax2.set_xlabel("Week")
-        ax2.set_ylabel("Product Supplied")
-        ax2.legend()
-        st.pyplot(fig2)
+        fig2 = px.line(
+            product_plot_df,
+            x="week",
+            y="product_supplied",
+            color="product_name",
+            labels={
+                "week": "Week",
+                "product_supplied": "Product Supplied",
+                "product_name": "Product",
+            },
+        )
+        fig2.update_layout(hovermode="x unified")
+        fig2.update_traces(
+            hovertemplate="<b>%{fullData.name}</b><br>%{x|%b %d, %Y}: %{y:,.0f}<extra></extra>"
+        )
+        st.plotly_chart(fig2, use_container_width=True)
 
         with st.expander("Show product-level data table"):
             product_display = product_plot_df.sort_values(
@@ -409,15 +423,22 @@ def compute_product_price_sensitivity(
         "abs_correlation", ascending=True
     )
 
-    fig3, ax3 = plt.subplots(figsize=(6, 3.5))
-    ax3.barh(
-        chart_df["product_name"],
-        chart_df["abs_correlation"],
-        color="darkorange",
+    fig3 = px.bar(
+        chart_df,
+        x="abs_correlation",
+        y="product_name",
+        orientation="h",
+        labels={
+            "abs_correlation": "Absolute correlation with WTI price",
+            "product_name": "Product",
+        },
+        color_discrete_sequence=["darkorange"],
+    )
+    fig3.update_layout(showlegend=False)
+    fig3.update_traces(
+        hovertemplate="<b>%{y}</b><br>Correlation: %{x:.4f}<extra></extra>"
     )
-    ax3.set_xlabel("Absolute correlation with WTI price")
-    ax3.set_ylabel("Product")
-    st.pyplot(fig3)
+    st.plotly_chart(fig3, use_container_width=True)
 
     with st.expander("Show product sensitivity table"):
         st.dataframe(

pages/2_WTI_Price.py

@@ -1,7 +1,8 @@
 import time
 
-import matplotlib.pyplot as plt
 import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
 import streamlit as st
 from google.cloud import bigquery
 from google.oauth2 import service_account
@@ -262,27 +263,41 @@ def find_top_highest_years(yearly_avg: pd.DataFrame, top_n: int) -> set[int]:
 with left_col:
     st.subheader("WTI Price Over Time (Weekly)")
 
-    fig, ax = plt.subplots(figsize=(7, 4))
-    ax.plot(filtered_wti["week"], filtered_wti["wti_price"], label="WTI price")
-    ax.plot(
-        filtered_wti["week"],
-        filtered_wti["wti_ma"],
-        label=f"{ma_window}-week moving average",
+    fig = go.Figure()
+    fig.add_trace(go.Scatter(
+        x=filtered_wti["week"], y=filtered_wti["wti_price"],
+        name="WTI Price", mode="lines",
+        hovertemplate="WTI Price: $%{y:.2f}<extra></extra>",
+    ))
+    fig.add_trace(go.Scatter(
+        x=filtered_wti["week"], y=filtered_wti["wti_ma"],
+        name=f"{ma_window}-Week Moving Average", mode="lines",
+        hovertemplate=f"{ma_window}-Week Avg: $%{{y:.2f}}<extra></extra>",
+    ))
+    fig.update_layout(
+        xaxis_title="Week",
+        yaxis_title="WTI Price ($/barrel)",
+        hovermode="x unified",
+        hoverlabel=dict(namelength=-1),
     )
-    ax.set_xlabel("Week")
-    ax.set_ylabel("WTI price ($/barrel)")
-    ax.legend()
-    st.pyplot(fig)
+    st.plotly_chart(fig, use_container_width=True)
 
 with right_col:
     st.subheader("Weekly Change in WTI Price")
 
-    fig2, ax2 = plt.subplots(figsize=(7, 4))
-    ax2.plot(filtered_wti["week"], filtered_wti["weekly_change"])
-    ax2.axhline(0, color="gray", linewidth=1)
-    ax2.set_xlabel("Week")
-    ax2.set_ylabel("Weekly change ($/barrel)")
-    st.pyplot(fig2)
+    fig2 = go.Figure()
+    fig2.add_trace(go.Scatter(
+        x=filtered_wti["week"], y=filtered_wti["weekly_change"],
+        mode="lines", name="Weekly Change",
+        hovertemplate="<b>%{x|%b %d, %Y}</b><br>Change: $%{y:.2f}<extra></extra>",
+    ))
+    fig2.add_hline(y=0, line_color="gray", line_width=1)
+    fig2.update_layout(
+        xaxis_title="Week",
+        yaxis_title="Weekly Change ($/barrel)",
+        hovermode="x unified",
+    )
+    st.plotly_chart(fig2, use_container_width=True)
 
 st.divider()
 st.subheader("Real-Time Interpretation")
@@ -302,20 +317,27 @@ def find_top_highest_years(yearly_avg: pd.DataFrame, top_n: int) -> set[int]:
 
 highlight_years = find_top_highest_years(yearly_avg, TOP_HIGHLIGHT_YEARS)
 
-bar_colors = [
-    YEAR_BAR_HIGHLIGHT_COLOR if year in highlight_years else YEAR_BAR_DEFAULT_COLOR
-    for year in yearly_avg["year"]
-]
+yearly_avg["color"] = yearly_avg["year"].apply(
+    lambda y: "Top 5" if y in highlight_years else "Other"
+)
 
-fig3, ax3 = plt.subplots(figsize=(8, 5))
-ax3.barh(
-    yearly_avg["year"].astype(str),
-    yearly_avg["avg_wti_price"],
-    color=bar_colors,
+fig3 = px.bar(
+    yearly_avg,
+    x="avg_wti_price",
+    y=yearly_avg["year"].astype(str),
+    orientation="h",
+    color="color",
+    color_discrete_map={"Top 5": "darkorange", "Other": "steelblue"},
+    labels={"avg_wti_price": "Average WTI Price ($/barrel)", "y": "Year"},
+)
+fig3.update_layout(
+    showlegend=False,
+    hoverlabel=dict(namelength=-1),
+)
+fig3.update_traces(
+    hovertemplate="<b>%{y}</b><br>Avg WTI Price: $%{x:.2f}<extra></extra>"
 )
-ax3.set_xlabel("Average WTI price ($/barrel)")
-ax3.set_ylabel("Year")
-st.pyplot(fig3)
+st.plotly_chart(fig3, use_container_width=True)
 
 if highlight_years:
     top_year_text = ", ".join(

pages/3_Event_Context.py

@@ -1,7 +1,8 @@
 import time
 
-import matplotlib.pyplot as plt
 import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
 import streamlit as st
 from google.cloud import bigquery
 from google.oauth2 import service_account
@@ -269,11 +270,17 @@ def build_anomaly_table(merged_df: pd.DataFrame, top_n: int) -> pd.DataFrame:
 with left_col:
     st.subheader("Weekly Event Count")
 
-    fig1, ax1 = plt.subplots(figsize=(7, 4))
-    ax1.plot(filtered["week"], filtered["event_count"])
-    ax1.set_xlabel("Week")
-    ax1.set_ylabel("Event count")
-    st.pyplot(fig1)
+    fig1 = px.line(
+        filtered,
+        x="week",
+        y="event_count",
+        labels={"week": "Week", "event_count": "Event Count"},
+    )
+    fig1.update_layout(hovermode="x unified")
+    fig1.update_traces(
+        hovertemplate="<b>%{x|%b %d, %Y}</b><br>Events: %{y:,.0f}<extra></extra>"
+    )
+    st.plotly_chart(fig1, use_container_width=True)
 
     st.caption(
         "This chart shows how many GDELT-recorded events occurred each week. "
@@ -284,12 +291,19 @@ def build_anomaly_table(merged_df: pd.DataFrame, top_n: int) -> pd.DataFrame:
 with right_col:
     st.subheader("Average Event Tone")
 
-    fig2, ax2 = plt.subplots(figsize=(7, 4))
-    ax2.plot(filtered["week"], filtered["avg_tone"])
-    ax2.axhline(0, color="gray", linewidth=1)
-    ax2.set_xlabel("Week")
-    ax2.set_ylabel("Average tone")
-    st.pyplot(fig2)
+    fig2 = go.Figure()
+    fig2.add_trace(go.Scatter(
+        x=filtered["week"], y=filtered["avg_tone"],
+        mode="lines", name="Average Tone",
+        hovertemplate="<b>%{x|%b %d, %Y}</b><br>Avg Tone: %{y:.2f}<extra></extra>",
+    ))
+    fig2.add_hline(y=0, line_color="gray", line_width=1)
+    fig2.update_layout(
+        xaxis_title="Week",
+        yaxis_title="Average Tone",
+        hovermode="x unified",
+    )
+    st.plotly_chart(fig2, use_container_width=True)
 
     st.caption(
         "This chart tracks the average tone of events in each week. "
@@ -300,24 +314,33 @@ def build_anomaly_table(merged_df: pd.DataFrame, top_n: int) -> pd.DataFrame:
 st.divider()
 st.subheader("Weekly Event Composition")
 
-fig3, ax3 = plt.subplots(figsize=(10, 4.5))
-ax3.stackplot(
-    filtered["week"],
-    filtered["verbal_cooperation_count"],
-    filtered["material_cooperation_count"],
-    filtered["verbal_conflict_count"],
-    filtered["material_conflict_count"],
-    labels=[
-        "Verbal cooperation",
-        "Material cooperation",
-        "Verbal conflict",
-        "Material conflict",
-    ],
+fig3 = go.Figure()
+fig3.add_trace(go.Scatter(
+    x=filtered["week"], y=filtered["verbal_cooperation_count"],
+    name="Verbal Cooperation", stackgroup="one", mode="lines",
+    hovertemplate="Verbal Cooperation: %{y:,.0f}<extra></extra>",
+))
+fig3.add_trace(go.Scatter(
+    x=filtered["week"], y=filtered["material_cooperation_count"],
+    name="Material Cooperation", stackgroup="one", mode="lines",
+    hovertemplate="Material Cooperation: %{y:,.0f}<extra></extra>",
+))
+fig3.add_trace(go.Scatter(
+    x=filtered["week"], y=filtered["verbal_conflict_count"],
+    name="Verbal Conflict", stackgroup="one", mode="lines",
+    hovertemplate="Verbal Conflict: %{y:,.0f}<extra></extra>",
+))
+fig3.add_trace(go.Scatter(
+    x=filtered["week"], y=filtered["material_conflict_count"],
+    name="Material Conflict", stackgroup="one", mode="lines",
+    hovertemplate="Material Conflict: %{y:,.0f}<extra></extra>",
+))
+fig3.update_layout(
+    xaxis_title="Week",
+    yaxis_title="Event Count",
+    hovermode="x unified",
 )
-ax3.set_xlabel("Week")
-ax3.set_ylabel("Event count")
-ax3.legend(loc="upper left")
-st.pyplot(fig3)
+st.plotly_chart(fig3, use_container_width=True)
 
 st.caption(
     "This stacked chart breaks weekly events into the four broad GDELT classes. "
@@ -351,15 +374,21 @@ def build_anomaly_table(merged_df: pd.DataFrame, top_n: int) -> pd.DataFrame:
     chart_df["week_label"] = chart_df["week"].dt.strftime("%Y-%m-%d")
     chart_df = chart_df.sort_values("combined_shock_score", ascending=True)
 
-    fig4, ax4 = plt.subplots(figsize=(5, 3))
-    ax4.barh(
-        chart_df["week_label"],
-        chart_df["combined_shock_score"],
-        color=ANOMALY_BAR_COLOR,
+    fig4 = px.bar(
+        chart_df,
+        x="combined_shock_score",
+        y="week_label",
+        orientation="h",
+        labels={
+            "combined_shock_score": "Combined Shock Score",
+            "week_label": "Week",
+        },
+        color_discrete_sequence=[ANOMALY_BAR_COLOR],
+    )
+    fig4.update_traces(
+        hovertemplate="<b>Week: %{y}</b><br>Shock Score: %{x:.2f}<extra></extra>"
     )
-    ax4.set_xlabel("Combined shock score")
-    ax4.set_ylabel("Week")
-    st.pyplot(fig4)
+    st.plotly_chart(fig4, use_container_width=True)
 
     st.caption(
         "This chart visualizes the anomaly ranking used to build the table below. "