Jupyter Notebook Component

Jupyter Notebook is a language-agnostic HTML notebook application for Project Jupyter. It allows you to create and share documents that contain live code, equations, visualizations, and narrative text.

How to use

Using a local notebook

To use the Jupyter Notebook shortcode, you need to have a Jupyter Notebook file in your project. Similar to how you would add images to the project, you can add Jupyter Notebooks to the assets folder.

Include the Jupyter Notebook in the page using the jupyter shortcode:

---
title: My Page
math: true
---

{{% jupyter "notebook.ipynb" %}}

Alternatively, you can utilize the page bundles feature of Hugo to organize the Jupyter Notebooks together with the Markdown file.

---
title: My Page
math: true
---

{{% jupyter "notebook.ipynb" %}}

Using a remote notebook

You can also use a remote notebook by providing the URL to the notebook file. For example, to include What is the Jupyter Notebook notebook in the page, you can use the following shortcode:

{{% jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" %}}

Example Notebook

What is the Jupyter Notebook?

The Jupyter Notebook is an interactive computing environment that enables users to author notebook documents that include:

• Live code
• Interactive widgets
• Plots
• Narrative text
• Equations
• Images
• Video

These documents provide a complete and self-contained record of a computation that can be converted to various formats and shared with others using email, version control systems (like Git/GitHub) or nbviewer.jupyter.org.

Data Visualization

Below is an example of a simple data visualization using the Seaborn library.

# Import seaborn
import seaborn as sns

# Apply the default theme
sns.set_theme()

# Load an example dataset
tips = sns.load_dataset("tips")

# Create a visualization
sns.relplot(
    data=tips,
    x="total_bill", y="tip", col="time",
    hue="smoker", style="smoker", size="size",
)

Matplotlib is building the font cache; this may take a moment.

<seaborn.axisgrid.FacetGrid at 0x12830caa0>

tips.head()

   total_bill   tip     sex smoker  day    time  size
0       16.99  1.01  Female     No  Sun  Dinner     2
1       10.34  1.66    Male     No  Sun  Dinner     3
2       21.01  3.50    Male     No  Sun  Dinner     3
3       23.68  3.31    Male     No  Sun  Dinner     2
4       24.59  3.61  Female     No  Sun  Dinner     4

Equations

The following is an example of a simple equation using LaTeX.

$$ E = mc^2 $$