In this post, we’ll create a simple Bokeh web app in Dataiku DSS. It’s a simple scatterplot on Haiku T-shirt sales data, related to the data used in the Tutorials.
You will need:
bokehand mandatory Dataiku packages.
Create a new empty Bokeh web app:
You will be redirected to the web app editor. ## The Web App Editor
The web app editor is divided into two panes.
The left pane allows you to see and edit the Python code underlying the web app.
The right pane gives you several views on the web app.
Let’s build the code behind the Python Bokeh web app.
Insert the following code into the Python tab so that we’ll have the necessary tools to create the web app.
Add the following code to the Python tab to access a Dataiku dataset as a pandas dataframe.
Add the following code to the Python tab. This code extracts the customer age and total amount spent from the pandas dataframe to define the source data for the visualization as a
Nothing is displayed yet, because we haven’t created the visualization, but there are no errors in the log.
Add the following code to the Python tab to define the output visualization. First we create a
plot object with the desired properties. Here we have chosen static values for the limits of the x and y axes, but we could alternatively compute the minimum and maximum values of customer age and use those to define the axis limits. Next we define the visualization as a scatterplot that plots data from the
source defined above.
The following code defines the layout of the web app and adds it to the current “document”. For now, we’ll include an empty widgetbox that we’ll populate in a moment when we add the interactivity.
Save your work, and the preview should show the current (non-interactive) scatterplot.
The current scatterplot includes all orders from 2013-2017, across all types of t-shirts sold. Now let’s add the ability to select a subset of years, and a specific category of t-shirt. To do this, we need to make changes to the Python code.
The code in this section should be added after the code to set up the plot, but before the code to define the layout of the web app.
In the Python tab, add the following.
This defines four widgets.
textaccepts text input to be used as the title of the visualization.
max_yearare sliders that take values from 2013 to 2017 in integer steps. Their default values are 2013 and 2017, respectively
categoryis a selection that has an option for each t-shirt category, plus “All”. Its default value is All.
Add the following code, which contains the instructions on how to update the web app when a user interacts with it.
plot.title.textto the new value
update_datatakes the input dataframe
dfand uses the widget selections to filter the dataframe to only use records with the correct order year and t-shirt category. It then defines the x and y axes of the scatterplot to be the age and order total from the filtered dataframe.
Add the following code that listens for changes to the widget values using the
on_change() method, which calls the functions above to update the web app.
Finally, change the definition of
inputs as follows, to include the four widgets so that they are displayed in the web app.
Save your work, refresh the preview, and it should now show the current interactive scatterplot.
When you are done with editing, you can easily publish your web app on a dashboard from the Actions dropdown at the top-right corner of the screen.
Using Dataiku DSS, you have created an interactive Bokeh web app and published it to a dashboard.
You can examine this sample web app further on the Dataiku gallery.
For further inspiration on what is possible in Bokeh web apps, see the Bokeh gallery (external).