How to convert your Jupyter Notebook into an App.

Joachim Kuleafenu
3 min readDec 20, 2022

A guide on how to use datapane to create a shareable, searchable, and interactive report.

Introduction

As a Data Scientist, creating a compelling story with data visualization that conveys actionable insights to convince your organization to make a specific decision is very crucial.

Let me introduce you to datapane, a python framework that makes it super easy to build, host, and share an interactive data app from your Jupyter notebook without your recipients having to write a single line of python code.

Install datapane in Jupyter Notebook.

!pip3 install -U datapane

Import our libraries and dataset.

#import datapane and other needed libraries.
import datapane as dp
import matplotlib.pyplot as plt
import seaborn as sns
#import titanic dataset.
df = sns.load_dataset("titanic")

Let’s create our visualization and add some markdown.

# Our first plot
fig1,ax = plt.subplots(ncols=2,figsize=(12,6))
sns.boxplot(x='pclass',y='age',data=df,ax=ax[0],hue='survived')
sns.boxplot(x='pclass',y='fare',data=df,ax=ax[1],hue='survived')
plt.tight_layout()

# Our second plot
fig2,ax = plt.subplots(figsize=(12,6))
sns.kdeplot(data=df, x='fare', shade=True, hue='survived')
ax.set_xlabel('Fare',fontdict={'fontsize':15})
ax.set_ylabel('Density',fontdict={'fontsize':20});
# Our markdown text.
md = """
**Some observations**

- The maximum and mininum age for `Pclass 1 > Pclass 2 > Pclass 3.` This is understandable because it takes years to accumulate wealth.

- The average age of those that survived in all the classes is lower than those that did not survive.

- Passengers that survived in the Pclass 1 paid the highest fare. Which concluded the higher your fare in the pclass 1 the higher your rate of survival.

"""

Let’s create our first Datapane App with just two lines of code!

# Let's wrap our figure, and dataframes in blocks and create our app with dp.App.
app = dp.App(
dp.Plot(fig1, caption="Pclass VS Age Vs Fare"),
dp.Plot(fig2, caption="Kernel Density Estimation of Fare"),
dp.Text(md),
dp.DataTable(df, caption="Titanic Dataset")
)


# Save your shearable html file to local directory. With option `open=true` your app will be opened in your browser.
app.save("titanic-analysis-report.html", open="true")

Our App is ready! You can now share and can be opened in any browser without a single python code or environment setup.

Users can run SQL queries as below:

Export dataset:

Explore each column:

… and more.

Generating a Shearable link to our App.

what if we want to create a link that can be shared on our medium posts, social media platforms, etc?

Simply create a free account on datapane cloud.

Login to your account with !datapane login.

!datapane login

We just replaced .save it as done earlier with .upload

# Lets wrap our figure, and dataframes in blocks and create our app with dp.App.
app = dp.App(
dp.Plot(fig1, caption="Pclass VS Age Vs Fare"),
dp.Plot(fig2, caption="Kernel Density Estimation of Fare"),
dp.Text(md),
dp.DataTable(df, caption="Titanic Dataset")
)

# Generate a shareable link.
app.upload("titanic-analysis-report.html", open="true")

Done! Take a look at our beautiful report here.

Conclusion

By adding datapane to your toolbelt, you can convert your work into a shareable App with just a few lines of code.

Now after import pandas as pd, import numpy as np don't forget to import datapane as dp .

You can read more about the power of datapane in the official documentation.

--

--

Joachim Kuleafenu

Software Engineer. I build smart features with Machine Learning techniques.