#!/usr/bin/env python
# coding: utf-8

# # 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[50]:


from IPython.display import display
from IPython.display import (
    HTML, Image, Latex, Math, Markdown, SVG
)


# ## Text

# Plain text:

# In[51]:


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)


# Text as output:

# In[52]:


text


# Standard error:

# In[53]:


1/0


# ## HTML

# In[54]:


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


# In[55]:


for i in range(3):
    print(10**10)
    display(div)


# ## Markdown

# In[56]:


md = Markdown("""
### Subtitle

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

""")
md


# In[57]:


display(md)


# ## 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[58]:


math = Latex("$F=ma$")
math


# In[59]:


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


# ## PDF

# In[60]:


get_ipython().run_line_magic('matplotlib', 'inline')
import matplotlib.pyplot as plt
import numpy as np
from IPython.display import set_matplotlib_formats
set_matplotlib_formats('pdf')


# In[61]:


plt.scatter(np.random.rand(20), np.random.rand(20), c=np.random.rand(20))


# ## Image

# In[62]:


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


# Set the image metadata:

# In[63]:


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


# ## SVG

# In[45]:


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


# In[49]:


for i in range(3):
    print(10**10)
    display(svg)


# ## HTML Tables

# In[1]:


import altair as alt


# In[3]:


df = alt.load_dataset('cars')


# In[4]:


df.head()


# Compared to a table in a Markdown cell:
# 
# 
# <table style="width:100%">
#     <thead>
#   <tr>
#     <th>Firstname</th>
#     <th>Lastname</th> 
#     <th>Age</th>
#   </tr>
#   </thead>
#   <tr>
#     <td>Jill</td>
#     <td>Smith</td> 
#     <td>50</td>
#   </tr>
#   <tr>
#     <td>Eve</td>
#     <td>Jackson</td> 
#     <td>94</td>
#   </tr>
# </table>