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:
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:
- Save Your Jupyter Notebook: Save the Jupyter Notebook containing your dashboard.
- Open a Terminal or Command Prompt: Open a new terminal or command prompt.
- Navigate to the Notebookâs Directory: Use the
cd
command to navigate to the directory where your Jupyter Notebook is saved. - 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.
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.