{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "a35eeb9f-df70-4ab1-a243-2d2025888eb0",
   "metadata": {},
   "source": [
    "# Introduction to the JupyterLab and Jupyter Notebooks\n",
    "\n",
    "This is a short introduction to two of the flagship tools created by\n",
    "[the Jupyter Community](https://jupyter.org).\n",
    "\n",
    "> **Note**: This interface is provided by the\n",
    "> [JupyterLite project](https://jupyterlite.readthedocs.io/en/latest/), which embeds an\n",
    "> entire JupyterLab interface, with many popular packages for scientific computing, in\n",
    "> your browser. There may be some minor differences in behavior between JupyterLite and\n",
    "> the JupyterLab you install locally.\n",
    "\n",
    "## JupyterLab 🧪\n",
    "\n",
    "**JupyterLab** is a next-generation web-based user interface for Project Jupyter. It\n",
    "enables you to work with documents and activities such as Jupyter notebooks, text\n",
    "editors, terminals, and custom components in a flexible, integrated, and extensible\n",
    "manner. It is the interface that you're looking at right now.\n",
    "\n",
    "**For an overview of the JupyterLab interface**, see the **JupyterLab Welcome Tour** on\n",
    "this page, by going to `Help -> Welcome Tour` and following the prompts.\n",
    "\n",
    "> **See Also**: For a more in-depth tour of JupyterLab with a full environment that runs\n",
    "> in the cloud, see\n",
    "> [the JupyterLab introduction on Binder](https://mybinder.org/v2/gh/jupyterlab/jupyterlab-demo/HEAD?urlpath=lab/tree/demo).\n",
    "\n",
    "## Jupyter Notebooks 📓\n",
    "\n",
    "**Jupyter Notebooks** are a community standard for communicating and performing\n",
    "interactive computing. They are a document that blends computations, outputs,\n",
    "explanatory text, mathematics, images, and rich media representations of objects.\n",
    "\n",
    "JupyterLab is one interface used to create and interact with Jupyter Notebooks.\n",
    "\n",
    "**For an overview of Jupyter Notebooks**, see the **JupyterLab Welcome Tour** on this\n",
    "page, by going to `Help -> Notebook Tour` and following the prompts.\n",
    "\n",
    "> **See Also**: For a more in-depth tour of Jupyter Notebooks and the Classic Jupyter\n",
    "> Notebook interface, see\n",
    "> [the Jupyter Notebook IPython tutorial on Binder](https://mybinder.org/v2/gh/ipython/ipython-in-depth/HEAD?urlpath=tree/binder/Index.ipynb).\n",
    "\n",
    "## An example: visualizing data in the notebook ✨\n",
    "\n",
    "Below is an example of a code cell. We'll visualize some simple data using two popular\n",
    "packages in Python. We'll use [NumPy](https://numpy.org/) to create some random data,\n",
    "and [Matplotlib](https://matplotlib.org) to visualize it.\n",
    "\n",
    "Note how the code and the results of running the code are bundled together."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "fe55883a-6887-43dd-9498-5333a51799e2",
   "metadata": {},
   "outputs": [],
   "source": [
    "from matplotlib import pyplot as plt\n",
    "import numpy as np\n",
    "\n",
    "# Generate 100 random data points along 3 dimensions\n",
    "x, y, scale = np.random.randn(3, 100)\n",
    "fig, ax = plt.subplots()\n",
    "\n",
    "# Map each onto a scatterplot we'll create with Matplotlib\n",
    "ax.scatter(x=x, y=y, c=scale, s=np.abs(scale) * 500)\n",
    "ax.set(title=\"Some random data, created with JupyterLab!\")\n",
    "plt.show()"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "b9670d85-ef29-4dfd-b4b5-e76d279c1f1a",
   "metadata": {},
   "source": [
    "## Next steps 🏃\n",
    "\n",
    "This is just a short introduction to JupyterLab and Jupyter Notebooks. This\n",
    "demonstration contains a lot more that you can play around with. Here are some pointers\n",
    "to help you take the next step. Each of the items below corresponds to a file or folder\n",
    "in the **file browser to the left**.\n",
    "\n",
    "- [python.ipynb](python.ipynb) is a Jupyter Notebook that shows off some basic Python\n",
    "  functionality, including more visualizations, data structures, and scientific\n",
    "  computing libraries.\n",
    "- `pyodide/` is a folder that contains several Jupyter Notebooks that highlight many\n",
    "  more things that you can do in JupyterLab / JupyterLite. Explore them for inspiration\n",
    "  about what you'd like to do next.\n",
    "- [p5.ipynb](p5.ipynb) is a Jupyter Notebook that shows off computing with\n",
    "  [the p5 platform](https://github.com/processing/p5.js/), which allows you to build\n",
    "  visual experiences with Javascript.\n",
    "- [javascript.ipynb](javascript.ipynb) is a Jupyter Notebook that shows off how you can\n",
    "  run Javascript code within an ipynb file."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python (Pyodide)",
   "language": "python",
   "name": "python"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "python",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}