Displaying rich HTML elements in the Notebook

The Jupyter Notebook application is based on HTML and runs in a web browser. This platform supports many kinds of rich content such as images, mathematical equations, interactive widgets, videos, and much more. Jupyter proposes several methods to leverage these capabilities.

In this section, we'll show how to display HTML, SVG, and JavaScript elements, notably with the Data-Driven Documents (D3) JavaScript visualization library.

Displaying SVG in the Notebook

Scalable Vector Graphics (SVG) is an open XML-based file format describing vector graphics. Most modern web browsers support this format.

For displaying objects, IPython provides a simple API for representing rich content like SVG. In the following example, we'll define a Disc class with a customizable radius and a color. When displaying a Disc instance in the Notebook, an SVG representation of the disc will be shown.

Let's first define a function generating the SVG code for a disc:

In [1]...