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

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

Himanshu Sharma
voila
W3Schools

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.

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'],

See Also
Deep Learning

                    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.

What Do You Think?

If you loved this story, do join our Telegram Community.


Also, you can write for us and be one of the 500+ experts who have contributed stories at AIM. Share your nominations here.

Copyright Analytics India Magazine Pvt Ltd

Scroll To Top