Every chart you have made so far is dead.

You save it as a PNG. You look at it. You wonder what that one outlier point is. You squint at the axis. You cannot zoom in. You cannot click anything. You cannot hover to see exact values.

You make a new chart with different settings. Save again. Look again.

This loop is fine for quick exploration. It becomes painful when you have a complex dataset with thousands of points and patterns hiding at every zoom level.

Plotly makes charts that are alive. Hover over any point and the exact values appear. Click a legend item to hide that group. Zoom into a region. Pan across a timeline. Select a subset of points. Export as PNG with one click. All of this in the browser, in Jupyter, or in a Streamlit app.

The learning curve is minimal. The payoff is immediate.

Install and Import

pip install plotly

import plotly.express as px
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd
import numpy as np

Two interfaces. plotly.express (px) is the fast, high-level interface. One line per chart. plotly.graph_objects (go) is the low-level interface for full control and custom layouts. You will use px for most things and go when px cannot do what you need.

Your First Interactive Chart in One Line

df = px.data.gapminder().query("year == 2007")

fig = px.scatter(
    df,
    x="gdpPercap",
    y="lifeExp",
    size="pop",
    color="continent",
    hover_name="country",
    log_x=True,
    size_max=60,
    title="GDP Per Capita vs Life Expectancy (2007)"
)

fig.show()
fig.write_html("gapminder.html")

Run this. Hover over any bubble. The country name appears with exact values. Click a continent in the legend to hide it. Double-click to isolate it. Zoom into a region. This is the Hans Rosling bubble chart, made interactive in eight lines.

hover_name="country" sets what appears as the bold title in the tooltip. size="pop" scales bubble size by population. log_x=True uses a logarithmic x-axis because GDP per capita spans several orders of magnitude.

fig.write_html("gapminder.html") saves a fully self-contained HTML file. Send it to anyone. It works in any browser. No Python needed on their machine.

Line Charts: Time Series That You Can Actually Explore

stocks = px.data.stocks()

fig = px.line(
    stocks,
    x="date",
    y=["GOOG", "AAPL", "AMZN", "FB"],
    title="Stock Prices Over Time",
    labels={"value": "Price (USD)", "variable": "Stock"},
    template="plotly_dark"
)

fig.update_layout(
    hovermode="x unified",
    legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1)
)

fig.show()
fig.write_html("stocks.html")

hovermode="x unified" shows all four stock values in one tooltip when you hover over any point on the timeline. Click and drag to zoom into a date range. Double-click to zoom back out. The range selector appears automatically in the x-axis.

template="plotly_dark" applies a dark theme. Other options: "plotly_white", "ggplot2", "seaborn", "simple_white".

Bar Charts With Animation

gapminder = px.data.gapminder()

fig = px.bar(
    gapminder.query("continent == 'Asia'"),
    x="country",
    y="gdpPercap",
    animation_frame="year",
    animation_group="country",
    color="lifeExp",
    color_continuous_scale="Viridis",
    range_y=[0, 50000],
    title="Asian Countries GDP Over Time",
    labels={"gdpPercap": "GDP Per Capita", "lifeExp": "Life Expectancy"}
)

fig.update_layout(xaxis_tickangle=-45)
fig.show()
fig.write_html("animated_bars.html")

Press play. Watch the bars grow and change color as years advance from 1952 to 2007. This is one line of data, one chart, and it tells a fifty-year story.

animation_frame="year" is the only argument needed to add animation. Plotly handles the rest.

Distribution: Histogram + Box in One Chart

tips = px.data.tips()

fig = px.histogram(
    tips,
    x="total_bill",
    color="time",
    marginal="box",
    hover_data=tips.columns,
    barmode="overlay",
    opacity=0.7,
    nbins=30,
    title="Bill Distribution: Lunch vs Dinner",
    template="plotly_dark"
)

fig.show()

marginal="box" adds a box plot above the histogram for the same data. Hover over the histogram bars to see exact counts. Hover over the box plot to see quartile values. Two charts, one function call, fully interactive.

Other marginal options: "violin", "rug" (tiny vertical lines for each data point), "histogram" (sideways histogram).

Heatmaps With Custom Hover

np.random.seed(42)
months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
          "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
products = ["Laptop", "Phone", "Tablet", "Headphones", "Watch"]

sales_data = np.random.randint(50, 500, size=(5, 12))
df_heat = pd.DataFrame(sales_data, index=products, columns=months)

fig = px.imshow(
    df_heat,
    text_auto=True,
    color_continuous_scale="Blues",
    title="Monthly Sales by Product",
    labels=dict(color="Units Sold"),
    aspect="auto"
)

fig.update_xaxes(side="top")
fig.show()
fig.write_html("heatmap.html")

text_auto=True writes the values inside each cell automatically. Hover to see exact values. Color encodes magnitude. Every cell is interactive.

Scatter Plots With Selection

iris = px.data.iris()

fig = px.scatter(
    iris,
    x="sepal_width",
    y="sepal_length",
    color="species",
    symbol="species",
    size="petal_length",
    hover_data=["petal_width"],
    title="Iris Dataset: Sepal Dimensions",
    template="plotly_dark"
)

fig.update_traces(marker=dict(opacity=0.8, line=dict(width=1, color="white")))
fig.show()

In the browser, drag to select a region of points. They highlight. You can see which species cluster where. This kind of exploration is impossible with static charts.

Subplots: Multiple Charts in One Figure

titanic = px.data.tips()

fig = make_subplots(
    rows=2, cols=2,
    subplot_titles=["Bill Distribution", "Tips by Day",
                    "Bill vs Tip", "Smoker vs Non-Smoker"],
    vertical_spacing=0.12
)

fig.add_trace(
    go.Histogram(x=tips["total_bill"], nbinsx=30, marker_color="steelblue", name="Bill"),
    row=1, col=1
)

fig.add_trace(
    go.Box(x=tips["day"], y=tips["tip"], marker_color="coral", name="Tip by Day"),
    row=1, col=2
)

fig.add_trace(
    go.Scatter(x=tips["total_bill"], y=tips["tip"], mode="markers",
               marker=dict(color="mediumseagreen", opacity=0.6, size=6), name="Bill vs Tip"),
    row=2, col=1
)

smoker_data = tips.groupby("smoker")["total_bill"].mean().reset_index()
fig.add_trace(
    go.Bar(x=smoker_data["smoker"], y=smoker_data["total_bill"],
           marker_color=["coral", "steelblue"], name="Avg Bill"),
    row=2, col=2
)

fig.update_layout(
    height=700,
    title_text="Restaurant Tips Analysis",
    title_font_size=18,
    showlegend=False,
    template="plotly_dark"
)

fig.show()
fig.write_html("dashboard.html")

Four charts, one figure. Every chart is independently interactive. Hover, zoom, pan on each one separately. The HTML file you save is a complete interactive dashboard.

Choropleth Map: Geographic Data

country_data = px.data.gapminder().query("year == 2007")[["country", "lifeExp", "iso_alpha"]]

fig = px.choropleth(
    country_data,
    locations="iso_alpha",
    color="lifeExp",
    hover_name="country",
    color_continuous_scale="RdYlGn",
    range_color=[40, 85],
    title="Life Expectancy by Country (2007)",
    template="plotly_dark"
)

fig.update_layout(coloraxis_colorbar=dict(title="Life Expectancy"))
fig.show()
fig.write_html("world_map.html")

A world map with every country colored by life expectancy. Hover any country for its name and value. Zoom into any region. This is geographic data made useful in six lines.

Saving Your Work

fig.write_html("chart.html")           # full interactive HTML, shareable
fig.write_image("chart.png")           # static PNG (needs kaleido: pip install kaleido)
fig.write_image("chart.pdf")           # PDF for reports
fig.to_json()                          # JSON representation of the figure

HTML is the most useful for sharing. The recipient gets the full interactive experience. Works in email, Slack, a portfolio site, anywhere.

px vs go: When to Use Each

Use px when: you want a chart fast with minimal code. It handles most common chart types. The data fits naturally into a DataFrame.

Use go when: you need custom layout, combining multiple trace types, fine control over colors and styling, or charts px cannot produce.

A practical rule: start with px. If it cannot do what you need, switch to go for that specific trace or add go traces to an existing px figure.

fig = px.scatter(df, x="x", y="y", color="category")

fig.add_trace(go.Scatter(
    x=[df["x"].mean()],
    y=[df["y"].mean()],
    mode="markers+text",
    marker=dict(size=15, color="red", symbol="star"),
    text=["Mean"],
    textposition="top center",
    name="Mean Point"
))

fig.show()

Start with px, annotate with go. Best of both.

A Resource Worth Knowing

Plotly has one of the best official documentation sites in the Python ecosystem. plotly.com/python has a chart gallery with working code for every chart type including maps, 3D charts, financial charts, and scientific plots. Every example is runnable. When you know what you want to make, start there.

Adam Schroeder runs a YouTube channel and blog called "Charming Data" dedicated entirely to Plotly and Dash. His tutorials at charmingdata.com go from basic Plotly to full production dashboards. One of the most referenced Plotly learning resources in the data community. Search "Charming Data Plotly" and his channel appears immediately.

Try This

Create plotly_practice.py.

This one has three parts and each part pushes further.

Part 1: Animated Story

Use px.data.gapminder(). Build an animated scatter plot showing all countries over time. X axis: GDP per capita (log scale). Y axis: life expectancy. Bubble size: population. Color: continent. Add a title and proper labels. Save as world_story.html.

Part 2: Interactive Dashboard

Use the Titanic dataset loaded from Seaborn or Kaggle. Build a 2x2 subplot figure using make_subplots and go traces.

Top left: histogram of passenger ages colored by survival.
Top right: box plot of fares by passenger class.
Bottom left: scatter plot of age vs fare colored by survival.
Bottom right: bar chart of survival count by sex.

Dark theme. Save as titanic_dashboard.html.

Part 3: Your Own Data

Create a dataset of your choice. At least 50 rows. At least 4 columns. Can be made up or from Kaggle. Build the most informative single chart you can. Use hover data, color, size, or animation to pack as much information as possible into one chart. Save as my_best_chart.html.

The goal of Part 3 is not to follow instructions. It is to make something you would actually want to show someone.

What's Next

You can load data, clean it, filter it, aggregate it, merge it, and now visualize it interactively. One post left in Phase 3: putting all of this together in a full Exploratory Data Analysis workflow on a real dataset. Not practice data. A real dataset with real messiness and real patterns to find.