Day 3: Plotly: Interactive Charts for the Web | Plotly: Interactive Charts for the Web

What You'll Build

Three interactive Plotly charts: an interactive line chart with hover tooltips, an animated bubble chart showing data over time, and a choropleth map — all saved as HTML files you can share.

Section 1 · 10 min

Plotly vs Matplotlib

Matplotlib creates static images. Plotly creates interactive HTML. The choice depends on your output.

bash

$ pip install plotly

pythonplotly_basic.py

import plotly.express as px
import plotly.graph_objects as go
import pandas as pd

# Plotly Express: one-line interactive charts
df = px.data.gapminder()

fig = px.line(
    df.query("country == 'United States'"),
    x="year", y="gdpPercap",
    title="US GDP per Capita Over Time",
    labels={"gdpPercap": "GDP per Capita ($)"}
)
fig.write_html("us_gdp.html")  # shareable HTML file
fig.show()

Section 2 · 15 min

Animated and Multi-Dimensional Charts

pythonanimated.py

import plotly.express as px

df = px.data.gapminder()

# Animated bubble chart: 4 variables at once
fig = px.scatter(
    df,
    x="gdpPercap",
    y="lifeExp",
    size="pop",         # bubble size = population
    color="continent",  # color = continent
    animation_frame="year",  # animate over years
    hover_name="country",
    log_x=True,
    size_max=60,
    title="World Health and Wealth (1952-2007)"
)
fig.write_html("gapminder_animated.html")
fig.show()

Press play on the animation to watch 50 years of global development in 30 seconds. This is the Hans Rosling chart — and Plotly reproduces it in 12 lines of code.

Section 3 · 15 min

Customizing Plotly Layouts

pythoncustom_layout.py

import plotly.graph_objects as go

fig = go.Figure()

# Add traces manually with go (more control than px)
fig.add_trace(go.Scatter(
    x=["Q1", "Q2", "Q3", "Q4"],
    y=[85, 92, 88, 96],
    name="2025",
    line={"color": "#1e3a5f", "width": 3}
))

fig.update_layout(
    title="Quarterly Performance",
    template="plotly_white",
    font={"family": "Inter, sans-serif"},
    showlegend=True
)
fig.write_html("quarterly.html")

What You Learned Today

The difference between Plotly Express (fast, high-level) and graph_objects (full control)
How animation_frame creates animated charts with a play button
How fig.write_html() saves shareable interactive charts as standalone HTML files
When to use Plotly vs matplotlib — interactive web output vs. static publication-quality images

Your Challenge

Go Further on Your Own

Build an interactive bar chart with px.bar() for a real dataset. Add a color dimension using the hue parameter.
Create a dual-axis chart using plotly.graph_objects: one y-axis for revenue, one for units sold, on the same x-axis (date)
Embed a plotly chart in a basic HTML page using fig.to_html(include_plotlyjs='cdn') and a simple HTML file

Day 3 Complete

Nice work. Keep going.

Day 4 is ready when you are.

Continue to Day 4

← Day 2 Course Overview Day 4 →

Course Progress

60%

Want live instruction and hands-on projects? Join the AI bootcamp — 3 days, 5 cities.