⚠️The 0.13 release refactored our HTML, so double-check your custom CSS rules!⚠️

Interactive data visualizations

Interactive data visualizations#

Jupyter Notebook has support for many kinds of interactive outputs, including the ipywidgets ecosystem as well as many interactive visualization libraries. These are supported in Jupyter Book, with the right configuration. This page has a few common examples.

First off, we’ll download a little bit of data and show its structure:

import plotly.express as px
data = px.data.iris()
sepal_length sepal_width petal_length petal_width species species_id
0 5.1 3.5 1.4 0.2 setosa 1
1 4.9 3.0 1.4 0.2 setosa 1
2 4.7 3.2 1.3 0.2 setosa 1
3 4.6 3.1 1.5 0.2 setosa 1
4 5.0 3.6 1.4 0.2 setosa 1


Interactive outputs will work under the assumption that the outputs they produce have self-contained HTML that works without requiring any external dependencies to load. See the Altair installation instructions to get set up with Altair. Below is some example output.

import altair as alt


Plotly is another interactive plotting library that provides a high-level API for visualization. See the Plotly JupyterLab documentation to get started with Plotly in the notebook.

Below is some example output.


For these plots to show, it may be necessary to load require.js, in your _config.yml:

    - https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js


Including plotly plots in a Jupyter Book page is currently not compatible with the dollarmath syntax extension (mathematical notation written between two “$” characters). If you are trying to include both plotly plots and mathematical notation within the same page, and finding that plotly plots are not being rendered, this may be the cause. Try removing all use of the dollarmath syntax within the page and rebuilding the book.

import plotly.io as pio
import plotly.express as px
import plotly.offline as py

df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species", size="sepal_length")