Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,40 +1,184 @@
-import altair as alt
-import numpy as np
-import pandas as pd
 import streamlit as st
+import pandas as pd
+import plotly.express as px
+import requests
+import numpy as np
+
+st.set_page_config(
+    page_title="Global Technology Education Dashboard",
+    page_icon="🎓",
+    layout="wide"
+)
+
+API_URL = "https://data360api.worldbank.org/data360/data?DATABASE_ID=WB_EDSTATS&INDICATOR=WB_EDSTATS_UIS_FOSGP_5T8_F500600700&skip=0"
+
+@st.cache_data(ttl=86400)
+def load_data():
+    response = requests.get(API_URL, timeout=30)
+    response.raise_for_status()
+
+    data = response.json()
+
+    df = pd.DataFrame(data["value"])
+
+    df["OBS_VALUE"] = pd.to_numeric(df["OBS_VALUE"], errors="coerce")
+    df["TIME_PERIOD"] = pd.to_numeric(df["TIME_PERIOD"], errors="coerce")
+
+    df = df.dropna(subset=["OBS_VALUE", "TIME_PERIOD"])
+
+    return df
+
+df = load_data()
+
+st.title("🎓 Global Technology Education Dashboard")
+st.caption("Source: World Bank Education Statistics (Auto Updated)")
+
+# Sidebar
+st.sidebar.header("Filters")
+
+countries = sorted(df["REF_AREA"].dropna().unique())
+
+selected_countries = st.sidebar.multiselect(
+    "Select Countries",
+    countries,
+    default=["VNM"] if "VNM" in countries else countries[:3]
+)
+
+year_range = st.sidebar.slider(
+    "Year Range",
+    int(df["TIME_PERIOD"].min()),
+    int(df["TIME_PERIOD"].max()),
+    (
+        int(df["TIME_PERIOD"].min()),
+        int(df["TIME_PERIOD"].max())
+    )
+)
+
+filtered_df = df[
+    (df["TIME_PERIOD"] >= year_range[0]) &
+    (df["TIME_PERIOD"] <= year_range[1])
+]
+
+# KPI Section
+latest_year = filtered_df["TIME_PERIOD"].max()
+
+latest_df = filtered_df[
+    filtered_df["TIME_PERIOD"] == latest_year
+]
+
+global_avg = latest_df["OBS_VALUE"].mean()
+
+top_country = latest_df.loc[
+    latest_df["OBS_VALUE"].idxmax()
+]
+
+col1, col2, col3, col4 = st.columns(4)
+
+col1.metric(
+    "Countries",
+    latest_df["REF_AREA"].nunique()
+)
+
+col2.metric(
+    "Latest Year",
+    int(latest_year)
+)
+
+col3.metric(
+    "Global Average",
+    f"{global_avg:.2f}"
+)
+
+col4.metric(
+    "Top Country",
+    top_country["REF_AREA"]
+)
+
+st.divider()
+
+# Global Trend
+st.subheader("📈 Global Trend")
+
+global_trend = (
+    filtered_df
+    .groupby("TIME_PERIOD")["OBS_VALUE"]
+    .mean()
+    .reset_index()
+)
+
+fig_trend = px.line(
+    global_trend,
+    x="TIME_PERIOD",
+    y="OBS_VALUE",
+    markers=True,
+    title="Average Technology Education Indicator Over Time"
+)
+
+st.plotly_chart(fig_trend, use_container_width=True)
+
+# Country Comparison
+st.subheader("🌎 Country Comparison")
+
+compare_df = filtered_df[
+    filtered_df["REF_AREA"].isin(selected_countries)
+]
+
+fig_compare = px.line(
+    compare_df,
+    x="TIME_PERIOD",
+    y="OBS_VALUE",
+    color="REF_AREA",
+    markers=True
+)
+
+st.plotly_chart(fig_compare, use_container_width=True)
+
+# Top Countries
+st.subheader("🏆 Top 20 Countries")
+
+top20 = (
+    latest_df
+    .sort_values("OBS_VALUE", ascending=False)
+    .head(20)
+)
+
+fig_top = px.bar(
+    top20,
+    x="OBS_VALUE",
+    y="REF_AREA",
+    orientation="h"
+)
+
+st.plotly_chart(fig_top, use_container_width=True)
+
+# Distribution
+st.subheader("📊 Distribution")
+
+fig_hist = px.histogram(
+    latest_df,
+    x="OBS_VALUE",
+    nbins=30
+)
+
+st.plotly_chart(fig_hist, use_container_width=True)
+
+# Data Explorer
+st.subheader("📋 Data Explorer")
+
+st.dataframe(
+    filtered_df.sort_values(
+        ["TIME_PERIOD", "REF_AREA"],
+        ascending=[False, True]
+    ),
+    use_container_width=True
+)
+
+# Download CSV
+csv = filtered_df.to_csv(index=False)
 
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+st.download_button(
+    label="⬇ Download CSV",
+    data=csv,
+    file_name="technology_education_dashboard.csv",
+    mime="text/csv"
+)