Introduction to Jupyter

Jupyter is a

  • free software
  • open standards
  • web services

for interactive computing across all programming languages.

Very powerful tool to produce reproducible code and analyses:

  • Powerful interactive shells:

    • Terminal - jupyter console

    • Qt-based - jupyter qtconsole

    • Notebooks - jupyter notebook or jupyter lab

  • A browser-based notebook with support for
    • code
    • text
    • mathematical expressions
    • inline plots
    • other rich media
    • interactive data visualization
    • use of GUI toolkits
  • Flexible, embeddable interpreters to load into your own projects.
  • Easy to use, high performance tools for parallel computing.

Jupyter is an open-source project that provides open-standards, and services for interactive computing across dozens of programming languages, including Python, R, Stata and many others used by economists.

Markdown
¶

In [1]:
# Import display options for showing websites
from IPython.display import IFrame

url = 'https://commonmark.org/help/'
IFrame(url, width=800, height=400)
Out[1]:

Let's learn some basics of markdown here

Customizing Some elements
¶

Headers
¶

# Header 1
## Header 2
#### Header 3
##### Header 4

Header 1¶

Header 2¶

Header 3¶

Header 4¶

Text Alignment
¶

Use <center> Text </center> to center your Text. Like so,

My Text

Font Colors
¶

  • Use <font color='red'> Red text </font> to write Red text.

  • Any of the following color names can be used

Font Size
¶

Use <font size="N"> text of size N</font> to get text of size N pixels. E.g.,

  • <font size="1"> Text of size 1</font> becomes Text of size 1

  • <font size="3"> Text of size 3</font> becomes Text of size 3

  • <font size="5"> Text of size 5</font> becomes Text of size 5
  • <font size="10"> Text of size 10</font> becomes Text of size 10
  • <font size="20"> Text of size 20</font> becomes Text of size 20

Multiple Attributes Simultaneously
¶

Use <span style='property1:value; property2:value; property3:value; property4:value;...'> Our nice text </span> to produce text with different attributes.

Our nice modified text

You can see some of the properties and values here. Markdown can be extended using HTML, so you can personalize and change even more things using HTML code.

Alert Cells
¶

<div class="alert alert-block alert-info">
<b>Tip:</b> Use blue boxes (alert-info) for tips and notes. 
If it’s a note, you don’t have to include the word “Note”.
</div>
Tip: Use blue boxes (alert-info) for tips and notes. If it’s a note, you don’t have to include the word “Note”. 
<div class="alert alert-block alert-warning">
<b>Example:</b> Use yellow boxes for examples that are not 
inside code cells, or use for mathematical formulas if needed.
</div>
Example: Use yellow boxes for examples that are not inside code cells, or use for mathematical formulas if needed. 
<div class="alert alert-block alert-success">
<b>Up to you:</b> Use green boxes sparingly, and only for some specific 
purpose that the other boxes can't cover. For example, if you have a lot 
of related content to link to, maybe you decide to use green boxes for 
related links from each section of a notebook.
</div>
Up to you: Use green boxes sparingly, and only for some specific purpose that the other boxes can't cover. For example, if you have a lot of related content to link to, maybe you decide to use green boxes for related links from each section of a notebook. 
<div class="alert alert-block alert-danger">
<b>Just don't:</b> In general, avoid the red boxes. These should only be
used for actions that might cause data loss or another major issue.
</div>
Just don't: In general, avoid the red boxes. These should only be used for actions that might cause data loss or another major issue.

Creating Tables in Markdown
¶

We can create tables very easily

code
| Item         | Price     | # In stock |
|--------------|-----------|------------|
| Juicy Apples | 1.99      | *7*        |
| Bananas      | **1.89**  | 5234       |

Becomes

Item Price # In stock
Juicy Apples 1.99 7
Bananas 1.89 5234

We can also choose alignment of each column by using : in the second line.

Left aligned: :--- Centered: :---: Right aligned: ---:

code
| Item         | Price     | # In stock |
|:--------------|:-----------:|------------:|
| Juicy Apples | 1.99      | *7*        |
| Bananas      | **1.89**  | 5234       |

Becomes

Item Price # In stock
Juicy Apples 1.99 7
Bananas 1.89 5234

Math in Markdown
¶

We can write math in markdown using $\LaTeX$. There are two types of math objects:

  • Inline math: $a=1$ displays $a=1$

  • Displayed math: $$ a=1 $$ displays $$ a=1 $$

You can write very nice and complex formulas and show your steps using the many options from $\LaTeX$.

  • Greek symbols: $\greek_symbol_name$, e.g.,

    • $\alpha$ for $\alpha$,
    • $\beta$ for $\beta$,
    • $\Gamma$ for $\Gamma$

  • Mathematical symbols:

    • Sum: \sum_{k=0}^N x_k for $$\sum_{k=0}^N x_k$$

    • Product: \prod_{k=0}^N x_k for $$\prod_{k=0}^N x_k$$

    • Fractions: \frac{x}{y} for $$\frac{x}{y}$$

  • Aligned equations:

    Can be created with \eqalign{math} command, e.g.,

    $$\eqalign{
(a-b)^2 &= (a-b)(a-b) \\
      &= a^2 - ab - ba + b^2 \\
      &= a^2 - 2ab + b^2
}$$

produces

$$\eqalign{ (a-b)^2 &= (a-b)(a-b) \\ &= a^2 - ab - ba + b^2 \\ &= a^2 - 2ab + b^2 }$$

Or as in $\LaTeX$, using the \begin{align} and

\end{align} commands.

$$
\begin{align}
(a-b)^2 &= (a-b)(a-b) \\
        &= a^2 - ab - ba + b^2 \\
        &= a^2 - 2ab + b^2
\end{align}
$$

produces

$$ \begin{align} (a-b)^2 &= (a-b)(a-b) \\ &= a^2 - ab - ba + b^2 \\ &= a^2 - 2ab + b^2 \end{align} $$

Want to learn more markdownguide.com¶

Check out markdownguide.org.

Free Markdown Editor
¶

[https://dillinger.io/](https://dillinger.io/)
¶

Exercises¶

Exercise 1: Write your CV or Resume in markdown. For this, use the dillinger.io editor to create your first Markdown document. Once you are done, download the .md file into a new subdirectory called CV in your EconGrowthUG/notebooks/ directory. Export it also as a .pdf file and save it in the same directory.
Exercise 2: Use the markdown document of your CV/Resume to create your first Jupyter Notebook, which you should create and save in the same directory as in Exercise 1.
Hint: Copy and paste the whole document into one markdown cell, and split the cell into parts.
Exercise 3: Convert your notebook into a slide deck using RISE. Once you have created it and tested inside Jupyter, download it as Reveal.js slides and save it in the same directory. Add a link to this webpage on your CV.md file.
Exercise 4: Create a new Github repository using this directory, commit, and push your changes.
Exercise 5: Create a new branch in that Github repository called gh-pages. Rename the CV.html file to index.html. Commit, and push your changes. This will create a website for your slides, which shoudl be located at https://your-github-user.github.io/Name-of-CV-repo/.

Notebook written by Ömer Özak for his students in Economics at Southern Methodist University. Feel free to use, distribute, or contribute.