{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Output Examples"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "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."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 27,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import display\n",
    "from IPython.display import (\n",
    "    HTML, Image, Latex, Math, Markdown, SVG\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Text"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Plain text:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 28,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam urna\n",
      "libero, dictum a egestas non, placerat vel neque. In imperdiet iaculis fermentum. \n",
      "Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia \n",
      "Curae; Cras augue tortor, tristique vitae varius nec, dictum eu lectus. Pellentesque \n",
      "id eleifend eros. In non odio in lorem iaculis sollicitudin. In faucibus ante ut \n",
      "arcu fringilla interdum. Maecenas elit nulla, imperdiet nec blandit et, consequat \n",
      "ut elit.\n"
     ]
    }
   ],
   "source": [
    "text = \"\"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam urna\n",
    "libero, dictum a egestas non, placerat vel neque. In imperdiet iaculis fermentum. \n",
    "Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia \n",
    "Curae; Cras augue tortor, tristique vitae varius nec, dictum eu lectus. Pellentesque \n",
    "id eleifend eros. In non odio in lorem iaculis sollicitudin. In faucibus ante ut \n",
    "arcu fringilla interdum. Maecenas elit nulla, imperdiet nec blandit et, consequat \n",
    "ut elit.\"\"\"\n",
    "print(text)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Text as output:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 29,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'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.'"
      ]
     },
     "execution_count": 29,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "text"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Standard error:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 30,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "this is stderr\n"
     ]
    }
   ],
   "source": [
    "import sys; print('this is stderr', file=sys.stderr)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## HTML"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 31,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"width:100px;height:100px;background:grey;\" />"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 31,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "div = HTML('<div style=\"width:100px;height:100px;background:grey;\" />')\n",
    "div"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 32,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "10000000000\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<div style=\"width:100px;height:100px;background:grey;\" />"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "10000000000\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<div style=\"width:100px;height:100px;background:grey;\" />"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "10000000000\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<div style=\"width:100px;height:100px;background:grey;\" />"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "for i in range(3):\n",
    "    print(10**10)\n",
    "    display(div)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Markdown"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 33,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "\n",
       "### Subtitle\n",
       "\n",
       "This is some *markdown* text with math $F=ma$.\n",
       "\n"
      ],
      "text/plain": [
       "<IPython.core.display.Markdown object>"
      ]
     },
     "execution_count": 33,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "md = Markdown(\"\"\"\n",
    "### Subtitle\n",
    "\n",
    "This is some *markdown* text with math $F=ma$.\n",
    "\n",
    "\"\"\")\n",
    "md"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 34,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "\n",
       "### Subtitle\n",
       "\n",
       "This is some *markdown* text with math $F=ma$.\n",
       "\n"
      ],
      "text/plain": [
       "<IPython.core.display.Markdown object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display(md)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## LaTeX"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Examples LaTeX in a markdown cell:\n",
    "\n",
    "\n",
    "\\begin{align}\n",
    "\\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 \\\\\n",
    "\\nabla \\times \\vec{\\mathbf{E}}\\, +\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{B}}}{\\partial t} & = \\vec{\\mathbf{0}} \\\\\n",
    "\\nabla \\cdot \\vec{\\mathbf{B}} & = 0\n",
    "\\end{align}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 35,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/latex": [
       "$F=ma$"
      ],
      "text/plain": [
       "<IPython.core.display.Latex object>"
      ]
     },
     "execution_count": 35,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "math = Latex(\"$F=ma$\")\n",
    "math"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 36,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/latex": [
       "\n",
       "\\begin{align}\n",
       "\\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 \\\\\n",
       "\\nabla \\times \\vec{\\mathbf{E}}\\, +\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{B}}}{\\partial t} & = \\vec{\\mathbf{0}} \\\\\n",
       "\\nabla \\cdot \\vec{\\mathbf{B}} & = 0\n",
       "\\end{align}\n"
      ],
      "text/plain": [
       "<IPython.core.display.Latex object>"
      ]
     },
     "execution_count": 36,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "maxwells = Latex(r\"\"\"\n",
    "\\begin{align}\n",
    "\\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 \\\\\n",
    "\\nabla \\times \\vec{\\mathbf{E}}\\, +\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{B}}}{\\partial t} & = \\vec{\\mathbf{0}} \\\\\n",
    "\\nabla \\cdot \\vec{\\mathbf{B}} & = 0\n",
    "\\end{align}\n",
    "\"\"\")\n",
    "maxwells"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## PDF"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 37,
   "metadata": {},
   "outputs": [],
   "source": [
    "%matplotlib inline\n",
    "import matplotlib.pyplot as plt\n",
    "import numpy as np\n",
    "from IPython.display import set_matplotlib_formats\n",
    "set_matplotlib_formats('pdf')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 38,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<matplotlib.collections.PathCollection at 0x7f48b5cdf5c0>"
      ]
     },
     "execution_count": 38,
     "metadata": {},
     "output_type": "execute_result"
    },
    {
     "data": {
      "application/pdf": "[encoded data, 11024 characters]\n",
      "text/plain": [
       "<Figure size 432x288 with 1 Axes>"
      ]
     },
     "metadata": {
      "needs_background": "light"
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "plt.scatter(np.random.rand(20), np.random.rand(20), c=np.random.rand(20))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Image"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 39,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/jpeg": "[encoded data, 2784032 characters]\n",
      "text/plain": [
       "<IPython.core.display.Image object>"
      ]
     },
     "execution_count": 39,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "img = Image(\"https://apod.nasa.gov/apod/image/1707/GreatWallMilkyWay_Yu_1686.jpg\")\n",
    "img"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Set the image metadata:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 40,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/jpeg": "[encoded data, 2784032 characters]\n",
      "text/plain": [
       "<IPython.core.display.Image object>"
      ]
     },
     "execution_count": 40,
     "metadata": {
      "image/jpeg": {
       "height": 200,
       "width": 100
      }
     },
     "output_type": "execute_result"
    }
   ],
   "source": [
    "img2 = Image(\n",
    "    \"https://apod.nasa.gov/apod/image/1707/GreatWallMilkyWay_Yu_1686.jpg\",\n",
    "    width=100,\n",
    "    height=200\n",
    ")\n",
    "img2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## SVG"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 41,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<svg height=\"110\" width=\"400\">\n",
       "  <rect height=\"100\" style=\"fill:#E0E0E0;\" width=\"300\"/> \n",
       "</svg>"
      ],
      "text/plain": [
       "<IPython.core.display.SVG object>"
      ]
     },
     "execution_count": 41,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "svg_source = \"\"\"\n",
    "<svg width=\"400\" height=\"110\">\n",
    "  <rect width=\"300\" height=\"100\" style=\"fill:#E0E0E0;\" /> \n",
    "</svg>\n",
    "\"\"\"\n",
    "svg = SVG(svg_source)\n",
    "svg"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 42,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "10000000000\n"
     ]
    },
    {
     "data": {
      "image/svg+xml": [
       "<svg height=\"110\" width=\"400\">\n",
       "  <rect height=\"100\" style=\"fill:#E0E0E0;\" width=\"300\"/> \n",
       "</svg>"
      ],
      "text/plain": [
       "<IPython.core.display.SVG object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "10000000000\n"
     ]
    },
    {
     "data": {
      "image/svg+xml": [
       "<svg height=\"110\" width=\"400\">\n",
       "  <rect height=\"100\" style=\"fill:#E0E0E0;\" width=\"300\"/> \n",
       "</svg>"
      ],
      "text/plain": [
       "<IPython.core.display.SVG object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "10000000000\n"
     ]
    },
    {
     "data": {
      "image/svg+xml": [
       "<svg height=\"110\" width=\"400\">\n",
       "  <rect height=\"100\" style=\"fill:#E0E0E0;\" width=\"300\"/> \n",
       "</svg>"
      ],
      "text/plain": [
       "<IPython.core.display.SVG object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "for i in range(3):\n",
    "    print(10**10)\n",
    "    display(svg)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## HTML Tables"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 47,
   "metadata": {},
   "outputs": [],
   "source": [
    "from vega_datasets import data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 50,
   "metadata": {},
   "outputs": [],
   "source": [
    "df = data.cars()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 51,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>Name</th>\n",
       "      <th>Miles_per_Gallon</th>\n",
       "      <th>Cylinders</th>\n",
       "      <th>Displacement</th>\n",
       "      <th>Horsepower</th>\n",
       "      <th>Weight_in_lbs</th>\n",
       "      <th>Acceleration</th>\n",
       "      <th>Year</th>\n",
       "      <th>Origin</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <td>0</td>\n",
       "      <td>chevrolet chevelle malibu</td>\n",
       "      <td>18.0</td>\n",
       "      <td>8</td>\n",
       "      <td>307.0</td>\n",
       "      <td>130.0</td>\n",
       "      <td>3504</td>\n",
       "      <td>12.0</td>\n",
       "      <td>1970-01-01</td>\n",
       "      <td>USA</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>1</td>\n",
       "      <td>buick skylark 320</td>\n",
       "      <td>15.0</td>\n",
       "      <td>8</td>\n",
       "      <td>350.0</td>\n",
       "      <td>165.0</td>\n",
       "      <td>3693</td>\n",
       "      <td>11.5</td>\n",
       "      <td>1970-01-01</td>\n",
       "      <td>USA</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>2</td>\n",
       "      <td>plymouth satellite</td>\n",
       "      <td>18.0</td>\n",
       "      <td>8</td>\n",
       "      <td>318.0</td>\n",
       "      <td>150.0</td>\n",
       "      <td>3436</td>\n",
       "      <td>11.0</td>\n",
       "      <td>1970-01-01</td>\n",
       "      <td>USA</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>3</td>\n",
       "      <td>amc rebel sst</td>\n",
       "      <td>16.0</td>\n",
       "      <td>8</td>\n",
       "      <td>304.0</td>\n",
       "      <td>150.0</td>\n",
       "      <td>3433</td>\n",
       "      <td>12.0</td>\n",
       "      <td>1970-01-01</td>\n",
       "      <td>USA</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>4</td>\n",
       "      <td>ford torino</td>\n",
       "      <td>17.0</td>\n",
       "      <td>8</td>\n",
       "      <td>302.0</td>\n",
       "      <td>140.0</td>\n",
       "      <td>3449</td>\n",
       "      <td>10.5</td>\n",
       "      <td>1970-01-01</td>\n",
       "      <td>USA</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "                        Name  Miles_per_Gallon  Cylinders  Displacement  \\\n",
       "0  chevrolet chevelle malibu              18.0          8         307.0   \n",
       "1          buick skylark 320              15.0          8         350.0   \n",
       "2         plymouth satellite              18.0          8         318.0   \n",
       "3              amc rebel sst              16.0          8         304.0   \n",
       "4                ford torino              17.0          8         302.0   \n",
       "\n",
       "   Horsepower  Weight_in_lbs  Acceleration       Year Origin  \n",
       "0       130.0           3504          12.0 1970-01-01    USA  \n",
       "1       165.0           3693          11.5 1970-01-01    USA  \n",
       "2       150.0           3436          11.0 1970-01-01    USA  \n",
       "3       150.0           3433          12.0 1970-01-01    USA  \n",
       "4       140.0           3449          10.5 1970-01-01    USA  "
      ]
     },
     "execution_count": 51,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Compared to a table in a Markdown cell:\n",
    "\n",
    "\n",
    "<table style=\"width:100%\">\n",
    "    <thead>\n",
    "  <tr>\n",
    "    <th>Firstname</th>\n",
    "    <th>Lastname</th> \n",
    "    <th>Age</th>\n",
    "  </tr>\n",
    "  </thead>\n",
    "  <tr>\n",
    "    <td>Jill</td>\n",
    "    <td>Smith</td> \n",
    "    <td>50</td>\n",
    "  </tr>\n",
    "  <tr>\n",
    "    <td>Eve</td>\n",
    "    <td>Jackson</td> \n",
    "    <td>94</td>\n",
    "  </tr>\n",
    "</table>"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
