Topolearn

Learn Plotly

Interactive, web-ready charts in Python with Plotly Express and graph objects

18 lessons · 4 hours · 4 levels · covers Plotly 7.1

Plotly is a Python graphing library that produces interactive charts rendered by the plotly.js JavaScript engine: hover tooltips, zoom, pan and legend toggling work out of the box in notebooks, HTML files and web apps. Plotly Express builds most charts from a DataFrame in one line, while graph objects give full control over every trace and layout property.

Sign in free to track progressOfficial docs ↗

Before you start

Plotly builds on these; the tree links to the exact lessons you need.

PythonEssentials levelpandasEssentials level

How deep do you want to go?

1. EssentialsRead and write simple code, do the everyday basics6 lessons · 1 hour in total
2. PracticalUse it productively at work, with the usual idioms12 lessons · 2 hours in total
3. AdvancedThe less common features, performance and trade-offs15 lessons · 3 hours in total
4. ExpertInternals and the edge cases experts know18 lessons · 4 hours in total

The Plotly tree

PlotlyThe figure: data, layout and plotly.jsThe figure: data,layout and plotly.jsPlotly Express: charts from a DataFramePlotly Express: chartsfrom a DataFrameDistributions and part-of-whole chartsDistributions andpart-of-whole chartsColor, symbols, facets and hover dataColor, symbols,facets and hover dataUpdating layout, axes and legendsUpdating layout, axesand legendsShowing and exporting figuresShowing andexporting figuresGraph objects: building figures trace by traceGraph objects:building figures tra…Styling traces and hover templatesStyling traces andhover templatesSubplots and secondary y axesSubplots andsecondary y axesReference lines, shapes and annotationsReference lines,shapes and annotat…Animated charts with framesAnimated charts withframesMaps: choropleths and point mapsMaps: choroplethsand point mapsDictionariesDictionariesDataFrameDataFrameContext managers and withContext managersand withTesting with pytest and unittestTesting with pytestand unittest
Essentials and Practical shown (12 of 18 lessons); the full list is below. Click a lesson to read it.

All 18 lessons, in order

Figures and Plotly Express

  1. The figure: data, layout and plotly.js · Essentials · 10 min

    Every Plotly chart is a figure made of a list of traces (data) and a layout, serialized to JSON and drawn by plotly.js.

  2. Plotly Express: charts from a DataFrame · Essentials · 10 min

    Create scatter, line and bar charts with one px call by mapping DataFrame columns to x, y and other arguments.

  3. Distributions and part-of-whole charts · Essentials · 10 min

    Use px.histogram, box, violin, strip and ecdf for distributions, and pie, sunburst and treemap for parts of a whole.

  4. Color, symbols, facets and hover data · Essentials · 10 min

    Map more columns to color, symbol and size, split charts into facet panels, and choose what the hover tooltip shows.

Customizing figures

  1. Updating layout, axes and legends · Essentials · 10 min

    Change titles, axis ranges and formats, legends, margins and size with update_layout, update_xaxes and update_yaxes.

  2. Styling traces and hover templates · Practical · 12 min

    Change trace properties in bulk with update_traces and selectors, and write custom tooltips with hovertemplate.

  3. Reference lines, shapes and annotations · Practical · 10 min

    Highlight thresholds, periods and points with add_hline, add_vrect, add_shape and add_annotation.

  4. Templates and theming · Advanced · 12 min

    Apply built-in templates, create a custom house template, and set it as the default for all figures.

Output and integration

  1. Showing and exporting figures · Essentials · 10 min

    Display figures with renderers, save interactive HTML, and export static PNG, SVG or PDF images with Kaleido.

  2. Plotly in apps: Dash, Streamlit and widgets · Advanced · 12 min

    Embed Plotly figures in web apps and notebooks with Dash, Streamlit, FigureWidget or plain HTML and JSON.

Graph objects and subplots

  1. Graph objects: building figures trace by trace · Practical · 12 min

    Construct figures with go.Figure and add_trace for full control over trace types and properties.

  2. Subplots and secondary y axes · Practical · 12 min

    Combine different charts in one figure with make_subplots, including mixed trace types and secondary y axes.

Interactivity and animation

  1. Animated charts with frames · Practical · 12 min

    Animate figures over time with animation_frame in Express, and understand frames, sliders and play buttons.

  2. Maps: choropleths and point maps · Practical · 12 min

    Plot geographic data with choropleth and scatter_geo, and tile-based maps with scatter_map and choropleth_map.

  3. Buttons, sliders, range selectors and events · Advanced · 14 min

    Add in-chart interactivity with updatemenus, sliders, range sliders and selectors, and react to clicks with FigureWidget.

Internals and performance

  1. Performance: WebGL, data size and serialization · Expert · 14 min

    Render hundreds of thousands of points with WebGL traces, shrink figure payloads, and know when to aggregate instead.

  2. Figure JSON, validation and plotly.js internals · Expert · 14 min

    Understand how Python figures map to the plotly.js schema, how defaults are filled in, and how to inspect the fully resolved figure.

  3. Reusable chart builders and testing figures · Expert · 14 min

    Structure plotting code as pure functions that return figures, and test them by asserting on the figure's data and layout.