Building a Weather Dashboard with Streamlit, Plotly and Python published: true

Building a Weather Dashboard with Streamlit, Plotly and Python

Introduction

Data visualization is essential for understanding information quickly. In this article, I'll show you how to build an interactive Weather Dashboard using Streamlit, Plotly, and the Open-Meteo API — all for free, no API key required — and deploy it to Streamlit Cloud.

Tools Used

• Streamlit — turns Python scripts into interactive web apps
• Plotly — creates beautiful interactive charts
• Open-Meteo API — free real-time weather data
• Streamlit Cloud — free cloud deployment

The Code

import streamlit as st
import plotly.express as px
import pandas as pd
import httpx

st.set_page_config(page_title="Weather Dashboard", page_icon="🌤️", layout="wide")
st.title("🌤️ Weather Dashboard")
st.markdown("Real-time weather data using Open-Meteo API")

cities = {
    "Lima": (-12.0464, -77.0428),
    "New York": (40.7128, -74.0060),
    "London": (51.5074, -0.1278),
    "Tokyo": (35.6762, 139.6503),
    "Paris": (48.8566, 2.3522)
}

selected_cities = st.multiselect("Select cities", list(cities.keys()), default=["Lima", "New York", "London"])

if selected_cities:
    data = []
    for city in selected_cities:
        lat, lon = cities[city]
        url = (
            f"https://api.open-meteo.com/v1/forecast"
            f"?latitude={lat}&longitude={lon}"
            f"&current=temperature_2m,wind_speed_10m,relative_humidity_2m"
            f"&timezone=auto"
        )
        response = httpx.get(url).json()
        current = response["current"]
        data.append({
            "City": city,
            "Temperature (°C)": current["temperature_2m"],
            "Wind Speed (km/h)": current["wind_speed_10m"],
            "Humidity (%)": current["relative_humidity_2m"]
        })

    df = pd.DataFrame(data)

    col1, col2, col3 = st.columns(3)
    for i, row in df.iterrows():
        col = [col1, col2, col3][i % 3]
        col.metric(row["City"], f"{row['Temperature (°C)']}°C", f"Humidity: {row['Humidity (%)']}%")

    st.subheader("Temperature Comparison")
    fig1 = px.bar(df, x="City", y="Temperature (°C)", color="City", title="Temperature by City")
    st.plotly_chart(fig1, use_container_width=True)

    st.subheader("Wind Speed Comparison")
    fig2 = px.bar(df, x="City", y="Wind Speed (km/h)", color="City", title="Wind Speed by City")
    st.plotly_chart(fig2, use_container_width=True)

    st.subheader("Data Table")
    st.dataframe(df, use_container_width=True)

Installation

pip install streamlit plotly pandas httpx
streamlit run app.py

Live Demo

Check out the deployed app here:
Weather Dashboard

Repository

Full source code on GitHub:
streamlit-weather-dashboard

Conclusion

Streamlit and Plotly make it incredibly easy to build and deploy interactive dashboards with Python. In just a few lines of code, we created a real-time weather visualization app available to anyone on the web.

Comments

[Jeremy Guzman]

Reviving this thread because I'm curious — has anyone tried integrating additional features into the Weather Dashboard, like historical data analysis or alerts for extreme weather conditions? Streamlit and Plotly are awesome for visualization, but I'm wondering how far people have taken their dashboards beyond the basics. Would love to hear about any creative twists or challenges you've faced!

[Edgar Diego CHARA APAZA]

Me parece una excelente forma de mostrar cómo Python puede usarse para crear dashboards interactivos de manera sencilla y práctica. La combinación de Streamlit, Plotly y Open-Meteo es muy útil porque permite visualizar datos meteorológicos en tiempo real sin necesidad de una API key. Además, el ejemplo es claro, fácil de seguir y muestra cómo comparar temperatura, humedad y velocidad del viento entre diferentes ciudades. También es un buen aporte para quienes están aprendiendo visualización de datos y despliegue de aplicaciones en la nube con Streamlit Cloud.