@ky28059/react-jupyter-renderer

A fully-interactive Jupyter notebook renderer in React based on Pyodide and the JupyterLite project.

The Lorenz Differential Equations

Before we start, we import some preliminary libraries.

[2]:

import numpy as np
from matplotlib import pyplot as plt
from scipy import integrate

import numpy as np
from matplotlib import pyplot as plt
from scipy import integrate

We will also define the actual solver and plotting routine.

[3]:

def solve_lorenz(sigma=10.0, beta=8./3, rho=28.0):
    """Plot a solution to the Lorenz differential equations."""

    max_time = 4.0
    N = 30

    fig = plt.figure(1)
    ax = fig.add_axes([0, 0, 1, 1], projection='3d')
    ax.axis('off')

    # prepare the axes limits
    ax.set_xlim((-25, 25))
    ax.set_ylim((-35, 35))
    ax.set_zlim((5, 55))

    def lorenz_deriv(x_y_z, t0, sigma=sigma, beta=beta, rho=rho):
        """Compute the time-derivative of a Lorenz system."""
        x, y, z = x_y_z
        return [sigma * (y - x), x * (rho - z) - y, x * y - beta * z]

    # Choose random starting points, uniformly distributed from -15 to 15
    np.random.seed(1)
    x0 = -15 + 30 * np.random.random((N, 3))

    # Solve for the trajectories
    t = np.linspace(0, max_time, int(250*max_time))
    x_t = np.asarray([integrate.odeint(lorenz_deriv, x0i, t)
                      for x0i in x0])

    # choose a different color for each trajectory
    colors = plt.cm.viridis(np.linspace(0, 1, N))

    for i in range(N):
        x, y, z = x_t[i,:,:].T
        lines = ax.plot(x, y, z, '-', c=colors[i])
        plt.setp(lines, linewidth=2)
    angle = 104
    ax.view_init(30, angle)
    plt.show()

    return t, x_t

def solve_lorenz(sigma=10.0, beta=8./3, rho=28.0):
    """Plot a solution to the Lorenz differential equations."""

    max_time = 4.0
    N = 30

    fig = plt.figure(1)
    ax = fig.add_axes([0, 0, 1, 1], projection='3d')
    ax.axis('off')

    # prepare the axes limits
    ax.set_xlim((-25, 25))
    ax.set_ylim((-35, 35))
    ax.set_zlim((5, 55))

    def lorenz_deriv(x_y_z, t0, sigma=sigma, beta=beta, rho=rho):
        """Compute the time-derivative of a Lorenz system."""
        x, y, z = x_y_z
        return [sigma * (y - x), x * (rho - z) - y, x * y - beta * z]

    # Choose random starting points, uniformly distributed from -15 to 15
    np.random.seed(1)
    x0 = -15 + 30 * np.random.random((N, 3))

    # Solve for the trajectories
    t = np.linspace(0, max_time, int(250*max_time))
    x_t = np.asarray([integrate.odeint(lorenz_deriv, x0i, t)
                      for x0i in x0])

    # choose a different color for each trajectory
    colors = plt.cm.viridis(np.linspace(0, 1, N))

    for i in range(N):
        x, y, z = x_t[i,:,:].T
        lines = ax.plot(x, y, z, '-', c=colors[i])
        plt.setp(lines, linewidth=2)
    angle = 104
    ax.view_init(30, angle)
    plt.show()

    return t, x_t

We explore the Lorenz system of differential equations:

\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned}

Let's change ( $\sigma$ , $\beta$ , $\rho$ ) and examine the trajectories.

[4]:

t, x_t = solve_lorenz(sigma=10.0, beta=8.0 / 3, rho=28.0)

t, x_t = solve_lorenz(sigma=10.0, beta=8.0 / 3, rho=28.0)

For the default set of parameters, we see the trajectories swirling around two points, called attractors.

After interacting with the system, we can take the result and perform further computations. In this case, we compute the average positions in $x$, $y$ and $z$.

[5]:

xyz_avg = x_t.mean(axis=1)

xyz_avg = x_t.mean(axis=1)

[6]:

xyz_avg.shape

xyz_avg.shape

(30, 3)

Creating histograms of the average positions (across different trajectories) show that, on average, the trajectories swirl about the attractors.

[7]:

from matplotlib import pyplot as plt
%matplotlib inline

from matplotlib import pyplot as plt
%matplotlib inline

[8]:

plt.hist(xyz_avg[:,0])
plt.title('Average $x(t)$');

plt.hist(xyz_avg[:,0])
plt.title('Average $x(t)$');

[9]:

plt.hist(xyz_avg[:,1])
plt.title('Average $y(t)$');

plt.hist(xyz_avg[:,1])
plt.title('Average $y(t)$');

[ ]:

`folium` Interactive Map Demo

Simple demonstration of rendering a map in a jupyterlite notebook.

Note that the folium package has several dependencies which themselves may have dependencies.

The following code fragement, run in a fresh Python enviroment into which folium has already been installed, identifies the packages that are loaded in when folium is loaded:

#https://stackoverflow.com/a/40381601/454773
import sys
before = [str(m) for m in sys.modules]
import folium
after = [str(m) for m in sys.modules]
set([m.split('.')[0] for m in after if not m in before and not m.startswith('_')])

The loaded packages are:

{'branca',
 'certifi',
 'chardet',
 'cmath',
 'csv',
 'dateutil',
 'encodings',
 'folium',
 'gzip',
 'http',
 'idna',
 'importlib',
 'jinja2',
 'markupsafe',
 'mmap',
 'numpy',
 'pandas',
 'pkg_resources',
 'pytz',
 'requests',
 'secrets',
 'stringprep',
 'urllib3',
 'zipfile'}

The following packages seem to need installing in order load folium, along with folium itself:

chardet, certifi, idna, branca, urllib3, Jinja2, requests, Markupsafe

Universal wheels, with filenames of the form PACKAGE-VERSION-py2.py3-none-any.whl appearing in the Download files area of a PyPi package page (example] are required in order to install the package.

One required package, Markupsafe) did not have a universal wheel available, so a wheel was manually built elsewhere (by hacking the setup.py file to force it to build the wheel in a platform and speedup free way) and pushed to a downloadable location in an ad hoc wheelhouse.

[3]:

# Install folium requirements
%pip install -q folium

# Install folium requirements
%pip install -q folium

Demo of `folium` Map

Load in the folium package:

[4]:

import folium

import folium

And render a demo map:

[6]:

m = folium.Map(location=[50.693848, -1.304734], zoom_start=11)
m

m = folium.Map(location=[50.693848, -1.304734], zoom_start=11)
m

Make this Notebook Trusted to load map: File -> Trust Notebook

[ ]:

See below for documentation on using the React library, or view a hosted notebook previewer here instead.

Installing

This library uses react-markdown to render Markdown notebook cells. Due to bundling issues, however, react-markdown is listed as a peer dependency and must be installed separately.

1npm i @ky28059/react-jupyter-renderer react-markdown

Usage

For most use cases, render notebooks using the <JupyterNotebook /> component:

1import { JupyterNotebook } from '@ky28059/react-jupyter-renderer';
2
3export default function App() {
4    // const notebook = ...
5
6    return (
7        <JupyterNotebook
8            notebook={notebook}
9            remarkPlugins={[remarkMath, remarkGfm]}
10            rehypePlugins={[rehypeKatex, rehypeRaw]}
11            wrapperClassName="py-6 h-[36rem] overflow-y-auto gap-4 text-sm"
12            markdownClassName="markdown mb-4"
13            codeCellClassName="group my-2"
14            executionCountClassName="font-mono group-data-active:text-sky-600 group-data-edited:text-orange-400!"
15            runButtonClassName="cursor-pointer text-right px-1"
16            codeEditorClassName="border border-black/10 bg-[rgb(245_245_245)] [&>textarea]:focus:outline-sky-600"
17            streamOutputClassName="mt-2 px-2 py-1 overflow-x-auto"
18            errorOutputClassName="mt-2 px-2 py-1 overflow-x-auto bg-red-500/20"
19            indicatorClassName="hidden group-data-active:block absolute left-1 w-2 rounded-xs h-full bg-sky-600 group-data-edited:bg-orange-400"
20        />
21    )
22}

For efficiency and customizability reasons, this library does not ship with any default component styles; instead, the appearance of notebooks can be controlled using the following props:

Prop	Type	Value
`notebook`	`Notebook`	The Jupyter notebook to render. Note that to support the use case of embedding known / trusted notebooks, the input notebook data is not sanitized or checked before rendering.
`trusted`	`boolean?`	Whether to render potentially dangerous (HTML) output. Again, to support embedding known / trusted notebooks, this prop defaults to true.
`remarkPlugins`	`Pluggable[]?`	Plugins for `remark` to be passed to `react-markdown`.
`rehypePlugins`	`Pluggable[]?`	Plugins for `rehype` to be passed to `react-markdown`.
`wrapperClassName`	`string?`	The `className` to set on the wrapper `<div>` element.
`markdownClassName`	`string?`	The `className` to set on markdown cells.
`codeCellClassName`	`string?`	The `className` to set on code cells. If this cell has been edited since it was last executed, `data-edited="true"` will be set; similarly, if this cell is currently selected, `data-active="true"` will be set.
`executionCountClassName`	`string?`	The `className` to set on the execution count element; this is a child of the code cell element.
`runButtonClassName`	`string?`	The `className` to set on the run button element; this is a child of the code cell element.
`codeEditorClassName`	`string?`	The `className` to pass to the `react-simple-code-editor` code editor; this is a child of the code cell element.
`streamOutputClassName`	`string?`	The `className` to set on "stream output" (e.g. `text/plain` output, or prints to `stdout`).
`errorOutputClassName`	`string?`	The `className` to set on "error output" (e.g. exception stack traces, or prints to `stderr`).
`indicatorClassName`	`string?`	The `className` to set on the code cell "indicator", i.e. the blue or orange bar on JupyterLite displayed on the currently active code cell. Since the indicator is simply a `<div>` whose appearance is controlled via CSS, its behavior is fully customizable. If this prop is not provided, the indicator will not be rendered.

Alternatives

If you do not need to embed editable / interactive notebook cells (i.e. you only want to render a notebook statically), the following tools will likely be more lightweight:

notebook.js / nbpreview for client-side static notebook rendering (see their preview here).
nbviewer.js, also for client-side static rendering.
nbconvert to convert notebook files to static HTML on the server.

If you do not need to embed notebooks into a custom environment (and just want to run them yourself), the following tools may be more featureful:

JupyterLite for executing notebooks on the client side.
Google Colab for executing notebooks on the server side.