Data Visualisation in Python with Bokeh and customisation

It has been a while the team was finding the solution of data visualisation tool with a more interactive usage in our web application.
Bokeh is by far is most suitable tool , as least to us, which is suited for flexibility of integration with data-intensive backend processing and for its customisable interaction: in addition to the built-in tool bar, it offers displaying/hiding legend , as well as, hover-able and draggable data points,

Yet we want to achieve more in modifying data property and data display option. For example, we want to have more interactive option in filtering out time series data in office hour/ non-office hour, grouping working days/ non-working days upon existing data aggregation.

For the most part, Python Bokeh models are completely declarative classes. Custom extensions are created by making a subclass Model (or one of its subclasses), and including special class attributes to declare the properties that are mirrored on the JavaScript side.

Since we would like to create a custom extension that can participate in DOM layout, we subclass from LayoutDOM. We also added two properties: a String to configure a text message for the readout, and an Instance that can hold a Slider. The JavaScript Slider object that corresponds to the Python Slider will be made available to use.

Interaction with options picker

Our desired filter options can be made easily in IPython, but , on the other hand, requires more work deep down the code in usual web app environement. Ipywidgets are interactive HTML widgets for Jupyter notebooks and the IPython kernel. Users gain control of their data and can visualize changes in the data.

The interact function (ipywidgets.interact) automatically creates user interface (UI) controls for exploring code and data interactively. It is the easiest way to get started using IPython’s widgets.

At the client JS side, the corresponding model is implemented with a view. See the implementation for Custom and its view CustomView at documentation.

For default built-in models, BokehJS automatically matches with the corresponding Python model at the build process.

For the custom models, we connect the JS implementation to the Python models by adding a class attribute called implementation whose value is the JS file that contains our defined client-side model.

from bokeh.core.properties import String, Instance
from bokeh.models import LayoutDOM, Slider

class Custom(LayoutDOM):

    __implementation__ = "custom.ts"

    text = String(default="Custom text")

    slider = Instance(Slider)