Introducing REPL Notes - start blogging with Jupyter notebooks
REPL Notes was created to make it ridiculously easy to publish work saved in Jupyter notebooks as blog posts. Several months ago, I started thinking about creating an online portfolio and considered using my exploratory Jupyter notebooks as a source of content. There are already some ways to accomplish this and I have linked some of the options below:
- https://medium.com/gopypi/exploring-jupyer-notebook-to-write-a-blog-1e7eaa913274
- https://www.fast.ai/2020/01/20/nb2md/
- https://blog.logrocket.com/converting-jupyter-notebooks-blog-posts-gatsby/
However, all of these approaches required me to learn and set up new tools. I ended up spending significant time on getting things set up before I could even see the results. I finally came up with my own approach to publishing notebooks as web pages and decided to open it up as a platform for others to share their own content.
This blog itself is written purely in a Jupyter notebook and published as you would any other post on REPL Notes. In your posts, you may want to
- Write content using Markdown or plain text
- Share your code and linked output
- Add images to your post
- Create and share interactive visualizations using libraries like Bokeh
- Embed external websites or web apps
Styles are automatically applied to the various elements embedded in the notebook to give them a consistent and modern look. The website is designed to be in dark mode to enhance readability of posts.
Let me share some examples of each of the above use cases.
1. Write content using Markdown or plain text
Jupyter notebooks are a great way to present your data analysis along with narrative text. You can create Markdown cells to add visual styling to your text and embed links, images, gifs, or videos. I won't go into the details of everything you can do with Markdown, but here's a great guide from Github if you are looking for a resource.
You can even use LaTeX to write equations.
Source:
$$
\omega = 2\pi f \\
f = \frac{c}{\lambda}\\
\lambda_0=\theta^2+\delta\\
\Delta\lambda = \frac{1}{\lambda^2}
$$
Result:
2. Share your code and linked output
Common output formats like text, tables, Matplotlib charts, and images from the notebook are embeded into the blog automatically.
Example Matplotlib chart
# Source: https://matplotlib.org/stable/gallery/subplots_axes_and_figures/subplot.html
import numpy as np
import matplotlib.pyplot as plt
x1 = np.linspace(0.0, 5.0)
x2 = np.linspace(0.0, 2.0)
y1 = np.cos(2 * np.pi * x1) * np.exp(-x1)
y2 = np.cos(2 * np.pi * x2)
fig, (ax1, ax2) = plt.subplots(2, 1)
ax1.plot(x1, y1, 'o-')
ax1.set_ylabel('Damped oscillation')
ax2.plot(x2, y2, '.-')
ax2.set_xlabel('time (s)')
ax2.set_ylabel('Undamped')
plt.show()
Example Seaborn chart
# Source: https://seaborn.pydata.org/tutorial/aesthetics.html
import seaborn as sns
sns.set_style("whitegrid")
data = np.random.normal(size=(20, 6)) + np.arange(6) / 2
ax = sns.boxplot(data=data)
Example table output
from bokeh.sampledata.iris import flowers
flowers.head()| sepal_length | sepal_width | petal_length | petal_width | species | |
|---|---|---|---|---|---|
| 0 | 5.1 | 3.5 | 1.4 | 0.2 | setosa |
| 1 | 4.9 | 3.0 | 1.4 | 0.2 | setosa |
| 2 | 4.7 | 3.2 | 1.3 | 0.2 | setosa |
| 3 | 4.6 | 3.1 | 1.5 | 0.2 | setosa |
| 4 | 5.0 | 3.6 | 1.4 | 0.2 | setosa |
3. Add images to your post
There are several ways to add images to your Jupyter notebook. I've listed a few options in this post. The easiest method is to embed it as Markdown as shown below.
Alternatively, you can use the IPython.display module to embed an image using code.
from IPython.display import Image
Image(filename="IMG_0432.jpg")
4. Create and share interactive visualizations using libraries like Bokeh.
# Source: https://docs.bokeh.org/en/latest/docs/user_guide/categorical.html
from bokeh.layouts import column
from bokeh.models import Slider
from bokeh.plotting import figure, show
from bokeh.io import output_notebook
output_notebook()
plot = figure(plot_width=400, plot_height=400)
r = plot.circle([1,2,3,4,5,], [3,2,5,6,4], radius=0.2, alpha=0.5)
slider = Slider(title="Size", start=0.1, end=0.5, step=0.01, value=0.2)
slider.js_link('value', r.glyph, 'radius')
show(column(slider, plot))5. Embed external websites or web apps in an IFrame
from IPython.display import IFrame
IFrame(src='https://demo.bokeh.org/movies', width=1000, height=700)Sign up now and create your own blog using Jupyter notebooks! You can also click the Feedback button in the navigation bar at the top and send me a message. I'd love to hear how you plan to use it or if you'd like to share your thoughts or suggestions.