Complete Guide to Voila to Turn a Jupyter Notebook Into a Standalone Web Application

In this article, we will explore how easily and effortlessly we can use Voila to create reports and dashboards.
voila

Advertisement

Voila, an open-source python library that is used to turn the jupyter notebook into a standalone web application It supports widgets to create interactive dashboards, reports, etc. Voila launches a kernel when it is connected to a notebook and executes all the cells but it does not stop the kernel there so that the user can interact with the output.

Voila converts the jupyter notebook into HTML and returns it to the user as a dashboard or report with all the inputs excluded and the outputs included. Voila supports all the python libraries for widgets such as bqplot, plotly, ipywidgets, etc.

THE BELAMY

Sign up for your weekly dose of what's up in emerging technology.

Voila is framework and language agnostic which means that voila can work with any jupyter kernel whether it is C++ or Python, etc. because it is built on jupyter standard protocols. 

Voila is useful in many ways because of its extensibility and usability, it can serve as a solution for Data Science or Business Analyst professionals to share their work which is relevant for the end-user or client. In this article, we will explore how easily and effortlessly we can use Voila to create reports and dashboards

Implementation of Voila in Python:

Like any other library, we will install Voila using pip install voila. After installing voila we need to open the jupyter notebook to check that a new tab named Voila is added in the toolbar.

  1. Importing required libraries

As Voila supports Plotly so we will be using plotly in this article, other than that we will be using pandas for loading the data.

import plotly.express as px

import plotly.graph_objects as go

import pandas as pd

  1. Loading the dataset

We will be using stock data of a firm which can be downloaded from any financial website like Yahoo Financial, I have downloaded data for ‘Biocon Pharmaceuticals’ and stored it in a CSV file. The data contains Date, Opening Price, Closing price, etc.

df = pd.read_csv(‘biocon.csv’)

df.head()

     c. Adding Some Information regarding Stock

We will add some information regarding the company whose dataset we are working on i.e. Biocon Pharmaceuticals so that our dashboard/application will be informative. 

info = ”’Biocon Limited is a globally recognized, innovation-led organization that is enabling access to high quality, advanced therapies for diseases that are chronic, where medical needs are largely unmet and treatment costs are high. We are driven by the belief that the pharmaceutical industry has a humanitarian responsibility to provide essential drugs to patients who are in need and to do so with the power of innovation. In line with this belief, Biocon has developed and commercialized a differentiated portfolio of novel biologics, biosimilars, and complex small molecule APIs in India and several key global markets, as well as, generic formulations in the U.S. and Europe. We are a leading global player for biosimilars and APIs for statins, immunosuppressants and other speciality molecules, with customers in over 120 countries.”’

print(info)

     d. Using Plotly to create Charts

We will create different plots that are used to analyze the stock market data. We will use the markdowns for giving the name of the charts so that it reflex in the dashboard/application.

  • Candlestick Chart

fig1 = go.Figure(data=[go.Candlestick(x=df['Date'],

                open=df['Open'],

                high=df['High'],

                low=df['Low'],

                close=df['Close'])])

fig1.show()

  • Line Chart

fig2 = px.line(df, x='Date', y='High')

fig2.show()

  • OHLC Chart

fig3 = go.Figure(data=go.Ohlc(x=df['Date'],

                    open=df['Open'],

                    high=df['High'],

                    low=df['Low'],

                    close=df['Close']))

fig3.show()

  • Area Chart

fig4 = px.area(df, x=df['Date'], y=df['High'])

fig4.show()

Converting Notebook to Web Application

Now we will use Voila to create the dashboard/application in just a single click. As seen above now we will click the Voila tab in the toolbar section to launch voila. As soon as we click Voila it will launch voila in a new window and start executing the commands one by one.

Voila

After Execution, the Dashboard/Application is created which will display all the outputs without the code. I have added markdowns for different sections as you will see below in the images of the Voila Dashboard/Application.

  1. Info Section
Voila
  1. Analysis using Charts
Voila
Voila

In the above images, we saw how Voila rendered our jupyter notebook and converted it into a dashboard/application. All the graphs are created using plotly so these graphs are highly interactive and downloadable. We can also launch voila using the command prompt by using Voila <filename.ipynb>

Similarly, we can create a different application using different Python libraries which are used to control data using widgets.  

Conclusion:  

In this article, we saw how we can use Voila to create a dashboard/application. We created a stock analysis dashboard/application using plotly and Voila. Voila is blazingly fast and we can share the results created using voila to others also. It is highly extensible, flexible, and has high usability.

More Great AIM Stories

Himanshu Sharma
An aspiring Data Scientist currently Pursuing MBA in Applied Data Science, with an Interest in the financial markets. I have experience in Data Analytics, Data Visualization, Machine Learning, Creating Dashboards and Writing articles related to Data Science.

Our Upcoming Events

Conference, in-person (Bangalore)
MachineCon 2022
24th Jun

Conference, Virtual
Deep Learning DevCon 2022
30th Jul

Conference, in-person (Bangalore)
Cypher 2022
21-23rd Sep

3 Ways to Join our Community

Discord Server

Stay Connected with a larger ecosystem of data science and ML Professionals

Telegram Channel

Discover special offers, top stories, upcoming events, and more.

Subscribe to our newsletter

Get the latest updates from AIM
MORE FROM AIM