Some notes and resources for learning how to use Plotly Dash framework
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:
- 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)
- 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)
- 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
- Dash Python User Guide at https://dash.plotly.com/
- plotly.com
- What is Dash
- Dash Tutorial
- Dash Layout
- Basic Dash callbacks
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.
-
-
-
Dash layout.
The Dash layout
describes what the app will look like.
It is made up of a set of declarative Dash components.
-
-
-
-
Basic Dash Callbacks notebook
How Dash apps are made interactive.
Dash callbacks are chainable functions that are automatically called whenever a UI element is changed.
-
-
-
https://getbootstrap.com/docs/5.1/helpers/ratio/
ratio ratio-16x9
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:
- 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) - 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)
- 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
- Dash Python User Guide at https://dash.plotly.com/
- plotly.com
- What is Dash
- Dash Tutorial
- Dash Layout
- Basic Dash callbacks
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.
-
Dash layout. The Dash
layout
describes what the app will look like. It is made up of a set of declarative Dash components. -
Basic Dash Callbacks notebook How Dash apps are made interactive.
Dash callbacks are chainable functions that are automatically called whenever a UI element is changed.
https://getbootstrap.com/docs/5.1/helpers/ratio/ ratio ratio-16x9