Google Cloud Platform

Creating custom interactive dashboards with Bokeh and BigQuery

Powerful software-as-a-service (SaaS) solutions like DataStudio are extremely useful when building interactive data visualization dashboards. However, these types of solutions might not provide sufficient customization options. For those scenarios, you can use open source libraries like D3.js, Chart.js, or Bokeh to create custom dashboards. While these libraries offer a lot of flexibility for building dashboards with tailored features and visualizations, a major challenge remains: deploying these dashboards to the Internet to enable easy stakeholder access.

We recently published a tutorial to show you how to build a demo dashboard application on Google Cloud Platform by using the Bokeh library to visualize data from publicly available Google BigQuery datasets. The tutorial also shows how to deploy this application with both security and scalability in mind.

The demo application displays a dashboard that processes and visualizes publicly available data for all fifty U.S. states. The dashboard provides a simple level of interaction: the user can select any of the fifty states from a dropdown widget to drill down and display information about that state. The dashboard contains four different modules, and each module displays different types of information:

bokeh-15qe2.PNG
Screenshot of the running demo dashboard application

At a high-level, the demo’s architecture consists of six main elements. The following diagram shows how these components communicate and interact:

bokeh-2j0uv.PNG

Reference architecture for the demo application.

These elements include:

  • Client web browsers on the desktop machines and mobile devices of the dashboard users.
  • An authentication proxy managed by Cloud Identity-Aware Proxy, responsible for controlling access to the application.
  • An HTTPS Load Balancer responsible both for effectively distributing incoming web traffic to the appropriate backends and handling SSL decryption/encryption of data coming in and out of the system.
  • The application backend responsible for serving the dashboard’s dynamic content (HTML and plot data).
  • The static assets backend serving the static JavaScript and CSS files needed for client web browser rendering.

Check out the step-by-step tutorial for all the details on this solution. We hope this will inspire you to create your own custom dashboards!