@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

[ ]:

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

@ky28059/react-jupyter-renderer

The Lorenz Differential Equations

Matplotlib

folium Interactive Map Demo

Demo of folium Map

Installing

`folium` Interactive Map Demo

Demo of `folium` Map