Notebook Widgets

Notebooks come alive when interactive widgets are used. Users can visualize and control changes in the data. Learning becomes an immersive, plus fun, experience. Researchers can easily see how changing inputs to a model impacts the results.

ipyleaflet Binder logo - ipyleaflet examples Binder GitHub logo - ipyleaflet GitHub Repository

A library for creating simple interactive maps with panning and zooming, ipyleaflet supports annotations such as polygons, markers, and more generally any geojson-encoded geographical data structure.

Example

from ipyleaflet import Map

Map(center=[34.6252978589571, -77.34580993652344], zoom=10)

Installation

With conda:
conda install -c conda-forge ipyleaflet
With pip:
pip install ipyleaflet
If you are using the classic Jupyter Notebook < 5.3 you need to run this extra command:
jupyter nbextension enable --py --sys-prefix ipyleaflet
If you are using JupyterLab ≤ 2, you will need to install the JupyterLab extension:
jupyter labextension install @jupyter-widgets/jupyterlab-manager jupyter-leaflet
nglview Binder logo - nglview example Binder GitHub logo - nglview Github repository

A Jupyter widget to interactively view molecular structures and trajectories.

Example

import pytraj as pt
import nglview as nv

traj = pt.load('sim.nc', top='sim.prmtop')
traj.strip(":TIP3")
view = nv.show_pytraj(traj)
view.clear()
view.add_cartoon('protein', color_scheme='residueindex')
view.add_ball_and_stick('not protein', opacity=0.5)
view

Installation

With conda:
conda install -c bioconda nglview
With pip:
pip install nglview
jupyter nbextension enable --py --sys-prefix nglview
K3D-Jupyter GitHub logo -  K3D Jupyter GitHub Repository

K3D lets you create 3D plots backed by WebGL with high-level API (surfaces, isosurfaces, voxels, mesh, cloud points, vtk objects, volume renderer, colormaps, etc). The primary aim of K3D-jupyter is to be easy for use as stand alone package like matplotlib, but also to allow interoperation with existing libraries as VTK. The power of ipywidgets makes it also a fast and performant visualisation tool for HPC computing e.g. fluid dynamics.

Showcase gallery: https://k3d-jupyter.org/gallery/index.html.

Example

import k3d
import numpy as np

lines = np.load('vertices.npy')
lines_attributes = np.load('attributes.npy')

plot = k3d.plot()

for l, a in zip(lines, lines_attributes):
    plot += k3d.line(l, attribute=a, width=0.0001,
                     color_map=k3d.matplotlib_color_maps.Inferno, color_range=[0,0.5], shader='mesh',
                     compression_level=9)
plot.display()

Installation

With pip:
pip install k3d
jupyter nbextension enable --py --sys-prefix k3d
If you are using JupyterLab, you will need to install the JupyterLab extension:
jupyter labextension install @jupyter-widgets/jupyterlab-manager k3d
bqplot Binder logo - bqplot example Binder GitHub logo - bqplot GitHub Repository

A 2-D interactive data visualization library implementing the constructs of the grammar of graphics, bqplot provides a simple API for creating custom user interactions.

Example

import numpy as np
import bqplot.pyplot as plt

size = 100

plt.figure(title='Scatter plot with colors')
plt.scatter(np.random.randn(size), np.random.randn(size), color=np.random.randn(size))
plt.show()

Installation

With conda:
conda install -c conda-forge bqplot
With pip:
pip install bqplot
If you are using the classic Jupyter Notebook < 5.3 you need to run this extra command:
jupyter nbextension enable --py --sys-prefix bqplot
If you are using JupyterLab ≤ 2, you will need to install the JupyterLab extension:
jupyter labextension install @jupyter-widgets/jupyterlab-manager bqplot
pythreejs Binder logo - pythreejs example Binder GitHub logo - pythreejs GitHub Repository

A 3-D visualization library enabling GPU-accelerated computer graphics in Jupyter.

Example

from pythreejs import *

f = """
function f(origu,origv) {
    // scale u and v to the ranges I want: [0, 2*pi]
    var u = 2*Math.PI*origu;
    var v = 2*Math.PI*origv;

    var x = Math.sin(u);
    var y = Math.cos(v);
    var z = Math.cos(u+v);

    return new THREE.Vector3(x,y,z);
}
"""

surf_g = ParametricGeometry(func=f, slices=16, stacks=16)
surf = Mesh(geometry=surf_g, material=MeshLambertMaterial(color='green', side='FrontSide'))
surf2 = Mesh(geometry=surf_g, material=MeshLambertMaterial(color='yellow', side='BackSide'))
c = PerspectiveCamera(position=[5, 5, 3], up=[0, 0, 1],
                      children=[DirectionalLight(color='white',
                                                 position=[3, 5, 1],
                                                 intensity=0.6)])
scene = Scene(children=[surf, surf2, c, AmbientLight(intensity=0.5)])
Renderer(camera=c, scene=scene, controls=[OrbitControls(controlling=c)], width=400, height=400)

Installation

With conda:
conda install -c conda-forge pythreejs
With pip:
pip install pythreejs
If you are using the classic Jupyter Notebook < 5.3 you need to run this extra command:
jupyter nbextension enable --py --sys-prefix pythreejs
If you are using JupyterLab ≤ 2, you will need to install the JupyterLab extension:
jupyter labextension install @jupyter-widgets/jupyterlab-manager jupyter-threejs
ipyvolume Binder logo - ipyvolume example Binder GitHub logo - ipyvolume GitHub Repository

3-D plotting for Python in the Jupyter notebook based on IPython widgets using WebGL.

Example

import ipyvolume.pylab as p3
import numpy as np

fig = p3.figure()
q = p3.quiver(*stream.data[:,0:50,:200], color="red", size=7)
p3.style.use("dark") # looks better
p3.animation_control(q, interval=200)
p3.show()