Jupyter

Overview

Jupyter is a collection of software tools orientated towards the processing and visualizing of data. The two most prominent tools are Jupyter Notebooks, a web-based IDE/user interface for writing software and visualizing data, and Jupyter Labs, their newer web application which incorporates Notebooks plus many other features.

Most of the code examples on this page assume you are using the Python programming language, although the features should be available in the other languages that Jupyter supports.

Jupyter Labs Keyboard Shortcuts

1
2

Shift-Enter   Execute current cell.
Enter         New line.

Outputting HTML

In can be very handy to be able to output HTML from a cell, ever to provide titles, and descriptive information or to create tables.

To output HTML, you can use the HTML function provided from the IPython package, along with display():

1
2
3

from IPython.display import display, HTML

display(HTML(f'<h1>Hello, world!</h1>'))

This can be used to create very configurable and flexible cell outputs, as you can output anything that HTML supports: tables, images, headings, e.t.c. and any combination of these! Style is also easily supplied with inline CSS.

Outputting Images

A flexible way to include images in cell output is to output images in HTML form.

1

display(HTML('<img src="image.png" style="width: 400px;" />'))

However, the above code will only work if the image is under the directory that the notebook server is running from. To include images from any directory on your computer, you can create a simple file server for your computer with:

1
2

$ cd /
$ python -m http.server 8123

and then change the HTML to:

1

display(HTML('<img src="http://localhost:8123/my_dir/image.png" style="width: 400px;" />'))

Note that both of these methods will not embed the image into the HTML but rather link to it. This will result in fast load times but will require the file system/server to be available everytime you want to re-render the cell.

Embedded Images

As shown above, adding images to the Jupyter notebook via HTML <img> tags and a basic file server is a flexible way of controlling how exactly to display the output of cells. However, this notebook will depend on the file server being available. This might be fine for general use, but could be an issue if you want to export the Jupyter notebook and distribute it to other people.

To get around this, you can embed the images into the Jupyter notebook using base64 encoding. The below code shows how to do this, creating a utility function called embedded_image() which you can re-use to embed the base64 encoding of the image data in the HTML <img> tag.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import base64
import requests
from IPython.core.display import HTML

def embedded_image(url):
    response = requests.get(url)
    uri = ("data:" +
       response.headers['Content-Type'] + ";" +
       "base64," + str(base64.b64encode(response.content).decode('utf-8')))
    return uri

html = f'<img src="{embedded_image('https://upload.wikimedia.org/wikipedia/commons/5/56/Kosaciec_szczecinkowaty_Iris_setosa.jpg')}" />'
HTML(html)

Module Reload