Jupyter Widgets

Overview

Jupyter Widgets enable you to use JavaScript visualization libraries like Leaflet, Plotly, and threejs directly from Python.

If you are uisng the Jupyter engine with Quarto this is a great way to incorporate interactivity without learning JavaScript.

Usage

Including Jupyter Widgets within a Quarto document is as easy as including a plot. For example, here is how we embed a Leaflet map:

from ipyleaflet import Map, Marker, basemaps, basemap_to_tiles
m = Map(
  basemap=basemap_to_tiles(
    basemaps.NASAGIBS.ModisTerraTrueColorCR, "2017-04-08"
  ),
  center=(52.204793, 360.121558),
  zoom=4
)
m.add_layer(Marker(location=(52.204793, 360.121558)))
m

Here’s an example of using Plotly:

import plotly.express as px
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length", 
                 color="species", 
                 marginal_y="violin", marginal_x="box", 
                 trendline="ols", template="simple_white")
fig.show()

To learn about available Jupyter Widgets visit https://jupyter.org/widgets.