How to create dashboard using Matplotlib in Jupyter Notebook

We prepared an example dashboard - Cryptocurrency Comparison - which was created using matplotlib and mercury Python packages. In this article you will learn:

how to load csv files to your Jupyter Notebook,
how to modify DataFrames,
how to use Select, Markdown and NumberBox mercury widgets,
how to create charts using matplotlib,
how to turn your notebook into Web App.

Enjoy reading :)

Import required packages

You will need following packages:

matplotlib
pandas 
mercury

matplotlib for creating charts and graphs to visualize data.
pandas is for data manipulation.
mercury will be used for interactive widgets and for running notebook as a web app.

Make sure that you have installed them before start doing anything.

The cell code with imports :

import matplotlib.pyplot as plt 
import pandas as pd 
import mercury as mr

Data Preparation

Get Data

In this example, we used Cryptocurrency Prices as csv files, which were downloaded from this website (opens in a new tab).

After downloading, you have to load data to your Jupyter Notebook. You can use read.csv from pandas:

dfBTC = pd.read_csv('data_BTC.csv', sep=";")
dfETH = pd.read_csv('data_ETH.csv', sep=";")
dfSOL = pd.read_csv('data_SOL.csv', sep=";")
dfBNB = pd.read_csv('data_BNB.csv', sep=";")

Modify Data

You will need to divide the timestamp column into date and time columns, because only date is needed. Write following code:

dfBTC[['date', 'time']] = dfBTC['timestamp'].str.split('T', expand=True)
dfETH[['date', 'time']] = dfETH['timestamp'].str.split('T', expand=True)
dfSOL[['date', 'time']] = dfSOL['timestamp'].str.split('T', expand=True)
dfBNB[['date', 'time']] = dfBNB['timestamp'].str.split('T', expand=True)

Create Dashboard

Add interactive widgets

Now, create widgets that allow to choose what cryptocurrencies user want to compare.

Please add 2 Select widgets by writing two following cells code:

select1 = mr.Select(
                label="Choose first cryptocurrency: ",
                value = 'Bitcoin', 
                choices=['Bitcoin', 'Ether', 'BNB', 'Solana']
                )

choices = ['Bitcoin', 'Ether', 'BNB', 'Solana']
if select1.value in choices:
    choices.remove(select1.value)
 
select2 = mr.Select(
                label="Choose second cryptocurrency: ", 
                choices=choices
                )

Set relevant data

Add extra variables to make coding easier. Using conditional statements create df1 and df2 which will be DataFrames containing the first and second cryptocurrencies data:

if select1.value == 'Bitcoin':
    df1=dfBTC
elif select1.value == 'Ether':
    df1=dfETH
elif select1.value == 'BNB':
    df1=dfBNB
elif select1.value == 'Solana':
    df1=dfSOL
 
if select2.value == 'Bitcoin':
    df2=dfBTC
elif select2.value == 'Ether':
    df2=dfETH
elif select2.value == 'BNB':
    df2=dfBNB
elif select2.value == 'Solana':
    df2=dfSOL

Then, find the highest value of each cryptocurrency. Create highest1 and highest2:

highest1 = round(df1['high'].max(), 2)
highest2 = round(df2['high'].max(), 2)

Set heading

Use Markdown widget to create the heading:

mr.Markdown(text="# **Cryptocurrency Comparison in time period from 2024-04-24 to 2024-05-22**")

Create boxes with numbers

You will need to add a subheading:

mr.Markdown(text="## The highest price in the time interval:")

Then, please add boxes with numbers. You can use NumbeBox widget:

mr.NumberBox([
    mr.NumberBox(data=f"{highest1}$", title=f"{select1.value}"),
    mr.NumberBox(data=f"{highest2}$", title=f"{select2.value}"),
])

Create charts

Please add another subheading, write this piece of code:

mr.Markdown(text=f"## High and Volume charts: {select1.value}(left) vs {select2.value}(right)")

After that, create charts:

fig, ax = plt.subplots(2, 2)
fig.set_figwidth(13)
fig.set_figheight(9)
ax[0, 0].plot(df1['date'],df1['high'])
ax[0, 1].plot(df2['date'],df2['high'])
ax[1, 0].bar(df1["date"],df1["volume"])
ax[1, 1].bar(df2["date"],df2["volume"])
ax[0, 0].set_xticklabels([])
ax[0, 1].set_xticklabels([])
ax[1, 0].set_xticks(df1['date'])
ax[1, 0].set_xticklabels(df1['date'], rotation=90)
ax[1, 1].set_xticks(df2['date'])
ax[1, 1].set_xticklabels(df2['date'], rotation=90)
 
plt.show()

If something is unclear, check Matplotlib Docs (opens in a new tab).

Create Web App

Deploying Web App is very easy that you can do it in 3 steps:

Login to Mercury Cloud

If you don't have account, you can create it here: Mercury Cloud (opens in a new tab).

Create new site

Create new or use an existing site.

Upload your notebook

Upload the notebook with code.

Congrats! You just created your own Web App and you can share your Jupyter Notebooks with nontechnical users. If you need more information about deploying the Web App check Mercury Cloud Documentation (opens in a new tab).

Final Effect

Here is a teaser of Web App:

You can check this example as a Web App right here: Matplotlib Dashboard (opens in a new tab)

Vega Altair Dashboard