PyData Library Styles

This theme has built-in support and special styling for several major visualization libraries in the PyData ecosystem. This ensures that the images and output generated by these libraries looks good for both light and dark modes. Below are examples of each that we use as a benchmark for reference.

Pandas

import string

import numpy as np
import pandas as pd

rng = np.random.default_rng()
data = rng.standard_normal((100, 26))
df = pd.DataFrame(data, columns=list(string.ascii_lowercase))
df

	a	b	c	d	e	f	g	h	i	j	...	q	r	s	t	u	v	w	x	y	z
0	1.273005	1.211390	-0.782000	0.064113	0.294388	3.003983	-1.216917	-0.523098	-0.444507	1.102868	...	-0.937908	0.511970	0.347063	-1.845194	-0.382020	-1.407323	1.106209	0.542486	-1.533493	1.429236
1	0.643746	-1.251564	-0.225098	-0.189275	0.660460	-0.274772	-2.078605	0.272682	-1.469546	-0.523882	...	-0.312088	-0.131164	-0.515215	-0.560125	-0.826655	1.357945	2.114856	-0.882987	-0.285950	-1.164912
2	1.238456	0.232689	0.789119	0.133749	0.075572	0.102792	-1.274384	-0.899565	0.628836	1.171049	...	-0.476955	-1.402633	-1.139180	1.928455	-1.828736	-0.315042	0.413949	-1.524852	2.614530	-0.484570
3	1.141025	-0.114816	0.324608	1.258790	0.775548	-1.131703	0.121877	0.128709	-0.080143	-0.075582	...	0.299991	1.273468	0.856007	-1.999200	-0.689851	0.671369	0.722310	-0.957157	0.146640	-0.376956
4	0.015948	-0.586259	-0.451723	-0.219271	0.078780	-2.414710	-0.983746	-0.752147	-0.601903	0.326638	...	0.913162	0.882975	-0.695756	-0.268524	1.252843	0.091279	-1.056703	-1.769046	0.297562	-1.561338
...	...	...	...	...	...	...	...	...	...	...	...	...	...	...	...	...	...	...	...	...	...
95	-0.157666	0.661848	0.747800	1.153949	0.176054	-0.002934	-1.480387	-1.791993	0.673316	0.348860	...	1.256392	-1.090465	-0.682220	0.050365	-1.324024	-0.012001	-0.348990	-0.113209	1.578873	1.487019
96	1.086325	-0.319808	0.136424	1.051857	1.035291	-1.004166	0.092042	0.009574	1.300263	0.579976	...	0.163899	-1.564967	-0.985761	1.730674	0.213062	-0.638520	0.044436	-0.288787	1.601378	0.525662
97	-1.916302	-0.212496	-0.053653	1.288958	-2.094456	-0.963076	-0.032503	-0.005490	0.283460	-0.663444	...	0.618167	-0.783306	-1.117490	0.052975	1.394345	0.544342	0.149384	1.088657	0.024398	-0.972416
98	0.321115	1.185185	-0.196018	-0.762141	-0.754833	1.775245	0.037413	-0.814862	-0.282380	0.403484	...	-0.840357	0.417249	-0.720889	-0.163469	-1.805741	1.477134	0.995128	1.453581	-0.278551	0.069350
99	-0.948359	-2.950084	-0.193886	-0.742079	-2.079894	-0.412901	-0.756323	1.071684	0.119834	1.291098	...	-0.176705	-1.580936	0.853207	-0.767434	-0.724330	-0.032777	0.434007	0.456186	1.385025	1.149138

100 rows × 26 columns

Matplotlib

Here’s a sidebar to test that the code cells behave as we’d expect when there is content to the right. The code cell should be displayed to the left and with no overlap.

import matplotlib.pyplot as plt

fig, ax = plt.subplots()
ax.scatter(df["a"], df["b"], c=df["b"], s=3)

<matplotlib.collections.PathCollection at 0x7f61a15b5af0>

and with the Matplotlib plot directive:

(Source code, png, hires.png, pdf)

Plotly

The HTML below shouldn’t display, but it uses RequireJS to make sure that all works as expected. If the widgets don’t show up, RequireJS may be broken.

import plotly.io as pio
import plotly.express as px
import plotly.offline as py

pio.renderers.default = "notebook"

df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species", size="sepal_length")
fig

Xarray

Here we demonstrate xarray to ensure that it shows up properly.

import xarray as xr
data = xr.DataArray(
        np.random.randn(2, 3),
        dims=("x", "y"),
        coords={"x": [10, 20]}, attrs={"foo": "bar"}
      )
data

<xarray.DataArray (x: 2, y: 3)>
array([[-0.73604844,  0.54480113,  0.82000879],
       [-0.13889817, -1.83045038, -0.16003762]])
Coordinates:
  * x        (x) int64 10 20
Dimensions without coordinates: y
Attributes:
    foo:      bar

xarray.DataArray

• x: 2
• y: 3

• -0.736 0.5448 0.82 -0.1389 -1.83 -0.16

  array([[-0.73604844,  0.54480113,  0.82000879],
         [-0.13889817, -1.83045038, -0.16003762]])

• Coordinates: (1)
  • x
    (x)
    int64
    10 20

    array([10, 20])

• Indexes: (1)
  • x
    PandasIndex

    PandasIndex(Int64Index([10, 20], dtype='int64', name='x'))

• Attributes: (1)

  foo :

  bar

jupyter-sphinx

Another common library is jupyter-sphinx. This section demonstrates a subset of functionality above to make sure it behaves as expected.

import matplotlib.pyplot as plt
import numpy as np

rng = np.random.default_rng()
data = rng.standard_normal((3, 100))
fig, ax = plt.subplots()
ax.scatter(data[0], data[1], c=data[2], s=3)

<matplotlib.collections.PathCollection at 0x7f8f0ce028e0>