ipynb.pub

Share
AuthorGitHub

Ben Evans

@bencevans · less than a minute read

Beautiful Notebook Publishing

👋 Welcome to ipynb.pub, a simple tool to publish Jupyter Notebooks as beautiful web pages.

Examples

They say a picture is worth a thousand words, so what about a notebook? Here are some examples of notebooks in the Gist viewer

Features

Beautiful, clean design.

ipynb.pub uses a clean, minimal design that makes your notebook easy to read and understand.

Syntax highlighting.

Python, R, and other code cells are automatically syntax highlighted for easy reading.

[1]
for x in "Hello World".split():
print(x, end=' ')
Hello World

Images

Getting creative? You can include images in your notebook, and they'll be displayed in the published version.

[2]
from PIL import Image, ImageDraw
image = Image.new("RGB", (200, 200), "white")
draw = ImageDraw.Draw(image)
colors = ["red", "green", "blue", "yellow", "purple", "orange"]
for i, color in enumerate(colors):
draw.rectangle([i*24, i*24, 200-i*10, 200-i*10], fill=color)
image

Plots

Showing off your latest training results? Matplotlib is happy here.

[3]
import matplotlib.pyplot as plt
import numpy as np
x = np.linspace(0, 10, 100)
y_sin = np.sin(x)
y_cos = np.cos(x)
ax, fig = plt.subplots(figsize=(14, 4))
fig.plot(x, y_sin)
fig.plot(x, y_cos)
fig.set_title("Sin and Cos")
fig.legend(["sin", "cos"])
fig.grid(True)
fig.set_xlabel("X")
fig.set_ylabel("Y")
plt.show()

Prefer to use Seaborn or Plotly? No problem, they work too.

[4]
from plotly import graph_objects as go
fig = go.Figure(
data=go.Bar(y=[2, 3, 1]),
layout_title_text="A Bar Chart",
layout_xaxis_title="Category",
layout_yaxis_title="Value",
layout_height=400,
)
fig.show()

Tables

Oh, you have tabular data? We can handle that too.

[5]
import pandas as pd
from IPython.display import display
# Create a dictionary with the variable information
variables = {
'color': {
'Type': 'str',
'Value': 'orange'
},
'colors': {
'Type': 'list',
'Value': ['red', 'green', 'blue', 'yellow', 'purple', 'orange'],
'Length': 6
},
'i': {
'Type': 'int',
'Value': 5
},
}
# Create a DataFrame from the dictionary
df = pd.DataFrame.from_dict(variables, orient='index')
# Display the DataFrame as a table
df
Type Value Length
color str orange NaN
colors list [red, green, blue, yellow, purple, orange] 6.0
i int 5 NaN

Math

Math lovers, rejoice! You can include LaTeX equations in your notebook, and they'll be rendered beautifully as well.

E.g. $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$:

x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

HTML

Filtered HTML is allowed in markdown cells and output cells!

[6]
from IPython.display import YouTubeVideo
YouTubeVideo('AOXqnURqCUM')