Interactive Visualization & Dashboards (Plotly & Streamlit)

Learn Plotly for interactive, zoomable charts and Streamlit for turning a Python script into a shareable web dashboard.

Introduction

Matplotlib and Seaborn produce static images — great for reports, but limited the moment someone wants to zoom into a chart or explore it interactively. Plotly fills that gap for individual charts, while Streamlit goes a step further and turns an entire Python script into a shareable, interactive web application in minutes, with no frontend code required.

What You Will Learn

What Plotly solves and how to build an interactive scatter plot with Plotly Express.
What Streamlit solves and how to build a minimal interactive dashboard.
When to reach for a single interactive chart versus a full dashboard app.

Plotly: Interactive Charts

Use case: Plotly builds charts that are interactive by default — hover tooltips, zoom, pan, and toggleable legend entries — and render well both in Jupyter notebooks and on the web. plotly.express is its high-level interface for producing common chart types in a single function call.

pip install plotly

Plotly in Action

import plotly.express as px
import pandas as pd

df = pd.DataFrame({
    'study_hours': [1, 2, 3, 4, 5, 6, 7, 8],
    'exam_score': [52, 58, 63, 70, 75, 82, 88, 91],
    'passed': ['No', 'No', 'No', 'Yes', 'Yes', 'Yes', 'Yes', 'Yes'],
})

fig = px.scatter(
    df,
    x='study_hours',
    y='exam_score',
    color='passed',
    title='Exam Score vs Study Hours',
    labels={'study_hours': 'Study Hours', 'exam_score': 'Exam Score'},
)
fig.write_html('exam_scores.html')
print("Interactive chart saved to exam_scores.html")

Terminal Output

Click Run to see what this code prints.

Notebook vs Standalone Output

Inside a Jupyter notebook, fig.show() renders the chart inline and fully interactive. Outside a notebook, fig.write_html() saves a self-contained HTML file that opens in any browser with the same zoom, pan, and hover behavior.

Streamlit: Instant Web Apps

Use case: Streamlit turns a plain Python script into an interactive web application. Widgets like sliders, dropdowns, and file uploaders are added with single function calls, and the app automatically re-runs top to bottom whenever a user interacts with a widget — no HTML, CSS, or JavaScript required.

pip install streamlit

Streamlit in Action

app.py

import streamlit as st
import pandas as pd

st.title('Sales Explorer')

df = pd.DataFrame({
    'region': ['North', 'South', 'East', 'West'] * 5,
    'sales': [120, 95, 60, 80, 150, 110, 70, 90, 130, 100,
              65, 85, 140, 105, 75, 95, 125, 90, 68, 88],
})

min_sales = st.slider('Minimum sales', 0, 150, 50)
filtered = df[df['sales'] >= min_sales]

st.write(f"Showing {len(filtered)} of {len(df)} rows")
st.dataframe(filtered)
st.bar_chart(filtered.groupby('region')['sales'].sum())

streamlit run app.py

Terminal Output

Click Run to see what this code prints.

The Streamlit Mental Model

Every time a user moves the slider, Streamlit re-runs the entire app.py script top to bottom with the new slider value, then redraws only what changed. This "rerun the script" model is what makes Streamlit feel so simple compared to traditional web frameworks.

When to Use Plotly vs Streamlit

Situation	Reach For
One chart that needs zoom/hover in a notebook or report	Plotly
A full app with multiple charts, filters, and inputs	Streamlit
Sharing a live, clickable dashboard with non-technical stakeholders	Streamlit
Embedding a single interactive chart in an existing web page	Plotly

The two are often combined: Streamlit apps frequently use Plotly charts internally via st.plotly_chart(fig), getting Plotly's interactivity inside a Streamlit-built dashboard layout.

Common Mistakes

Avoid These Mistakes

Running a Streamlit script with "python app.py" instead of "streamlit run app.py" — the former will not start the web server correctly.
Putting expensive computation (like loading a huge CSV) directly in the main script body without caching, causing it to re-run on every widget interaction.
Using Plotly for a static print report where a much lighter Matplotlib image would suffice.

Best Practices

Use @st.cache_data on expensive data-loading functions in Streamlit to avoid redundant recomputation on every rerun.
Prefer plotly.express for common chart types before dropping down to the lower-level plotly.graph_objects API.
Keep Streamlit apps focused — one clear purpose per app tends to be far more usable than a single app trying to do everything.

Frequently Asked Questions

Do I need web development experience to use Streamlit?

No — Streamlit is specifically designed so a plain Python script becomes a web app without any HTML, CSS, or JavaScript knowledge.

Can I deploy a Streamlit app for others to use?

Yes — Streamlit Community Cloud and other hosting options let you deploy an app directly from a GitHub repository.

Is Plotly free to use?

Yes, the core plotly Python library is open-source and free; some companion hosting/enterprise tools from the same company are paid.

Key Takeaways

Plotly produces interactive, zoomable charts for notebooks and the web via plotly.express.
Streamlit turns a plain Python script into a shareable interactive web app, run with "streamlit run app.py".
Plotly and Streamlit are often combined — Plotly charts inside a Streamlit-built dashboard.

Summary

Plotly and Streamlit round out the visualization side of the ecosystem covered so far: static charts with Matplotlib and Seaborn, and interactive charts and full dashboards with Plotly and Streamlit. The next lesson moves into scientific computing and statistics with SciPy and statsmodels.

Lesson 9 Completed

You can build an interactive Plotly chart with plotly.express.
You can build and run a minimal Streamlit dashboard.
You know when to reach for a single chart versus a full app.

Next Lesson →