How to Create a Timeline in Jupyter Notebook

Integrating a javascript based timeline into a Jupyter Notebook

Photo by Vidar Nordli-Mathisen on Unsplash

When dealing with temporal data it is always useful to be able to see the data on a timeline in order to understand it better.

There are some built-in python solutions like this and this. However, I found them not flexible enough. I want to propose another solution that is a bit more complex but gives you much more flexibility. Integrate a really great javascript library (vis.js) that deals with timelines on a general-purpose web application into a Jupyter Notebook (don’t worry it is not as complex as it may sound).

1. Install vis.js timeline:

npm install vis-timeline

2. Generate config for your Jupyter Notebook (If you don’t already have one):

jupyter notebook --generate-config

3. Open for editing the config file, located at ~/.jupyter/jupyter_notebook_config.py (Linux and macOS, on windows it is on equivalent location). Uncomment the line with c.NotebookApp.extra_static_path in the file. Put the path to the installed vis-timeline dist folder, it should be something like this:

c.NotebookApp.extra_static_paths = ['~/node_modules/vis-timeline/dist']

(pay attention that on windows you need to use double backslash instead of a single slash in the path).

4. Run (or restart if it was running before):

jupyter notebook

Now your notebook is ready to work with vis.js timelines.

You will need 3 Jupyter Notebook cells for this:

1. A Python cell, you can create your data here. For this simple example, I created two events, one on December 20, and one on December 25. This code puts our events on the window of the browser, so it can later be used in a javascript cell.

2. A Html cell, with a placeholder for our timeline.

3. A Javascript cell. We import the js and css files of vis.js itself, then get our events from the window, and use the vis.js library to put them in a timeline object.

Now you should see this basic timeline in the HTML cell:

The timeline doesn’t look impressive at this point. However, with the approach introduced here, you can bring all the flexibility there is in the javascript library to your Jupyter Notebook ( Add a functionality when clicking on an event, create a different style for each node, and much much more… )

In order to understand how to create more complex timelines, you can see all the documentation here.