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.