Voilà— Everything You Need To Know
Table of Contents
- Introduction
- Who Are Voilà & What Is the Framework’s Primary Objective?
- Programming Language Support
- Python Graphing Libraries Supported
- Multi-Page Application Support
- Open Source vs. Proprietary
- Installation & Getting Started
- Prerequisites
- How Easy Is It to Get Started?
- Development — Advantages + Disadvantages
- Prerequisite Skills Needed (Excluding Python)
- Ease of Use
- Design Flexibility
- Jupyter/IPython Support
- Voilà Application Examples
- Deployment — Options, Advantages + Disadvantages
- Authentication Mechanisms
- Maintenance — Advantages + Disadvantages
- Support & Online Prevalence
- Overall Level of Support
- The Voilà GitHub Community
- Voilà’s Online Prevalence
- Helpful Resources
- Communities
- Conclusion & Optimal Use Case
- Bonus: Example Soccer Analytics Dashboard Using Voilà
Introduction
Over the past four months I have been exploring and critically examining the leading frameworks in the Python dashboarding ecosystem. The current industry leaders in this space are Streamlit, Plotly Dash, Voilà, and Panel. As such, I opted to focus my research entirely on these four dashboarding frameworks, as I wanted to focus in-depth on the industry leaders, as opposed to the breadth of dashboarding frameworks available.
As no solidified criteria exist for reviewing and comparing dashboarding frameworks, I had to create my own comparison criteria which made sense in the context of choosing one particular dashboarding framework over another. These criteria can be found in the table of contents above, and each of the four frameworks mentioned will be examined under these criteria.
For my comparison to be more insightful and realistic I have exposed myself to each of the frameworks over a period of months, and have created a shared example dashboard application utilising each of the four frameworks. This allowed me to get a feel for each of the technologies and experience their advantages and disadvantages first-hand.
Next week I will be releasing an critical review of the HoloViz Panel dashboarding framework. So far I have released reviews of Streamlit and Plotly Dash. This will be followed by a comparison article in which I will compare the 4 frameworks directly.
The goal with these articles is not to make you proficient in using each of these frameworks — but rather to detail their strengths, weaknesses, best use cases, and all of the information that you should consider before choosing to utilise one of these frameworks in your own projects.
Who Are Voilà & What Is the Framework’s Primary Objective?
Voilà is unlike the rest of the dashboarding frameworks examined so far, in that it is more-so a server than a fully-fledged dashboarding framework.
Voilà is fully open source. The framework enables users to convert Jupyter/IPython notebooks into stand-alone interactive web-based dashboard applications. It can be launched from the command line or alternatively, used as a Jupyter Notebook extension. The framework’s fundamental objective is to enable a smooth transition from the exploratory phase of data analysis to the communication of the resulting data insights. Voilà was released in late 2018 by open source developers at QuantStack — funded by Bloomberg — and is firmly built upon the existing IPython notebook ecosystem.
In late 2019, Voilà was brought into the Jupyter ecosystem as a sub-project, meaning it is now maintained by the Jupyter community of developers. This means that Voilà will likely be a framework that is here to stay and should become common-place in the data science community in the coming years.
IPYWidgets and other Jupyter widget libraries are the main way to include interactivity in a Voilà application. When you run Voilà on a notebook, it collects the outputs of the code and markdown cells, converts them to HTML, and serves the application as a Tornado app (if ran from the command line) or serves it directly on the Jupyter server (if used as a Jupyter notebook extension). Code cells are not shown unless specified using the command line option ‘–strip_sources=False’.
This is part of the beauty of Voilà — having direct access to a Jupyter kernel without seeing code cells, and without needing to be within the notebook environment itself.
Programming Language Support
Voilà works with any Jupyter kernel and as such is not limited solely to the Python programming language . You can also create Voilà applications using C++ and Julia — making the framework language-agnostic.
Python Graphing Libraries Supported
Voilà works directly with Jupyter, meaning it has support for all of the main Python plotting libraries including Matplotlib, Seaborn, Altair, Vega-Lite, Plotly, Bokeh, PyDeck, and GraphViz.
Multi-Page Application Support
Voilà does not offer explicit support for creating multi-page applications.
It is possible to serve a folder of notebook files with the file directory acting as a form of navigation, with each notebook file being a page in the application, however, this is not really akin to a multi-page application.
Utilising Panel with Voila may offer a potential workaround, as Panel contains full support for creating multi-page applications, enabling users to do so in multiple different ways — such as using Tabs, Pipelines, and Templates. Panel applications can be served on a Voilà server, so this could be a workaround worth investigating. I will discuss this further in next week’s article on Panel.
Open Source vs. Proprietary
Voilà is a fully open source dashboarding framework.
Installation & Getting Started
Useful link:
Voilà is relatively easy to install. Note that not all necessary downloads are found in the ‘Installing Voilà’ section of the docs, but rather found later on in the documentation. It is worth reading through the ‘Using Voilà’ and ‘Customizing Voilà’ sections of the documentation prior to launching a Voila server, to ensure that you have made all the necessary downloads for your particular application.
To install as a stand-alone application run the command ‘pip install Voila’ (or ‘conda install -c conda-forge voila’) in your terminal. To run a notebook file on a Voilà server, use the following command in the terminal — ‘voila my_notebook.ipynb’. Navigate to http://localhost:8866/ to see your notebook file in the browser.
To run Voilà as a Jupyter server extension, launch your Jupyter server and then go to your server URL followed by ‘/voila’ e.g. http://localhost:8888/voila. Before doing this, you must download and enable the server extension using the command ‘jupyter serverextension enableVoila –sys-prefix’.
You can also run Voilà directly from the Jupyter notebook environment by first installing, and then enabling the notebook extension using the following commands: ‘jupyter nbextension install Voila –sys-prefix –py’ & ‘jupyter nbextension enable Voila –sys-prefix –py’.
To stop the Voilà server press CTRL + C in the terminal.
As Voilà can be used in various different ways, referring to the installation documentation and installing the prerequisites in accordance with the way you plan on using Voilà is recommended.
Note that in order to run the example notebooks in the Voilà documentation you will first need to install a few additional Python libraries, namely ipywidgets, ipyvolume, bqplot, & scipy.
Prerequisites
Python 2 or 3
Jupyter Notebooks, JupyterLab, or an IDE to work with notebook (.ipynb) files — depending on your use case.
PIP (or Anaconda)
Not required but recommended: An environment management tool such as pipenv, venv, virtualenv, conda.
To run the example notebooks in the Voilà docs the following Python libraries should be installed — pandas, numpy, ipywidgets, ipyvolume, bqplot, & scipy.
How Easy Is It to Get Started?
It is very easy to get up-and-running with Voilà. Once you have installed the appropriate Python packages you can use Voilà to run Jupyter notebooks as standalone applications right away.
With the choice of using either the command line or Jupyter’s interface itself to serve your applications, getting your applications running should take minimal stress and effort.
Development — Advantages + Disadvantages
A great advantage in working with the Voilà framework is that it works directly with notebook (.ipynb) files. Installing Voilà as a Jupyter notebook extension enables direct access to your dashboard application with just one click from your programming environment.
Because Voilà does not have any specific code elements inherent to the framework, it is incredibly easy to go from programming in your notebook environment to creating an interactive dashboard application from that exact same code.
Another advantage is the optional inclusion or exclusion of notebook code cells.
Voilà is great to show the findings of some data analysis without the code cells cluttering up the view whilst presenting your findings. If you are looking to share some data analysis within your organisation, you can easily include code cells in your dashboard when showing other programmers your data analysis code, but opt to exclude these code cells (displaying only their output) when showing the analysis to team members with no programming experience.
If you wish to include interactivity in your Voilà dashboard applications, familiarity with the ‘ipywidgets’ library (or other IPython widget libraries) will be necessary. When learning to work with Voilà most of my time was spent learning how to use these widget libraries, rather than learning anything specific to the Voilà framework itself. In saying that, it is common to need some knowledge of widgets to create any interactive dashboard interface in any of the main Python dashboarding frameworks.
The main disadvantage with Voilà is its design flexibility. I will discuss this issue in greater detail below, but for now I will just say that you will likely reach a point where structuring the layout and look of your dashboard application will be difficult without some knowledge of HTML, CSS, and Jinja.
Prerequisite Skills Needed (Excluding Python)
No other skills bar Python are explicitly needed to work with Voilà, however, as mentioned above, some knowledge of HTML, CSS, and Jinja is required if you want full design control over the layout and appearance of your dashboard.
Familiarity with the ‘ipywidgets’ library (or other IPython widget libraries) will also be necessary to create a truly interactive dashboard application.
Ease of Use
Voilà in of itself is incredibly easy to use, as it is essentially just an abstraction of your Jupyter notebook environment. Getting familiar with at least one Python widget library will be essential to permit interactivity in your applications though, which some may find difficult to learn. With Voilà it is simple to create a basic dashboard application, however, it is not always straightforward to control the intricacies regarding the application layout and appearance.
Design Flexibility
As of writing, Voilà has limited design flexibility. It has a handful of useful templates, but outside of these templates the only option is to construct your own nbconvert templates (which will require knowledge of HTML, CSS, and Jinja). There is an immediate drawback here as most data scientists do not come from a web development background, and as such may not be proficient in these methodologies.
In saying this, the available templates are certainly a good starting point. You can view notebooks as slideshows using the ‘Voilà-reveal’ template, or as dashboards using the ‘Voilà-gridstack’ template — which enables users to drag and drop code cells into a layout of their choice, before editing the notebook metadata to make the layout permanent. Other commonly used templates are ‘Voilà-vuetify’ and ‘Voilà-material’. Templates can be activated using the ‘–template=templateName’ optional argument when launching Voilà.
It is also possible to exploit HTML and CSS code directly in your application using the ipywidgets library’s in-built styling functionality. Using the GridSpecLayout provided in the ipywidgets library is also another way to control the layout of certain elements within your Voilà application. I will not discuss the intricacies of this approach here, however, the documentation provided for the ipywidgets library is comprehensive. For my own example soccer analytics dashboard at the bottom of this article I have used the GridSpecLayout, so this code can be used as a basic reference, if needed.
Voilà do not currently have a wide choice of ‘themes’ for styling your application, with majority of the templates above only having a ‘light’ or dark’ theme option. Again, this means that if you want to create an dashboard interface with styling outside of these basic theme options, you will have to create the CSS styles yourself, and create a a new Voilà template to apply your new application style — as you can not import CSS stylesheets directly into your application without first creating a new Voilà template. This is not helped by the fact that the Voilà documentation for creating your own template is currently out of date, with the directory structures and names no longer matching up with what is in the documentation. An issue has been opened on the Voilà GitHub repository regarding this in early February, but there has still been no documentation update as of yet (14/03).
Overall, if you want to have full control over your dashboard’s appearance you will need to become familiar with the technologies mentioned above, which is not desirable in everyone’s case.
I will include a link to the Jupyter Widgets documentation on styling in the ‘Helpful Resources’ section at the bottom of this article, as this is the resource I used predominantly to style my Voilà applications.
Jupyter/IPython Support
Voilà works directly with IPython notebook files. It works directly from the Jupyter notebook interface as an extension, as well as with the Jupyter server, and JupyterLab.
As mentioned previously, in late 2019 Voilà was brought into the Jupyter ecosystem as a Jupyter sub-project.
Out of the 4 main Python dashboarding frameworks, Voilà undoubtedly provides the best Jupyter/IPython support.
Voilà Application Examples
Many detailed examples of Voilà applications — along with their source code — can be found on the Voila gallery website:
Deployment — Options, Advantages + Disadvantages
Useful link:
Voilà comes with a myriad of deployment options, making it easy to share your dashboard applications with the world. In the ‘Deploying Voilà’ section of the documentation (linked above) the general process which should be followed to deploy your voilà application is described, as well as examples of steps to be taken in deployment to certain cloud providers and web servers. Deployment to Binder, Heroku, and Google App Engine are described in detail, alongside steps to deploy an application running on Voilà to a private server. Details on deployment using an Nginx web server are also provided, with the steps to be taken for an Apache server being similar.
Steps for the aforementioned platforms are described in the documentation, however these are not the only possible deployment options. Deploying to AWS, Google Cloud Platform, Azure, and JupyterHub is also possible, and guides can be found online to assist you in whatever steps are necessary for the platform you choose for deployment.
The docs also contain steps on how to share Voilà applications using ngrok, a tool which can used to share local servers over the internet securely, for those scenarios when you quickly want to share some data analysis or an application without needing to deploy your app.
Deployment of Voilà applications on JupyterHub using the ‘ContainDS Dashboards’ extension is also possible. This is an easy route for people with no prior experience deploying applications. From the ContainDS documentation, ‘ContainDS Dashboards is an extension for JupyterHub that allows users to instantly publish notebooks and other source code files as user-friendly interactive dashboards to share with non-technical colleagues’. You can find out more about deployment using this route here.
For a detailed example of deployment using Binder:
For a detailed example of deployment using Heroku:
Authentication Mechanisms
Voilà does not currently contain out of the box authentication mechanisms. There are workarounds to include authentication layers in your Voilà applications by including authentication on the server to which you deploy your Voilà application, for example through customising the configuration settings for the Tornado application, or through JupyterHub (with ContainDS Dashboards).
Here is a potentially useful thread discussing user authentication from the Voila GitHub repository:
Maintenance — Advantages + Disadvantages
To test how easy it is to maintain a Voilà application, I created a basic dashboard using Voilà a few months piror to writing. On returning to my application nothing had broken due to deprecation, and the dashboard still functioned and looked as it did when it was first created.
Voilà do not maintain an outward-facing change log, which may make it difficult to find out if a feature you are using has become deprecated, or is planned to become deprecated. There was a thread on the Voilà GitHub repository mentioning the potential inclusion of a change log back in 2019, however, I was unable to find any progress on this issue. In saying that, Voilà do host public meetings discussing changes, bugs, and the framework’s roadmap items multiple times a month. There are meeting notes available from September 2019 — July 2020, which is the closest thing I’ve found to release notes for the framework.
Luckily though, maintenance of Voilà applications is very easy. The framework does not contain any Voilà-specific code elements, and as such, the maintenance of the application is made incredibly simplistic, as it is merely maintaining Python code.
Support & Online Prevalence
Overall Level of Support
There is no direct Voilà support email, however, Voilà has the closest thing to a dedicated support chat out of the 4 frameworks examined. The linked support chat is maintained by QuantStack, the creators of the Voilà framework, where you can ask any question about QuantStack projects to the developers that worked on said projects. Special thanks to Carlos Herrero for making me aware of this support chat. Likewise, Voilà do not have their own support forum, however, questions or issues regarding the framework are handled on the greater Jupyter community forum.
The best place to look for support when using Voilà is on the framework’s GitHub repository’s Issues section. User posts are common here and Voilà’s primary contributors, such as Maarten Breddels, frequent the forum, responding to posts. Most issues posted are eventually resolved by either the people who contributed to the framework itself, or other users within the community.
The Voilà Github Community
Below I will summarise some of the key statistics from Voilà’s GitHub page. These numbers can give an idea of how active the community is, as well as its popularity. All stats provided are as they were in late January 2021.
Stars: 3k
Forks: 287
Issues: 172 Open, 269 Closed
Contributors: 43
Voilà’s Online Prevalence
Another thing that is worth considering when looking at potentially using a newer framework is its online prevalence and general popularity. Choosing a framework which has a good presence online is essential for when you run into any issues when utilising the framework. If the online presence of the framework is low, then attempting to find a solution to your issue will be more difficult. Three good places to search to get an inclination of a framework’s online presence are Google, Stack Overflow, and the ‘Issues’ section of the official framework repository.
A Google search for ‘voila dashboard’ returns 1,090,000 results.
A Stack Overflow search for ‘voila dashboard’ returns 75 results.
The Voilà GitHub repository’s Issues section has 269 closed issues and 172 open issues.
These searches will give you an idea of the support that you will receive if you do come across an issue you can’t resolve by yourself.
Helpful Resources
Inception Article: https://blog.jupyter.org/and-voil%C3%A0-f6a2c08a4a93
GitHub: https://github.com/voila-dashboards
Docs: https://voila.readthedocs.io/en/stable/index.html
GitHub Issues: https://github.com/voila-dashboards/voila/issues
Support Forum: https://discourse.jupyter.org/search?q=voila
Public Video Meetings + Notes: https://voila-dashboards.github.io/
Gallery: https://voila-gallery.org/
Layout & Styling of Jupyter Widgets: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html
Communities
GitHub: https://github.com/voila-dashboards
GitHub Issues: https://github.com/voila-dashboards/voila/issues
Jupyter Discourse Forum: https://discourse.jupyter.org/
Conclusion & Optimal Use Case
Taking everything into account, I would say Voilà’s number one use case is to utilise the framework in a scenario where you have a Jupyter/IPython Notebook with some data analysis already conducted, and you want to share the data insights with colleagues without the code cells cluttering up the view.
It is a brilliant framework for sharing data analysis internally in an organisation where not everyone is familiar with the Jupyter notebook interface. Including widgets — enabling users to interact directly with your data analysis — can lead to enhanced insights and a stronger connection between viewers and your data analysis.
Voilà is strong in that it has good support, and it works directly with notebook files exactly as they are. This offers great speed in creating dashboards from already existing notebooks, allowing rapid dashboard prototyping.
I feel that if you’re trying to create a fully-fledged interactive dashboard application you will at some stage run into layout and design issues and constraints that will be difficult to fix with a Python-only background.
I would also have concerns regarding how much load a Voilà application could legitimately handle in a large-scale application with hundreds of thousands of users, seeing as the the code cells are ran in sequential order on visiting a deployed Voilà application. Further testing would need to be done to examine this concern if you plan to create a Voilà application which aims to serve many users.
Another great use case of Voilà is generating reports of data analysis conducted in notebook files. Using Voilà, it is possible to de-clutter the report, removing code cells and only displaying their outputs.
All in all, Voilà is a great project. I do not personally think it is a competitor to Plotly Dash or Streamlit in being a fully-fledged dashboarding framework, however, I don’t think that was ever the vision of the project. In their inception article it says, ‘The goal of Project Jupyter is to improve the workflows of researchers, educators, scientists, and other practitioners of scientific computing, from the exploratory phase of their work to the communication of the results’, with Voilà acting as the mechanism for communication of data findings — and assuredly, this is where the Voilà framework shines above the other frameworks in the Python dashboarding ecosystem.
Voilà is a great tool for reliably and efficiently reporting data insights across an organisation.
Bonus: Example Soccer Analytics Dashboard Using Voilà
The goal for this section was to draw a sketch of a dashboard layout I wanted to make and then use each of Streamlit, Dash, Voilà, and Panel to create a dashboard application as close as possible to this rough sketch.
Again, the goal here is not to explain the intricacies of programming with Voilà, but rather to demonstrate the framework’s strengths and weaknesses through a real example.
I have split the coding sections up into ‘Baseline Code’ and ‘Voilà Code’.
The ‘Baseline Code’ represents the bare bones code that was written in standard Python to create each element of the dashboard — namely the library imports, the functions needed to produce the plots, and the code to read in and clean the data.
The ‘Voilà Code’ section demonstrates how to create a dashboard application from the original base Python script. Although the section is titled ‘Voilà Code’, there are no inherent coding elements that belong to Voilà — that is to say, all of the code is written in pure Python, and using Jupyter Widget libraries, with Voilà then used to serve the dashboard as a standalone application.
Baseline Code:
#library imports
import numpy as np
import pandas as pd
import plotly.graph_objects as go
import plotly.express as px
from PIL import Image, ImageOps
import requests
from IPython.display import display, clear_output, HTML#start of computation
epl_strikers_df = pd.read_csv("data/epl_top_strikers_2020_2021.csv")#convert columns to integers
columns_to_convert_to_ints = ['stats.shots.shots_total','stats.shots.shots_on_goal','stats.goals.scored','stats.passing.total_crosses','stats.passing.crosses_accuracy','stats.passing.passes','stats.passing.accurate_passes','stats.passing.passes_accuracy','stats.passing.key_passes','stats.dribbles.attempts','stats.dribbles.success','stats.dribbles.dribbled_past','stats.other.aerials_won','stats.other.offsides','stats.other.hit_woodwork','stats.other.minutes_played']
epl_strikers_df[columns_to_convert_to_ints] = epl_strikers_df[columns_to_convert_to_ints].astype('Int64')def get_and_display_player_image(player):
df = epl_strikers_df
image_url = df[df['player_name'] == player]['player_image_path'].values[0]
image = ImageOps.expand(Image.open(requests.get(image_url, stream=True).raw),border=2,fill='black')
image = image.resize((300, 300)) display(image)def apply_consistent_style(fig):
fig.update_yaxes(showgrid=False)
fig.update_xaxes(showgrid=False)
fig.update_yaxes(title_font=dict(size=16, color='white'), tickfont=dict(family='Courier', color='white', size=14))
fig.update_xaxes(title_font=dict(size=16, color='white'), tickfont=dict(family='Courier', color='white', size=14)) fig.update_layout(title_font=dict(size=18, family='Arial'), title_x=0.5, title_font_color='white', margin=dict(l=5,r=5,b=10,t=50,pad=0))
fig.update_layout({'plot_bgcolor': 'rgba(0, 0, 0, 0.5)', 'paper_bgcolor': 'rgba(0, 0, 0, 0.3)'})
return figdef plot_horizontal_bar(player):
df = epl_strikers_df
df = df.groupby(['player_name'])['stats.goals.scored'].sum().sort_values(ascending = True)
df = df.reset_index()
x = df['stats.goals.scored'].tolist()
y = df['player_name'].tolist()
fig = px.bar(df,
x=x,
y=y,
orientation='h',
title='Top Goal Scorers - EPL 2020/2021 - Up to Game Week ' + str(df.shape[0]),
height=400,
text=x,
labels={'x':'Goals', 'y':'Player Name'}) fig.update_traces(hovertemplate=None, hoverinfo='skip') fig.update_layout(xaxis_title="Goals Scored", yaxis_title="Player", plot_bgcolor="#FAFAFA")
fig.update_traces(textposition='outside', textfont={'color': 'white'}) colours = ['blue',] * df.shape[0]
colours[df[df['player_name'] == player].index[0]] = 'crimson'
fig.update_traces(marker_color=colours)
fig = apply_consistent_style(fig)
fig.update_yaxes(title_font=dict(size=16, color='white'), tickfont=dict(family='Courier', color='white', size=12))
fig.update_xaxes(title_font=dict(size=16, color='white'), tickfont=dict(family='Courier', color='white', size=14))
fig.show(config={"displayModeBar": False, "showTips": False});
def plot_line_plot(player):
df = epl_strikers_df df = df[df['stats.shots.shots_total'].notna()]
x = df[df['player_name'] == player][['stats.shots.shots_total', 'fixture_string']]['fixture_string']
y = df[df['player_name'] == player][['stats.shots.shots_total', 'fixture_string']]['stats.shots.shots_total']
y1 = df[df['player_name'] == player][['stats.shots.shots_on_goal', 'fixture_string']]['stats.shots.shots_on_goal'] fig = go.Figure()
fig.add_trace(go.Scatter(x=x, y=y,
mode='lines+markers', name="Taken"))
fig.add_trace(go.Scatter(x=x, y=y1,
mode='lines+markers', name="On Target"))
fig.update_layout(title= player + " Shots Per Game - 2020/2021",height=400, xaxis_title="Fixture Date", yaxis_title="Shots Taken/On Target") fig.update_xaxes(tickangle=-60,
tickmode = 'array',
tickvals = x,
ticktext= [y[-11:-1] for y in x])
fig.update_layout(hovermode="x unified")
fig.update_layout(hoverlabel=dict(bgcolor="white",font_size=12,font_family="Rockwell")) fig.update_layout(showlegend=False)
fig = apply_consistent_style(fig)
fig.show(config={"displayModeBar": False, "showTips": False});
def plot_scatter_plot(player):
df = epl_strikers_df df = df[df['stats.passing.accurate_passes'].notna()]
x = df[df['player_name'] == player]['stats.passing.accurate_passes']
y = df[df['player_name'] == player]['stats.passing.passes']
x = np.array(x, dtype=float)
y = np.array(y, dtype=float)
fig = px.scatter(df,
x=x,
y=y,
title= player + " Attempted Passes vs. Accurate Passes - 2020/2021",
height=400,
labels={'x':'Completed', 'y':'Attempted'}, trendline='ols', trendline_color_override="red") fig.update_layout(xaxis_title="Accurate Passes", yaxis_title="Attempted Passes") fig.update_traces(marker_color='blue') fig = apply_consistent_style(fig)
fig.update_xaxes(showgrid=True)
fig.update_yaxes(showgrid=True)
fig.show(config={"displayModeBar": False, "showTips": False});
Voilà Code:
#widget imports
import ipywidgets as widgets
from ipywidgets import interactiveplayer_select_widget = widgets.Dropdown(
value='Bruno Fernandes',
description='Choose A Player for Analysis:',
options=list(epl_strikers_df['player_name'].unique()),
layout = {'width':'90%'},
style = {'description_width': 'initial'}
)player_select_widget_container_layout = widgets.Layout(display='flex',
flex_flow='column',
align_items='center',
width='100%')player_select = widgets.HBox(children=[player_select_widget],layout=player_select_widget_container_layout)
#create application elements
player_selection_view = player_select
player_image_view = widgets.interactive(get_and_display_player_image, player=player_select_widget)
h_bar_view = widgets.interactive(plot_horizontal_bar, player=player_select_widget)
line_plot_view = widgets.interactive(plot_line_plot, player=player_select_widget)
scatter_plot_view = widgets.interactive(plot_scatter_plot, player=player_select_widget)#observe for changes in the dropdown
player_image_view.observe(lambda x: player_select_widget.update(), 'value')
h_bar_view.observe(lambda x: player_select_widget.update(), 'value')
line_plot_view.observe(lambda x: player_select_widget.update(), 'value')
scatter_plot_view.observe(lambda x: player_select_widget.update(), 'value')#set new value for 'player_select_widget' so graphs appear on running Voila
player_select_widget.value = 'Harry Kane'
#place application elements into a gridspec layout grid
grid = widgets.GridspecLayout(2, 4, layout=widgets.Layout(justify_content='center', align_items='center'))
grid[0, 0] = player_image_view.children[-1]
grid[0, 1:] = h_bar_view.children[-1]
grid[1, 0:2] = line_plot_view.children[-1]
grid[1, 2:4] = scatter_plot_view.children[-1]title_html = """
<h1>Voilà Example Soccer Analytics Dashboard</h1>
"""app_contents = [widgets.HTML(title_html, layout=widgets.Layout(margin='-1em auto 1em auto',max_width='90%')),
player_selection_view,
grid]
app = widgets.VBox(app_contents, layout=widgets.Layout(max_width='90%', margin='0 auto 0 auto'))display(app)
Below, I will demonstrate running the application from the Jupyter notebook environment, as well as running the application with some additional optional parameters from the command line.
Running The Dashboard From The Jupyter Notebook Environment:
Running The Dashboard From The Command Line With Optional Parameters:
Thank you for reading!
If you enjoyed this article feel free to give it a clap and a share. How has your experience with Voilà been? Are there any issues or features you’ve encountered that weren’t touched upon in this article? Let me know below!
Although every aspect of this article was thoroughly researched, due to the scope of the content herein and the everchanging nature of these newer dashboarding frameworks some aspects may be incorrect or have become outdated. I have checked the veracity of every sentence in this article, however, it is still possible I may have made a mistake. If you notice any inaccuracies please comment them below or message me on LinkedIn so that I can rectify them. Thank you!
Follow me on Medium to keep up to date with the final article in this series on Panel. Be sure to check out the previous articles on Streamlit and Plotly Dash.
Find out more about me on my LinkedIn.
Stephen Kilcommins
