{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# Getting started with Jupyter Notebook" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Welcome to Jupyter Notebook!\n", "\n", "This tutorial contains basics of the Jupyter Notebook application. If you have opened this tutorial in Jupyter you can test different features, modify the content and create comments. If you don't have Jupyter yet, see section _Installing Jupyter Notebook_.\n", "\n", "For more detailed instructions, the official documentation of the Jupyter project can be found at http://jupyter.readthedocs.io/en/latest/index.html. The Jupyter Notebook documentation is available at http://jupyter-notebook.readthedocs.io/en/latest/.\n", "\n", "This document contains:
\n", "(unfortunately the heading links work only in Jupyter, not in GitHub)\n", "1. [What is Jupyter Notebook?](#whatis)\n", "2. [Installing Jupyter Notebook](#install)\n", "3. [Starting and creating a new notebook](#createnotebook)\n", "4. [User Interface](#interface)\n", "5. [Cells](#cells)
\n", " 5.1 [Creating and editing cells](#createcell)
\n", " 5.2 [Running the cell](#runcell)
\n", " 5.3 [Markdown cell](#markdown)
\n", " 5.4 [Heading cell](#heading)
\n", " 5.5 [Code cell](#code)
\n", "6. [Adding images and videos to notebook](#imagevideo)
\n", " 6.1 [Adding an image](#addimage)
\n", " 6.2 [Formatting images](#formatimage)
\n", " 6.3 [Adding a video](#addvideo)\n", "7. [Jupyter and $\\LaTeX$](#latex)\n", "8. [Saving the notebook and using the dashboard](#dashboard)\n", "9. [Using the notebooks](#usenotebook)
\n", " 9.1 [Possible problems and solutions](#problems)
\n", "10. [Other notes](#notes)\n", "\n", "[Short exercise](#exercise)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "\n", "## 1. What is Jupyter Notebook?" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Jupyter Notebook is a web application which makes it possible to create documents that combine programming code, regular text, images, visualizations and mathematical equations. These documents are called __notebooks__.\n", "\n", "Jupyter is an open-source application. It supports over 40 different programming languages, including for example Python, C++, JavaScript and Ruby." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "\n", "## 2. Installing Jupyter Notebook" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "There are couple of different ways to install the Jupyter Notebook. The easiest and recommended option is to perform the installation with Anaconda. Anaconda installs Jupyter Notebooks, Python and some useful Python packages all at once. The installation is easy:\n", "- Download Anaconda from https://www.continuum.io/downloads. It is recommended to download the latest Python version.\n", "- Install Anaconda with the installation wizard that was downloaded.\n", "- After the installation you can start Jupyter either by opening the application _Anaconda Navigator_ and the choosing Jupyter Notebook from the menu or by writing the command _jupyter notebook_ to command line.\n", "\n", "Other options for installing Jupyter can be found from http://jupyter.readthedocs.io/en/latest/install.html.\n", "\n", "You can also open a free test version at https://try.jupyter.org/ or you can create a free account on the CoCalc service at https://cocalc.com/. CoCalc makes it possible to use Jupyter in cloud without installing it to your computer." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "\n", "## 3. Starting and creating a new notebook" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Jupyter Notebook can be started either with the _Anaconda Navigator_ or with the command line as explained below. After starting, the Jupyter __dashboard__ will open in the browser showing your files and folders.\n", "
\n", "\n", "
\n", "With the dashboard notebooks can be created, opened or deleted. Also the operation of Jupyter can be managed. We will explore the dashboard more in the section [8. Saving the notebook and using the dashboard](#dashboard).\n", "\n", "A new notebook can be created with the _New_ button in the top-right of the dashboard. Pressing the button will open a menu where under the text _Notebooks_ the __kernel__ of the notebook can be selected. The kernel determines which programming language (e.g. Python 2, Python 3, C++...) the notebook will use. The number of kernels available depends on how much kernels the user have installed.\n", "\n", "In this tutorial we are using the Python 3 language. After selecting the kernel the new notebook will open in a new tab." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "\n", "## 4. User interface" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Jupyter uses a browser based user interface. The most important parts of the interface are the menu and the toolbar on the top of the interface (see picture below) and the notebook area.\n", "
\n", "\n", "
\n", "Jupyter is used in two different modes: in __edit mode__ and in __command mode__. In edit mode it is possible to modify content of one part of the notebook, a __cell__. In command mode the notebook will be handled as a whole.\n", "\n", "Edit mode can be activated by pressing _Enter_ or by double-clicking the cell that is wanted to be edited. One can get back to the command mode by pressing _Esc_ or by double-clicking again. From the right of the menu it is possible to check in which mode Jupyter is. If the pencil is shown like in the image below\n", "\n", "\n", "
\n", "
\n", "then edit mode is on and the side of the cell is green. Otherwise command mode is on and the side of the cell is blue.\n", "\n", "The key commands in edit mode and in command mode differ. Depending on which mode Jupyter is, same button can have different actions. For example in command mode the button _s_ will save the notebook but in edit mode the button _s_ writes the letter \"s\" in the cell that is edited." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "\n", "## 5. Cells" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "All content of the notebook is written in __cells__. In below there is for example a cell that is determined to be a code cell. Also this text that you are reading is written in the own cell, text cell. Cells can be run. Running the cell will make the cell do different actions depending on the type of the cell." ] }, { "cell_type": "code", "execution_count": 1, "metadata": { "collapsed": true }, "outputs": [], "source": [ "# This is a code cell that includes just this comment line and no code at all actually." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "There are four different cell types in Jupyter: __code__ (programming code), __Markdown__ (normal text), __heading__ and __raw__ (code that will be left off from the content of the notebook). The most important ones are Code and Markdown cells.\n", "\n", "There are some useful shortkeys listed in the table below. You can also check out how to create a table and set different alignments for colums. More precise information concerning cells is found in the following subsections. \n", "\n", "|Shortkey
(Cell not active \\*)| Function | Shortkey
(Cell active \\**) | Function |\n", "|:---: |:--- | :---: | ---: |\n", "| a/b | new cell above/below | Ctrl + Enter | run cell |\n", "| dd | delete cell | Shift + Enter | run cell and activate next cell |\n", "| m/y | text/code cell | Alt + Enter | run cell and create new cell below |\n", "| up/down | previous/next cell | Ctrl + Shift + - | divide cell |\n", "| s | save | Ctrl + S | save |\n", "| (centered) | (left aligned) | (left aligned) | (right aligned) | \n", " \n", "\\* *Cell not active* refers to command mode when the cursor is outside of the cell and the side of the cell is blue.
\n", "\\*\\* *Cell active* refers to edit mode when the cursor is active inside the cell and the side of the cell is green.
" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "You can find and edit all the shortcuts by pressing ***H*** while in command mode." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "\n", "### 5.1 Creating and editing cells" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "A new cell can be created below the selected one by \n", "- selecting _Insert_ $\\rightarrow$ _Insert Cell Below_ from the menu\n", "- clicking the $+$ button on the toolbar\n", "- pressing _b_ from the keyboard in command mode. \n", "\n", "If you are reading this tutorial in Jupyter you can now try to add a new cell below this text cell. You can also add cell above the selected one by pressing _a_ in command mode.\n", "\n", "After creating the cell, the type of the cell can be selected. Selection can be done either with the toolbar selection\n", "\n", "\n", "
\n", "
\n", "or with keyboard shortcuts in command mode. Button _m_ selects a Markdown cell, button _y_ a code cell and button _r_ a raw cell.\n", "\n", "The cell can be edited by moving to edit mode by pressing _Enter_ or by double-clicking the cell. The type of the cell can be changed even if there is content in the cell.\n", "\n", "Deleting the cell is done the easiest way by double-pressing the button _d_ when the cell is selected (blue).
Deleting can be also done by selecting _Edit_ $\\rightarrow$ _Delete Cells_ from the menu." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "\n", "### 5.2 Running the cell" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The most important feature of Jupyter Notebook is the running of cells. After running, the cell will do actions that it is meant to do. Content of the Markdown cell will turn into regular text and the code cell will do what is written in it in the selected programming language.\n", "\n", "You maybe noticed earlier that after editing a Markdown cell and exiting it, the cell didn't return into normal text automatically. That happens because the cell needs to be run after editing it.\n", "\n", "The only cell type that won't be run straight in Jupyter is the raw cell. The code written in the raw cell is meant for example for the output of the _nbconvert_ tool (https://github.com/jupyter/nbconvert). With the nbconvert notebooks can be imported in other file formats.\n", "\n", "Running the cell can be done in three different ways. \n", "- shortkey _Ctrl_ + _Enter_ which is the fastest and most useful to learn\n", "- _Cells_ $\\rightarrow$ _Run Cells_ from the menu\n", "- _run cell, select below_ button from the toolbar.
\n", "\n", "
\n", "\n", "
\n", "If you are reading the tutorial in Jupyter you can try to run the code cell below. You can also edit the cell and then run it again." ] }, { "cell_type": "code", "execution_count": 2, "metadata": {}, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "Hello world!\n" ] } ], "source": [ "# This is a code cell. After running the cell the text \"Hello world!\" should be printed.\n", "\n", "print('Hello world!')" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Now let's view the Markdown, heading and code cells more closely." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "\n", "### 5.3 Markdown cell" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Markdown cells use the Markdown markup language (https://daringfireball.net/projects/markdown/). Markdown makes it possible to easily format plain text. The text can be for example __bolded__, _italicized_ or ~~sriked out~~.\n", "\n", ">For example this kind of blockquote can be added in the text.\n", "\n", "Also lists are easy to create with Markdown.\n", "\n", "Shopping list:\n", "- tomatoes\n", "- milk\n", "- coffee\n", "\n", "In this tutorial the Markdown formatting commands are not handled more accaurately but a good list of different commands can be found for example from the web page https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet. You can also enter the edit mode in this Markdown cell and see how the different formats have been made." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "\n", "### 5.4 Heading cell" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Heading cells are in fact not even own cell types but more likely shortcuts for creating headings. That is because heading cells also use Markdown, so basically they are Markdown cells.\n", "\n", "Differently leveled headings are determined in Markdown with # characters. Below there are the heading levels that are in use in Jupyter starting from # tagged, continuing to ## tagged and ending in ###### tagged heading." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# First heading type" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Second heading type" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Third heading type" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "#### Fourth heading type" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "##### Fifth heading type" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "###### Sixth heading type" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Even though Heading cells and Markdown cells are basically same, it is recommended to keep headings in their own cells separated from text. That makes the compiling of the text easier for the program." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "\n", "### 5.5 Code cell" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Programming code in selected programming language (kernel determines the language) can be written in code cells. For example if the notebook uses Python 3 kernel, Python 3 commands can be run in code cells. If in this case some other programming language would be written in code cells the code would not be compiled because it would be interpreted as Python 3 code.\n", "\n", "The code written in code cells behave similarly than in other programming environments. This is possible because of the IPython kernel. Running the code is in summary based on the connection between the notebook and the kernel. The code is actually run in the kernel. The kernel will communicate with the notebook and give the results of the run. The results of running the code will be seen in the _output_ part below the code cell.\n", "\n", "For example in the code cell below the result of the calculation 3 + 4 is saved in the variable _result_. After that the value of the _result_ is asked to be shown. When the code is run, the creation of the variable and the calculation are done in the kernel. After that the kernel will return the results to the notebook and the number 7 is appeared in the _output_ part." ] }, { "cell_type": "code", "execution_count": 3, "metadata": {}, "outputs": [ { "data": { "text/plain": [ "7" ] }, "execution_count": 3, "metadata": {}, "output_type": "execute_result" } ], "source": [ "result = 3 + 4\n", "result" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The output of the code cell isn't restricted to numbers or text only. Output can also be for example a graph. In the code cell below different number pairs are plotted with the _matlpotlib_ module and the output will be a graph." ] }, { "cell_type": "code", "execution_count": 4, "metadata": {}, "outputs": [ { "data": { "image/png": "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\n", "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "import matplotlib.pyplot as plt\n", "\n", "% matplotlib inline\n", "numbers = [1,2,3,6,7,8,12,16]\n", "plt.plot(numbers, 'ro')\n", "plt.show()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "\n", "## 6. Adding images and videos to notebook" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "There are different ways for adding images and videos to notebooks. Here adding images and videos with HTML is showed." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "\n", "### 6.1 Adding an image" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Because Jupyter uses Markdown language, some HTML tags will work straight in Markdown cells. For example adding the _test-image.png_ named image could be done by writing the following HTML tag straight in the Markdown cell:\n", "\n", "``````" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "In the example above the image has to be in the same directory than the notebook. It has to be told in the HTML tag if the image added to the notebook will be in some other directory than the notebook.\n", "A good example of referring to directories in different cases can be found from https://stackoverflow.com/questions/14489016/how-to-properly-reference-local-resources-in-html.\n", "\n", "Let's take for example a situation where the image is not in the same directory/folder with the notebook. There is a folder _Images_ in the parent directory of the notebook and we want to add the image _test-image.png_ to our notebook.\n", "\n", "Adding the image to the notebook can be done with the following tag:\n", "\n", "````\n", "\n", "\n", "where $../$ tells the program to go to the parent directory and then *Images/* to a folder named Images where the image named _test-image.png_ is located.\n", "\n", "\n", "\n", "If you are reading the tutorial in Jupyter you can also check how the images in this tutorial are written in the Markdown cells by entering in edit mode." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "\n", "### 6.2 Formatting images" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Information for example about the position and the size of the image can be added to the HTML tag. For example an image can be aligned to left with the following tag:\n", "\n", "````.\n", "\n", "Note that setting alignment can make the text appear on the side of the image. You can \"push\" the text lower by adding linebreaks ``
``.\n", "\n", "Selecting the size is possible by telling the wanted size in pixels, for example\n", "\n", "````.\n", "\n", "More information about the HTML image tags can be found for example from https://www.w3schools.com/tags/tag_img.asp." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "\n", "### 6.3 Adding a video" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Adding a video in notebook can also be done with HTML tags. Determining the directory of the video is done similarly than with the image (see section [6.1 Adding an image](#addimage) above). For example the _test-video.mp4_ which is in the same directory than the notebook can be added to the notebook with the following tag:\n", "\n", "``