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