Interactive Dashboard from Jupyter with Voila

Jupyter Notebook is a powerful tool for data visualization, exploration, and analysis. However, when you are going to share your findings in a more interactive and user-friendly way, changing your Jupyter Notebook into an interactive dashboard is a valuable privilege. Voila is a Jupyter extension that provides an interactive Dashboard. In this article, we’ll explore how to transform a Jupyter Notebook into an engaging interactive dashboard using Voila. Unlock the potential of your Jupyter Notebooks by creating interactive dashboards with Voila. Follow this step-by-step guide to enhance your data visualization and analysis.

What is Voila?

Voila is a Python package that allows you to convert Jupyter Notebooks into interactive web applications. This means you can share your analysis with anyone, even those without Python knowledge, through a user-friendly interface.

Benefits of using Voila:

• Enhanced communication: Voila presentations are more engaging and interactive than static Jupyter Notebooks. Viewers can explore the data themselves using widgets and sliders, leading to deeper understanding and better decision-making.
• Wider audience reach: Voila dashboards can be easily shared via links or deployed to platforms like Heroku, making your work accessible to anyone with a web browser.
• Improved collaboration: Voila allows for collaborative analysis and exploration. Multiple users can access and interact with the same dashboard simultaneously, facilitating discussions and feedback.

Jupyter Notebook with Voila Benefits

1. Easy communication
2. Live code execution
3. Flexibility in Deployment
4. easy Collaborate
5. Open Source Community Support

Creating an Interactive Dashboard with Voila

Here is the step-by-step guide to creating an Interactive Dashboard from Jupyter Notebook with Voila:

Step1: Install Voila

By using pip in Jupyter Notebook we can install voila

pip install voila

Step 2: Launch the Notebook

Run the command in CMD below:

voila_Dashboard.ipynb

Then Automatically it will launch on local host in your browser:

Step 3: Create file in Jupyter Notebook

Create a file in Jupyter notebook ‘Voila_Dashboard.ipynb’ to perform the various steps:

Here we are importing the Necessary libraries:

• numpy and pandas libraries for numerical and data manipulation, respectively.
• The warnings module to filter out warnings
• The IPython.core.display module to render HTML content in an IPython environment

This will setup for displaying an HTML-formatted heading in a Jupyter environment, serving as a visual element or explanation for a Voila dashboard. The use of HTML within Python code is common when creating dynamic and interactive content in platforms like Jupyter.

Python3

import numpy as np
import pandas as pd

import warnings
warnings.filterwarnings("ignore")

from IPython.core.display import display, HTML

display(HTML('<h1><centre> Visualization for Voila Dashboard with help HTML!</centre></h1>'))

Output:

Visualization for Voila Dashboard with help HTML!

In this code we uses the display function from the IPython.core.display module along with HTML tags to render a paragraph (<p>) with a centered (<center>) heading (<h3>) to provide a brief description or title for a sample dashboard created using Jupyter Notebook and Voila.

Python3

display(HTML('<p><h3><centre> This is a sample Dashboard made with Jupyter Notebook & Voila</centre></h3></p>'))

Output:

This is a sample Dashboard made with Jupyter Notebook & Voila

To display an HTML-formatted message in a Jupyter environment using the display function. It renders a paragraph (<p>) containing a heading (<h4>) with the text “Import the Dataset.”

Python3

display(HTML('<p><h4> Import the Daaset</h4></p>'))

Output:

Import the Dataset

Here we are uploading the dataset by importing the read csv file and print the data with ” .head()”command.

Python3

reviews = pd.read_csv("winemag_data.csv", index_col=0)
print(reviews.head())

Output:

country                                        description  \
0     Italy  Aromas include tropical fruit, broom, brimston...   
1  Portugal  This is ripe and fruity, a wine that is smooth...   
2        US  Tart and snappy, the flavors of lime flesh and...   
3        US  Pineapple rind, lemon pith and orange blossom ...   
4        US  Much like the regular bottling from 2012, this...   
                          designation  points  price           province  \
0                        Vulkà Bianco      87    NaN  Sicily & Sardinia   
1                            Avidagos      87   15.0              Douro   
2                                 NaN      87   14.0             Oregon   
3                Reserve Late Harvest      87   13.0           Michigan   
4  Vintner's Reserve Wild Child Block      87   65.0             Oregon   
              region_1           region_2         taster_name  \
0                 Etna                NaN       Kerin O’Keefe   
1                  NaN                NaN          Roger Voss   
2    Willamette Valley  Willamette Valley        Paul Gregutt   
3  Lake Michigan Shore                NaN  Alexander Peartree   
4    Willamette Valley  Willamette Valley        Paul Gregutt   
  taster_twitter_handle                                              title  \
0          @kerinokeefe                  Nicosia 2013 Vulkà Bianco  (Etna)   
1            @vossroger      Quinta dos Avidagos 2011 Avidagos Red (Douro)   
2           @paulgwine       Rainstorm 2013 Pinot Gris (Willamette Valley)   
3                   NaN  St. Julian 2013 Reserve Late Harvest Riesling ...   
4           @paulgwine   Sweet Cheeks 2012 Vintner's Reserve Wild Child...   
          variety               winery  
0     White Blend              Nicosia  
1  Portuguese Red  Quinta dos Avidagos  
2      Pinot Gris            Rainstorm  
3        Riesling           St. Julian  
4      Pinot Noir         Sweet Cheeks  

Plot the Scatter Plot

The code uses the Plotly library to create an interactive scatter plot in a Jupyter Notebook or a similar interactive environment visualizing the relationship between the ‘points’ and ‘price’ columns of a DataFrame named ‘reviews’ using an interactive scatter plot.

Python3

import plotly.graph_objs as go
from plotly.offline import init_notebook_mode, iplot
init_notebook_mode(connected=True)

iplot([go.Scatter(x=reviews.head(100)['points'], y=reviews.head(1000)['price'], mode='markers')])

Output:

Plot the 2D Histogram Contour Plot

The code creates an interactive plot using Plotly in a Jupyter Notebook or similar environment. It consists of a 2D histogram contour plot and a scatter plot showcases a combination of a 2D histogram contour plot and a scatter plot to visualize the distribution and relationship between the ‘points’ and ‘price’ columns of a DataFrame named ‘reviews’.

Python3

iplot([go.Histogram2dContour(x=reviews.head(500)['points'],
                             y=reviews.head(500)['price'],
                             contours=go.Contours(coloring='heatmap')),
       go.Scatter(x=reviews.head(1000)['points'], y=reviews.head(1000)['price'])])

Output:

Plot 3D Surface Plot

It creates a 3D surface plot using Plotly in a Jupyter Notebook or a similar interactive environment. It involves data manipulation and visualization. It processes and filters data from a DataFrame named ‘reviews’, transforms it, and generates an interactive 3D surface plot representing the relationship between ‘points’ and ‘price’.

Python3

df = reviews.assign(n=0).groupby(['points', 'price'])['n'].count().reset_index()
df = df[df["price"] < 1000]
v = df.pivot(index='price', columns='points', values='n').fillna(0).values.tolist()
iplot([go.Surface(z=v)])

Output:

Plot Choropleth Map

This code generates an interactive choropleth map using Plotly in a Jupyter Notebook or a similar interactive environment it transforms and processes country data from the ‘reviews’ DataFrame and visualizes it as an interactive choropleth map using Plotly.

Python3

df = reviews['country'].replace("US", "United States").value_counts()
iplot([go.Choropleth(
    locationmode='country names',
    locations=df.index.values,
    text=df.index,
    z=df.values
)])

Output:

Deploy on a Server

Deploying the dashboard on a server using Voila Server:

1. Save Your Jupyter Notebook: Save the Jupyter Notebook containing your dashboard.
2. Open a Terminal or Command Prompt: Open a new terminal or command prompt.
3. Navigate to the Notebook’s Directory: Use the cd command to navigate to the directory where your Jupyter Notebook is saved.
4. Launch Voila: Run the following command in the terminal

Voila Voila_Dashboard.ipynb 

Tips for effective Voila dashboards

• Keep it simple and focused. Avoid overloading the interface with too much information.
• Ensure clear navigation and logical flow between sections.
• Use responsive design to ensure optimal viewing experience on different devices.
• Test and refine your dashboard to ensure smooth user interaction.

Voila beyond the basics

Voila integrates seamlessly with other Python libraries for advanced functionalities like:

• Data streaming and real-time updates with tools like Jupyter-Stream.
• Interactive geospatial visualizations with libraries like Leaflet.
• User authentication and authorization for secure access.

Conclusion

In conclusion, Voila transforms the passive nature of Jupyter Notebooks into dynamic and interactive dashboards, gift a flexible tool for data analysis, analysis, and communication. Whether for educational purposes, business performances, or data-driven administrative, Voila empowers users to share their judgments in a compelling and accessible format.