{"id":26,"date":"2021-05-22T03:11:10","date_gmt":"2021-05-22T03:11:10","guid":{"rendered":"https:\/\/code-ml.com\/?p=26"},"modified":"2021-09-14T00:51:37","modified_gmt":"2021-09-14T00:51:37","slug":"introduction-to-widgets-in-jupyter-notebook-build-your-own-pandas-profiler","status":"publish","type":"post","link":"https:\/\/codeml.ai\/index.php\/2021\/05\/22\/introduction-to-widgets-in-jupyter-notebook-build-your-own-pandas-profiler\/","title":{"rendered":"Introduction to widgets in Jupyter notebook: Build your own Dashboard"},"content":{"rendered":"

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<\/a> 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<\/a> to showcase some information about our dataset.<\/p>\n

Getting started<\/h3>\n

We need to first install the ipywidgets<\/strong> library. If you are using pip then type the command below to install the library.<\/p>\n\n\n

All Code for the blog is present here - <\/strong>ahmadkhan242\/jupyter_widgets.ipynb<\/a>\nGoogle colab - <\/strong>colab\/ahmadkhan242\/jupyter_widgets.ipynb<\/a><\/pre>\n\n\n\n
pip install ipywidgets \n# To enable `ipywidgets`\njupyter nbextension enable --py widgetsnbextension<\/code><\/pre>\n\n\n\n
For conda environament :<\/p>\n\n\n\n
conda install -c conda-forge ipywidgets<\/code><\/pre>\n\n\n\n
Let’s get started<\/h2>\n\n\n\n
We first need to import the module in our notebook, you can import as shown below<\/p>\n\n\n\n
import ipywidgets as widgets<\/code><\/pre>\n\n\n\n
Sliders<\/a><\/strong><\/h3>\n\n\n\n
To use any widgets we first need to initialize the widgets and then display them using the display function from the `IPython.display<\/strong>` library.<\/p>\n\n\n\n
from IPython.display import display\nslider = widgets.IntSlider()\ndisplay(slider)<\/code><\/pre>\n\n\n\n
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.<\/p>\n\n\n\n
widgets.IntSlider(\n    min=0,\n    max=10,\n    step=1,\n    description='Slider:',\n    value=3\n)<\/code><\/pre>\n\n\n\n
Button<\/a><\/strong><\/h3>\n\n\n\n
Similar to what we did in slider, we need to first initialise the button widget and than display it.<\/p>\n\n\n\n
btn = widgets.Button(description='Widget')\ndisplay(btn)<\/code><\/pre>\n\n\n\n
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,<\/p>\n\n\n\n
def button_eventhandler(obj):\n    print('Hello from the {} button!'.format(obj.description))<\/code><\/pre>\n\n\n\n
Now, we will bind the function to the button we created above using the button’s `on_click<\/strong>` method and display it.<\/p>\n\n\n\n
btn.on_click(button_eventhandler)\ndisplay(btn)<\/code><\/pre>\n\n\n\n
\"\"
Button widget in action<\/figcaption><\/figure>\n\n\n\n
Dropdown<\/a> <\/strong><\/h3>\n\n\n\n
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<\/a>. After downloading the dataset we will load the dataset into a data frame using the pandas library:<\/p>\n\n\n\n
import pandas as pd\nurl=\"https:\/\/raw.githubusercontent.com\/datasciencedojo\/datasets\/master\/titanic.csv\"\ndf = pd.read_csv(url)<\/code><\/pre>\n\n\n\n
\"\"
df.head()<\/figcaption><\/figure>\n\n\n\n
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:<\/p>\n\n\n\n
dropdown = widgets.Dropdown(options =[\"DF head\", \"DF info\"])\ndisplay(dropdown)<\/code><\/pre>\n\n\n\n
The dropdown widget has a method called observe<\/strong> 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<\/strong>. <\/p>\n\n\n\n
Output widget – <\/strong>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.<\/p>\n\n\n\n
dropdown = widgets.Dropdown(options =[\"None\", \"DF head\", \"DF info\"])\noutput = widgets.Output()\ndef select(change):\n  output.clear_output()\n  if(change.new == 'None'):\n    with output:\n      display(\"Select an option\")\n  elif(change.new == 'DF head'):\n    with output:\n      display(df.head())\n  elif(change.new == 'DF info'):\n    with output:\n      display(df.info())\n  else:\n    with output:\n      display(\"Error: option not found\")\n  \ndropdown.observe(select, names=\"value\")\ndisplay(dropdown)\ndisplay(output)<\/code><\/pre>\n\n\n\n
\n
\"\"<\/figure>\n<\/div><\/div>\n\n\n\n
\n
\n
\n
Text <\/a>field<\/a><\/strong><\/h3>\n\n\n\n
There are different ways to initiate text field, listed below:<\/p>\n\n\n\n
  1. widgets.Text()<\/a><\/li>
  2. widgets.IntText()<\/a><\/li>
  3. widgets.FloatText()<\/a><\/li>
  4. widgets.BoundedIntText()<\/a> and widgets.BoundedFloatText()<\/a>, …., etc.<\/li><\/ol>\n\n\n\n
    You can read about these widgets from the associated link. We will be using the first widget that is widgets.Text()<\/p>\n\n\n\n
    text = widgets.Text(description=\"Text - \")\nout = widgets.Output()\ndef select(change):\n    out.clear_output()\n    with out:\n      display(\"Entered value - \"+change.new)\n  \ntext.observe(select, names=\"value\")\ndisplay(text)\ndisplay(out)<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
    \"\"
    Text Field<\/figcaption><\/figure><\/div>\n<\/div><\/div>\n\n\n\n
    HBox and VBox<\/a><\/strong><\/h3>\n\n\n\n
    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.<\/p>\n\n\n\n
    \n
    \n
    \n
    \n
    text = widgets.Text(description=\"Text - \")\nout = widgets.Output()\ndef select(change):\n    out.clear_output()\n    with out:\n      display(\"Entered value - \"+change.new)\n  \ntext.observe(select, names=\"value\")\n\nhbox = widgets.HBox([text, out])\ndisplay(hbox)<\/code><\/pre>\n<\/div>\n\n\n\n
    \n
    text = widgets.Text(description=\"Text - \")\nout = widgets.Output()\ndef select(change):\n    out.clear_output()\n    with out:\n      display(\"Entered value - \"+change.new)\n  \ntext.observe(select, names=\"value\")\n\nvbox = widgets.VBox([text, out])\ndisplay(vbox)<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n