Introduction to widgets in Jupyter notebook: Build your own Dashboard

Jupyter notebooks are an open document format based on JSON. It is one of the most used data science tools among data scientists. In Jupiter notebook, to change the output of the cell or to get desired value out of the cell we need to run it again, this can be tedious and error-prone work. To reduce these drawbacks, we can use create interactive widgets, these GUI widgets help make notebooks look lively and interactive. You can show results by using different widgets like buttons, sliders, drop-downs, etc.
ipywidgets is the open-source library that helps us to embed those widgets in our Jupiter notebook. In this article will we learn and code basics widgets provided by the library and finally we will create a dashboard like Pandas profiler to showcase some information about our dataset.

Getting started

We need to first install the ipywidgets library. If you are using pip then type the command below to install the library.

All Code for the blog is present here - ahmadkhan242/jupyter_widgets.ipynb
Google colab - colab/ahmadkhan242/jupyter_widgets.ipynb

pip install ipywidgets 
# To enable `ipywidgets`
jupyter nbextension enable --py widgetsnbextension

For conda environament :

conda install -c conda-forge ipywidgets

Let’s get started

We first need to import the module in our notebook, you can import as shown below

import ipywidgets as widgets

Sliders

To use any widgets we first need to initialize the widgets and then display them using the display function from the `IPython.display` library.

from IPython.display import display
slider = widgets.IntSlider()
display(slider)

In the above code, we initialize the slider using default config, you can change the min and max values, also we can add description too.

widgets.IntSlider(
    min=0,
    max=10,
    step=1,
    description='Slider:',
    value=3
)

Button

Similar to what we did in slider, we need to first initialise the button widget and than display it.

btn = widgets.Button(description='Widget')
display(btn)

Currently, the button is doing nothing so we will add an event to the button. So when the button is pressed some event will get executed. We first create a function,

def button_eventhandler(obj):
    print('Hello from the {} button!'.format(obj.description))

Now, we will bind the function to the button we created above using the button’s `on_click` method and display it.

btn.on_click(button_eventhandler)
display(btn)

Dropdown

For this section, we will use a dataset to explore other widgets. The data-set we are going to use is Titanic which can be downloaded from here – Link. After downloading the dataset we will load the dataset into a data frame using the pandas library:

import pandas as pd
url="https://raw.githubusercontent.com/datasciencedojo/datasets/master/titanic.csv"
df = pd.read_csv(url)

We will first initiate the dropdown widget with the options which is a list, here will define two options for our dropdown. First will be DF head, which shows us the head of the DataFrame, and second will be DF info, which will provide the information of the DataFrame. Let’s begin:

dropdown = widgets.Dropdown(options =["DF head", "DF info"])
display(dropdown)

The dropdown widget has a method called observe which checks on the change in the dropdown, it takes a function that will be executed when there is a change in the dropdown widget. To display the changes we will use the output widget.

Output widget – it is a special kind of widget with captures an output of one cell and can be displayed in another display. But here we will capture the output of the dropdown widget when we select different options.

dropdown = widgets.Dropdown(options =["None", "DF head", "DF info"])
output = widgets.Output()
def select(change):
  output.clear_output()
  if(change.new == 'None'):
    with output:
      display("Select an option")
  elif(change.new == 'DF head'):
    with output:
      display(df.head())
  elif(change.new == 'DF info'):
    with output:
      display(df.info())
  else:
    with output:
      display("Error: option not found")
  
dropdown.observe(select, names="value")
display(dropdown)
display(output)

Text field

There are different ways to initiate text field, listed below:

1. widgets.Text()
2. widgets.IntText()
3. widgets.FloatText()
4. widgets.BoundedIntText() and widgets.BoundedFloatText(), …., etc.

You can read about these widgets from the associated link. We will be using the first widget that is widgets.Text()

text = widgets.Text(description="Text - ")
out = widgets.Output()
def select(change):
    out.clear_output()
    with out:
      display("Entered value - "+change.new)
  
text.observe(select, names="value")
display(text)
display(out)

HBox and VBox

HBox and VBox are stacking widgets, these widgets use to arrange different widgets into horizontal space or vertical space. I am using the Text widget to show the example of HBox and VBox.

text = widgets.Text(description="Text - ")
out = widgets.Output()
def select(change):
    out.clear_output()
    with out:
      display("Entered value - "+change.new)
  
text.observe(select, names="value")

hbox = widgets.HBox([text, out])
display(hbox)

text = widgets.Text(description="Text - ")
out = widgets.Output()
def select(change):
    out.clear_output()
    with out:
      display("Entered value - "+change.new)
  
text.observe(select, names="value")

vbox = widgets.VBox([text, out])
display(vbox)

Dashboard( Mini Panda’s profiler)

Finally we are going to build a mini version of panda’s profiler(dashboard) with four key features:

1. DataFrame Head
2. DataFrame Info
3. Unique values in the chosen column
4. Graph b/w two different columns

To achieve the given feature into a dashboard, we going learn about one more Important widget.

Tab widget – Tab widget will create a container for each feature. Tab widget takes a list of widgets to create tabs for each widget. We have shown you earlier in the blog how you can show the DataFrame head and info. We showed you how to chose from the dropdown option and show results accordingly. We can create widgets for all features with the code given below:

#################-- DataFrame Head --#################
output_df_head = widgets.Output()
output_df_head.clear_output()
with output_df_head:
    print(df.head())

#################-- DataFrame Info --#################
output_df_info = widgets.Output()
output_df_info.clear_output()
with output_df_info:
    print(df.info())

#########-- Unique values in chosen column --#########
dropdown_columns = widgets.Dropdown(options = df.columns, description = "Column - ")
output_df_unique = widgets.Output()

def dropdown_columns_eventhandler(change):
  output_df_unique.clear_output()
  ot = df[change.new].unique()
  with output_df_unique:
    display(ot)

dropdown_columns.observe(dropdown_columns_eventhandler, names='value')
dashboard_unique = widgets.VBox([dropdown_columns, output_df_unique])

#########-- Graph b/w two different columns --########
output_df_graph = widgets.Output()
dropdown_c1 = widgets.Dropdown(options = df.columns, description = "Column x - ")
dropdown_c2 = widgets.Dropdown(options = df.columns, description = "Column y - ")

def common(x='PassengerId', y = 'Pclass'):
  output_df_graph.clear_output()
  gf = df.plot(x=x, y=y, style='o')
  with output_df_graph:
    display(gf)

def dropdown_c1_eventhandler(change):
    common(change.new, dropdown_c2.value)
def dropdown_c2_eventhandler(change):
    common(dropdown_c1.value, change.new)

dropdown_c1.observe(dropdown_c1_eventhandler, names='value')
dropdown_c2.observe(dropdown_c2_eventhandler, names='value')

dashboard_graph = widgets.VBox([dropdown_c1, dropdown_c2, output_df_graph])

Now we can use each widgets output to display in tab container, as shown below:

tab = widgets.Tab([output_df_head, output_df_info, dashboard_unique, dashboard_graph])
tab.set_title(0, 'DataFram Head')
tab.set_title(1, 'DataFram Info')
tab.set_title(2, 'Unique values in column')
tab.set_title(3, 'Graph: Column vs column')
display(tab)

Conclusion

In this blog, we have learned about different widgets that can be used in Jupyter Notebook. These GUI widgets help make notebooks look lively and interactive. We have seen examples of slider, button, text, dropdown, and Tab widgets. And finally, we also created a dashboard a mini version of the panda profiler. You can read about a whole lot of Widgets provided by the ipywidgets library here – Link

I hope this blog is useful to you and you have learned something new, if you like this blog share it with your friends. Read more awesome content on my blog website – http://code-ml.com/

References

• https://ipywidgets.readthedocs.io/en/stable/index.html
• https://towardsdatascience.com/bring-your-jupyter-notebook-to-life-with-interactive-widgets-bc12e03f0916