Dashboarding with Python using Voilà-gridstack template

Sanrachna Foundation
Abstract Publication
5 min readJul 13, 2021

By Satyabrata Sahoo, Technical Lead, Sanrachana

Photo by David Pupaza on Unsplash

Numbers is an efficacious storytelling approach because it allows people to include a plethora of information in a short space — like a statistic, chart, or infographic.

Additionally, numbers can avail make more abstract conceptions genuine and lend ascendancy to content. A collection of numbers gathered to get some information is called Data.

When we entered into data analysis, communication is the primary factor. Profoundly, data analysis is a method of accumulating, cleansing, transforming, and modelling data to discover useful information, apprising conclusions, and fortifying decision-making. When we talk about data analysis, data visualization plays a vital role in understanding the information comfortably and digestible.

Dashboards take our data visualization and the decision to the next level. In a dashboard, we connect different components, each component present in the form of a chart, a matrix, or a table and make a whole and integrated visualization.

We have a prominent number of tools to engender interactive dashboards without leaving our favourite data science environment. There are different leading frameworks in the Python dashboarding ecosystem. Out of these, the major frameworks are Voilà, Streamlit, Plotly Dash, and Panel. This article will create an interactive dashboard with Python using Voilà, Voilà-gridstack template, and Jupyter Notebook.

Voilà:

Voilà is nothing but a Jupyter rendering tool used as a standalone interactive web-based dashboard application or a Jupyter server extension. Voilà allows us to convert a Jupyter Notebook into an interactive dashboard and will enable us to share our work with others. It is a fully open-source dashboarding framework. We can also engender interactive reports with widgets in Jupyter notebook using ipywidgets, an interactive HTML widget for Jupyter notebooks. Voilà works with Jupyter notebook and not constrained to the Python programming language. We can also engender Voilà applications using C++ and Julia.

Voilà-gridstack:

Voilàgridstack gives an extension for the classic notebook to edit the gridstack layout from the notebook interface. It helps to design dashboards within Jupyter notebooks and deploy them with Voilà.

Let us create an Interactive Dashboard with Voila:

Before going into the dashboard creation stage, let’s first install Voilà. Voilà can be installed with the mamba or Conda package manager.

or from PyPI:

Once Voilà is installed, it can be used either as a Command-Line Interface or as a Jupyter Server extension. Secondly, install Voilà Grid-stack, which is installed with the mamba package manager

or from PyPI:

Now import the libraries that we need. This article will use Plotly Express for data visualization and creating interactive graphs.

We use different built-in demo datasets like stocks, gapminder, and iris under Plotly Express and flights dataset from seaborn. Let us create a line chart plot with the stock dataset by taking Apple, Amazon and Google monthly stock value.

Next to creating a bar chart plot with gapminder dataset by taking the population in the Europe continent in the year 2007.

We are creating a Pie chart with different mobile phones shares by using Plotly Express.

Next to creating a 3-D scatter chart with a flight dataset by taking month, year, and the number of passengers.

We are creating a world map with different continent countries population in 2007.

Next, create an animation chart with different continents GDP per capita, life expectancy, and countries population in 2007.

All set to create a dashboard from the jupyter notebook, and now we have to configure the Voilà-gridstack template. Now, we customize the dashboard utilizing the Voilà-gridstack extension available in Jupyter Notebook. In the final step, we can customize the dashboard design as per our requirements. The below figure shows the interactive dashboard with Voilàgridstack with drag and drops functionality.

--

--

Sanrachna Foundation
Abstract Publication

We work on health, climate, IP, innovation, education, law, economics, and society using data & behavioural science as lens. www.sanrachna.foundation