Html Widgets with Python

Table of Contents

Widgets can buttons, Checkbox Group, Interactive data tables, Drop down menu.. that can be added to Bokeh applications to provide a front end user interface to a data visualization. I will be showing in this tutorial how can we implement such widgets

Button¶

In [65]:
from bokeh.io import push_notebook, show, output_notebook
In [66]:
from bokeh.layouts import widgetbox
from bokeh.models.widgets import Button
In [67]:
output_notebook()
Loading BokehJS ...
In [68]:
button = Button(label="Foo", button_type="warning")

show(widgetbox(button))

Let's notice the button_type allowed are primary, success, warning, danger or link

Checkbox Group

Checklist

In [69]:
from bokeh.models.widgets import CheckboxGroup
checkbox_group = CheckboxGroup(
        labels=["Option 1", "Option 2", "Option 3"], active=[0, 1])

show(widgetbox(checkbox_group))

Buttons

In [70]:
from bokeh.models.widgets import CheckboxButtonGroup
checkbox_button_group = CheckboxButtonGroup(
        labels=["Option 1", "Option 2", "Option 3"], active=[1,2])

show(widgetbox(checkbox_button_group))

Data Table

In [71]:
import pandas as pd
student = pd.read_csv("student.csv")
In [72]:
student.head()
Out[72]:
school sex age address famsize Pstatus Medu Fedu Mjob Fjob ... famrel freetime goout Dalc Walc health absences G1 G2 G3
0 GP F 18 U GT3 A 4 4 at_home teacher ... 4 3 4 1 1 3 4 0 11 11
1 GP F 17 U GT3 T 1 1 at_home other ... 5 3 3 1 1 3 2 9 11 11
2 GP F 15 U LE3 T 1 1 at_home other ... 4 3 2 2 3 3 6 12 13 12
3 GP F 15 U GT3 T 4 2 health services ... 3 2 2 1 1 5 0 14 14 14
4 GP F 16 U GT3 T 3 3 other other ... 4 3 2 1 2 5 0 11 13 13

5 rows × 33 columns

In [73]:
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn
In [74]:
dt=student[['school','G3']]
In [75]:
dt.head()
Out[75]:
school G3
0 GP 11
1 GP 11
2 GP 12
3 GP 14
4 GP 13
In [76]:
source = ColumnDataSource(student)
In [77]:
columns = [
        TableColumn(field="school", title="School"),
        TableColumn(field="G3", title="Final Grad")
    ]
columns
Out[77]:
[bokeh.models.widgets.tables.TableColumn(
     id='487ead58-21f0-4c70-82d6-c1b069155d1a',
     default_sort='ascending',
     editor=bokeh.models.widgets.tables.StringEditor(
         id='dc344f67-2d5e-4d31-b449-6d907b2b26eb',
         completions=[],
         js_event_callbacks={},
         js_property_callbacks={},
         name=None,
         subscribed_events=[],
         tags=[]),
     field='school',
     formatter=bokeh.models.widgets.tables.StringFormatter(
         id='d64972fc-5fd1-4a09-81f7-e669e62c52ac',
         font_style='normal',
         js_event_callbacks={},
         js_property_callbacks={},
         name=None,
         subscribed_events=[],
         tags=[],
         text_align='left',
         text_color=None),
     js_event_callbacks={},
     js_property_callbacks={},
     name=None,
     sortable=True,
     subscribed_events=[],
     tags=[],
     title='School',
     width=300),
 bokeh.models.widgets.tables.TableColumn(
     id='8e12aa5d-034e-4871-939a-3025d4e501a5',
     default_sort='ascending',
     editor=bokeh.models.widgets.tables.StringEditor(
         id='1961b0de-1b6a-4336-901b-d0f10b4af033',
         completions=[],
         js_event_callbacks={},
         js_property_callbacks={},
         name=None,
         subscribed_events=[],
         tags=[]),
     field='G3',
     formatter=bokeh.models.widgets.tables.StringFormatter(
         id='c8718921-dbc2-4024-8418-0957dbffc3f8',
         font_style='normal',
         js_event_callbacks={},
         js_property_callbacks={},
         name=None,
         subscribed_events=[],
         tags=[],
         text_align='left',
         text_color=None),
     js_event_callbacks={},
     js_property_callbacks={},
     name=None,
     sortable=True,
     subscribed_events=[],
     tags=[],
     title='Final Grad',
     width=300)]
In [78]:
data_table = DataTable(source=source,  columns=columns, width=400, height=280)

show(widgetbox(data_table))
In [79]:
from bokeh.models.widgets import Dropdown


menu = [("Item 1", "item_1"), ("Item 2", "item_2"), None, ("Item 3", "item_3")]
dropdown = Dropdown(label="Dropdown button", button_type="danger", menu=menu)

show(widgetbox(dropdown))

Multi select

In [80]:
from bokeh.models.widgets import MultiSelect


multi_select = MultiSelect(title="Option:", value=["tun", "dza"],
                           options=[("tun", "Tunisia"), ("dza", "Algeria"), ("can", "Canada"), ("fr", "France")])

show(widgetbox(multi_select))

Radio Group

It can be used when we have only one choice option to pick.

Button

In [81]:
from bokeh.models.widgets import RadioButtonGroup


radio_button_group = RadioButtonGroup(
        labels=["Option 1", "Option 2", "Option 3"], active=2)

show(widgetbox(radio_button_group))

Checklist

In [82]:
from bokeh.models.widgets import RadioGroup


radio_group = RadioGroup(
        labels=["Option 1", "Option 2", "Option 3"], active=1)

show(widgetbox(radio_group))

Select Menu

In [83]:
from bokeh.models.widgets import Select


select = Select(title="Option:", value="Tunisia", options=["Tunisia", "Algeria", "Canada", "France"])

show(widgetbox(select))
In [84]:
select
Out[84]:
Select(
id = 'e86b97b9-fdc8-4138-90f8-22c93f502b5c', …)

Slider

One value

In [85]:
from bokeh.models.widgets import Slider


slider = Slider(start=0, end=10, value=1, step=.1, title="Value")

show(widgetbox(slider))

Range slider

In [86]:
from bokeh.models.widgets import RangeSlider


range_slider = RangeSlider(start=0, end=100, value=(10,80), step=1, title="Range")

show(widgetbox(range_slider))