DEV Community

Cover image for Draw Interactive Tree Map with Jupyter Dash Only 2lines

Draw Interactive Tree Map with Jupyter Dash Only 2lines

kojikanao profile image Koji (he/him) ・1 min read

In this post, I will show you how to draw tree-map with a sample dataset on Google Colab

GitHub logo plotly / jupyter-dash

Develop Dash apps in the Jupyter Notebook and JupyterLab

Jupyter Dash


This library makes it easy to develop Plotly Dash apps interactively from within Jupyter environments (e.g. classic Notebook, JupyterLab, Visual Studio Code notebooks, nteract, PyCharm notebooks, etc.).

jupterlab example

See the notebooks/getting_started.ipynb for more information and example usage.


You can install the JupyterDash Python package using pip...

$ pip install jupyter-dash

or conda

$ conda install -c conda-forge -c plotly jupyter-dash

JupyterLab support

When used in JupyterLab, JupyterDash depends on the jupyterlab-dash JupyterLab extension, which requires JupyterLab version 2.0 or above.

This extension is included with the Python package, but in order to activate it JupyterLab must be rebuilt. JupyterLab should automatically produce a popup dialog asking for permission to rebuild, but the rebuild can also be performed manually from the command line using:

$ jupyter lab build

To check that the extension is installed properly, call jupyter labextension list.

Colab support

As of version 0.3.0, JupyterDash works…

Step1 Install packages

!pip install jupyter_dash
!pip install --upgrade plotly 
Enter fullscreen mode Exit fullscreen mode

Step2 Import packages

import dash 
from jupyter_dash import JupyterDash 
import dash_core_components as dcc 
import dash_html_components as html 
import as px
from dash.dependencies import Input, Output
Enter fullscreen mode Exit fullscreen mode

Step3 Load dataset and draw tree-map

gapminder = # load data
gapminder.head() # display data

# tree-map
gapminder['board'] = 'world'
px.treemap(gapminder, path=['board', 'year', 'country'], values='pop')
Enter fullscreen mode Exit fullscreen mode

You will see the following
Alt Text

Alt Text

Discussion (0)

Editor guide