00_jupyter_intro.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Jupyter Notebook: open source web application to create and share documents\n",
    "\n",
    "![notebook components](images/jupyter.png)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## notebook: json file with .ipynb extension\n",
    "\n",
    "- **live code** (you can run it!)\n",
    "- **equations**\n",
    "- **visualizations**\n",
    "- **narrative text** (markdown)\n",
    "\n",
    "![notebook components](images/notebook_components.png)\n",
    "\n",
    "Code, text and output are stored in an editable document called a **notebook**. When you save it, this is sent from your browser to the notebook server, which saves it on disk as a **JSON file with a .ipynb extension**."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "# Why is it cool?\n",
    "\n",
    "### edit rich text in the browser\n",
    "With Markdown markup language\n",
    "\n",
    "### edit the code in the browser\n",
    "With automatic **syntax highlighting**, **indentation**, and **tab completion**\n",
    "\n",
    "### execute code from the browser\n",
    "With the **results of computations** attached to the code which generated them\n",
    "\n",
    "### rich media respresentations: HTML, LaTeX, PNG, SVG ...\n",
    "\n",
    "### share your notebooks\n",
    "As **.ipynb** files, allowing others to execute your code\n",
    "\n",
    "### export your notebooks to HTML, PDF, LaTeX and more!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# I want to use it! But how?\n",
    "\n",
    "<br/><br/>\n",
    "\n",
    "![jupyter packages](images/which_packages.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "# JupyterHub: a multi-user version of the notebook\n",
    "\n",
    "Gives users access to **computational environments and resources**.\n",
    "\n",
    "Useful for **research labs**, **classrooms**, **companies** ...\n",
    "\n",
    "- no installation or maintenance needed (for the end-users)\n",
    "- pluggable authentication (i.e. GitHub authentication)\n",
    "- centralized deployment\n",
    "- container friendly\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Jupyter-notebook: an overview"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "\n",
    "## Modal editor\n",
    "\n",
    "Jupyter notebook has a modal user interface. This means that the keyboard does different things depending on which mode the notebook is in. There are two modes:\n",
    "- **Edit mode**: indicated by a green cell border and a prompt showing in the editor area. You can type into the cell, like a normal text editor. Enter to edit mode by pressing **`Enter`** or using the mouse to `click` on a cell’s editor area.\n",
    "\n",
    "![image.png](images/edit_mode.png)\n",
    "\n",
    "- **Command mode**: indicated by a grey cell border with a blue left margin. You are able to edit the notebook as a whole, and the keyboard is mapped to a set of shortcuts that let you perform notebook and cell actions efficiently.  Enter command mode by pressing **`Esc`** or using the mouse to `click` outside a cell’s editor area\n",
    "\n",
    "![image.png](images/command_mode.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## Edit mode\n",
    "\n",
    "There are two types of cells:\n",
    "- **Code cells**: to write and run code. Code will be executed when you run the cell\n",
    "- **Text cells**: to write titles, information, show images, ... Text will be formatted in markdown when you run the cell\n",
    "\n",
    "To run a cell press **`shift`+`enter`**\n",
    "\n",
    "Keywoard shortcuts to edit the text / code of a cell:\n",
    "- **`x`**: cut text\n",
    "- **`c`**: copy text\n",
    "- **`v`**: paste text\n",
    "- **`z`**: undo previous action\n",
    "- `multicursor` editing is available"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## Command mode\n",
    "\n",
    "Basic navigation: \n",
    "- **`enter`**: edit a cell\n",
    "- **`shift`+`enter`**: run the cell\n",
    "- **`up`** / `k`: move to the previous cell\n",
    "- **`down`** / `j`: move to next cell\n",
    "\n",
    "Saving the notebook: \n",
    "- **`s`**: save the notebook\n",
    "\n",
    "Change cell types: \n",
    "- **`y`**: change to code cell\n",
    "- **`m`**: change to text cell\n",
    "- `1` - `6`: change to text cell title 1 - 6"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "Cell creation: \n",
    "- **`a`**: create a cell above\n",
    "- **`b`**: create a cell below\n",
    "\n",
    "Cell editing: \n",
    "- **`x`**: cut a cell\n",
    "- **`c`**: copy a cell\n",
    "- **`v`**: paste a cell\n",
    "- **`z`**: undo cell deletion "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "### Code cells\n",
    "The jupyter notebook is capable of running code in a wide range of languages. However, each notebook is associated with a single kernel. This notebook is associated with the IPython kernel, therefore runs Python code.\n",
    "\n",
    "![image.png](images/code_cells.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "### Text cells: Markdown\n",
    "\n",
    "You can make text *italic* or **bold**.\n",
    "\n",
    "You can build nested itemized or enumerated **lists**:\n",
    "\n",
    "- One\n",
    "    - Sublist\n",
    "        - This\n",
    "               \n",
    "Now another list:\n",
    "1. Here we go\n",
    "    1. Sublist\n",
    "    2. Sublist\n",
    "2. There we go\n",
    "3. Now this\n",
    "\n",
    "You can add **horizontal rules**:\n",
    "\n",
    "-----\n",
    "\n",
    "And shorthand for **links**: [Jupyter's website](http://jupyter.org/)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "\n",
    "Here is a **blockquote**:\n",
    "\n",
    "> Beautiful is better than ugly. Explicit is better than implicit. Simple is better than complex. Complex is better than complicated. Flat is better than nested. Sparse is better than dense. Readability counts. Special cases aren’t special enough to break the rules. Although practicality beats purity. Errors should never pass silently. Unless explicitly silenced. In the face of ambiguity, refuse the temptation to guess. There should be one– and preferably only one –obvious way to do it. Although that way may not be obvious at first unless you’re Dutch. Now is better than never. Although never is often better than right now. If the implementation is hard to explain, it’s a bad idea. If the implementation is easy to explain, it may be a good idea. Namespaces are one honking great idea – let’s do more of those!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "**Headings: H1 ... H6**:\n",
    "\n",
    "# H1\n",
    "## H2\n",
    "### H3\n",
    "\n",
    "You can **embed code** meant for illustration instead of execution in Python:\n",
    "\n",
    "```python\n",
    "def square(x):\n",
    "    return x**2\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "**Inline expressions** can be added by surrounding the **LaTeX** code with $:\n",
    "\n",
    "$-b \\pm \\sqrt{b^2 - 4ac} \\over 2a$\n",
    "\n",
    "And a **table** like this:\n",
    "\n",
    "| This | is   |\n",
    "|------|------|\n",
    "|   a  | table|\n",
    "\n",
    "If you have **local files** in your Notebook directory, you can refer to these files in Markdown cells directly:\n",
    "\n",
    "![python-logo](images/python-logo.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## Export the notebook\n",
    "\n",
    "`File > Download as`\n",
    "\n",
    "- Notebook (.ipynb)\n",
    "- Executable Script (.py)\n",
    "- HTML (.html)\n",
    "- Reveal.js slides (.html)\n",
    "- ..."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Present Your Data Science Projects with Jupyter Notebook Slides!\n",
    "\n",
    "Source: [https://bit.ly/2EoVfg4](https://medium.com/learning-machine-learning/present-your-data-science-projects-with-jupyter-slides-75f20735eb0f)\n",
    "\n",
    "1. Make the notebook\n",
    "2. Format the cells: `View → Cell Toolbar → Slideshow`\n",
    "    - **Slide**: presents each cell in a different slide. Use right arrow to navigate.\n",
    "    - **Sub-slide**: a continuation from the previous slide. Use down arrow to go to a sub-slide from a slide.\n",
    "    - **Fragment**: presents multiple cells in one slide one by one.\n",
    "    - **Skip/Notes**: skips the marked cells"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Exercise\n",
    "### 1. Familiarize with the user interface\n",
    "Take a couple of minutes to familiarize yourself with the interface by completing the user interface tour that you will find under `Help > User Interface Tour` and take a look at the shortcuts in `Help > Keyboard Shortcuts`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "celltoolbar": "Slideshow",
  "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": 2
}