Some notes and resources for learning how to use Plotly Dash framework

Some notes and resources for learning how to use Plotly Dash framework

Flask Logo

Dash is a python framework for building data visualisation web apps.

Here I will keep a collection of notes and references related to build Dash apps as well as links to some Dash apps as they are deployed.

Dash apps go where Tableau and PowerBI cannot… NLP, object detection, predictive analytics, and more. With 0.5M+ downloads/month, Dash is the new standard for AI & data science apps. See plotly.com

Dash is a productive Python framework for building web analytic applications. See dash.plotly.com/introduction

There are three main concepts in a Dash app:

  1. The layout which defines what the app will look like and how the various elements are displayed on a screen. (It is like the frontend of the app)
  2. Callbacks control how a user can modify elements such as updating a graph by selecting values from a dropdown menu or moving a slider. (The callback functions used in an app can be considered as the backend)
  3. State is used for when the order a user performs some actions is important. State is an optional parameter and can be used when you might be working with multiple inputs to prevent one input from changing the outputs immediately. Usually a button is used, the user can select or input their values and only once the button is clicked will the calback function be triggered.

Dash is an open-source library, written on top of Flask (for the web framework), Plotly.js (for interactive graphs) and React.js (for the JavaScript user interface) and is used for building dash visualisation apps in pure Python (as well as R and Julia) without needing to use JavaScript. Dash apps are rendered in the web browser and have highly custom user interfaces.

I’m mainly working from the various documentation and tutorials but will provide additional links as I go.

There is a comprehensive Dash Python User Guide at https://dash.plotly.com/ that introduces Dash, has a gallery of open-source app examples and links to the tutorial. There is also an overview and links to the open-source component libraries as well as more advanced material.

The Dash Enterprise App Gallery is a gallery with over 110 apps on show. There is some open-source demos with Python and R Source code available on GitHub. Most of the demo apps are hosted on Dash Gallery, which is their internal server running on Dash Enterprise Kubernetes.

Official Dash.Plotly documentation and tutorials

Opensource Component Libraries

Some notes on Dash / Plotly

These notes are largely based on reviewing the documentation above at https://dash.plotly.com and https://plotly.com.

https://getbootstrap.com/docs/5.1/helpers/ratio/ ratio ratio-16x9

Tech used:
  • Python
  • HTML