Output Examples

This notebook is designed to provide examples of different types of outputs that can be used to test the JupyterLab frontend and other Jupyter frontends.


In [27]:
from IPython.display import display
from IPython.display import (
    HTML, Image, Latex, Math, Markdown, SVG
)

Text

Plain text:


In [28]:
text = """Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam urna
libero, dictum a egestas non, placerat vel neque. In imperdiet iaculis fermentum. 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia 
Curae; Cras augue tortor, tristique vitae varius nec, dictum eu lectus. Pellentesque 
id eleifend eros. In non odio in lorem iaculis sollicitudin. In faucibus ante ut 
arcu fringilla interdum. Maecenas elit nulla, imperdiet nec blandit et, consequat 
ut elit."""
print(text)


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam urna
libero, dictum a egestas non, placerat vel neque. In imperdiet iaculis fermentum. 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia 
Curae; Cras augue tortor, tristique vitae varius nec, dictum eu lectus. Pellentesque 
id eleifend eros. In non odio in lorem iaculis sollicitudin. In faucibus ante ut 
arcu fringilla interdum. Maecenas elit nulla, imperdiet nec blandit et, consequat 
ut elit.

Text as output:


In [29]:
text


Out[29]:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam urna\nlibero, dictum a egestas non, placerat vel neque. In imperdiet iaculis fermentum. \nVestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia \nCurae; Cras augue tortor, tristique vitae varius nec, dictum eu lectus. Pellentesque \nid eleifend eros. In non odio in lorem iaculis sollicitudin. In faucibus ante ut \narcu fringilla interdum. Maecenas elit nulla, imperdiet nec blandit et, consequat \nut elit.'

Standard error:


In [30]:
import sys; print('this is stderr', file=sys.stderr)


this is stderr

HTML


In [31]:
div = HTML('<div style="width:100px;height:100px;background:grey;" />')
div


Out[31]:

In [32]:
for i in range(3):
    print(10**10)
    display(div)


10000000000
10000000000
10000000000

Markdown


In [33]:
md = Markdown("""
### Subtitle

This is some *markdown* text with math $F=ma$.

""")
md


Out[33]:

Subtitle

This is some markdown text with math $F=ma$.


In [34]:
display(md)


Subtitle

This is some markdown text with math $F=ma$.

LaTeX

Examples LaTeX in a markdown cell:

\begin{align} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{align}

In [35]:
math = Latex("$F=ma$")
math


Out[35]:
$F=ma$

In [36]:
maxwells = Latex(r"""
\begin{align}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\   \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} & = 0
\end{align}
""")
maxwells


Out[36]:
\begin{align} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{align}

PDF


In [37]:
%matplotlib inline
import matplotlib.pyplot as plt
import numpy as np
from IPython.display import set_matplotlib_formats
set_matplotlib_formats('pdf')

In [38]:
plt.scatter(np.random.rand(20), np.random.rand(20), c=np.random.rand(20))


Out[38]:
<matplotlib.collections.PathCollection at 0x7f48b5cdf5c0>
<Figure size 432x288 with 1 Axes>

Image


In [39]:
img = Image("https://apod.nasa.gov/apod/image/1707/GreatWallMilkyWay_Yu_1686.jpg")
img


Out[39]:

Set the image metadata:


In [40]:
img2 = Image(
    "https://apod.nasa.gov/apod/image/1707/GreatWallMilkyWay_Yu_1686.jpg",
    width=100,
    height=200
)
img2


Out[40]:

SVG


In [41]:
svg_source = """
<svg width="400" height="110">
  <rect width="300" height="100" style="fill:#E0E0E0;" /> 
</svg>
"""
svg = SVG(svg_source)
svg


Out[41]:

In [42]:
for i in range(3):
    print(10**10)
    display(svg)


10000000000
10000000000
10000000000

HTML Tables


In [47]:
from vega_datasets import data

In [50]:
df = data.cars()

In [51]:
df.head()


Out[51]:
Name Miles_per_Gallon Cylinders Displacement Horsepower Weight_in_lbs Acceleration Year Origin
0 chevrolet chevelle malibu 18.0 8 307.0 130.0 3504 12.0 1970-01-01 USA
1 buick skylark 320 15.0 8 350.0 165.0 3693 11.5 1970-01-01 USA
2 plymouth satellite 18.0 8 318.0 150.0 3436 11.0 1970-01-01 USA
3 amc rebel sst 16.0 8 304.0 150.0 3433 12.0 1970-01-01 USA
4 ford torino 17.0 8 302.0 140.0 3449 10.5 1970-01-01 USA

Compared to a table in a Markdown cell:

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94