Getting to know... Dash

This blog is new and I'm not entirely sure on the content I want to build for it. However, this might be the first in the series of "Getting to know... X" where I familiarize myself with a new technology. In any case, this one's for Dash!

Over the past three days I decided to read about Dash. According to the user guide, "Dash is a productive Python framework for building web applications."

I began with the Dash User Guide and jumped right to the Dash Tutorial: Part 1. Installation.

There was not much here except `pip install dash`

Next: Part 2. Layout.

In this section of the tutorial, I found the following feature to be useful:
Dash includes "hot-reloading", this features is activated by default when you run your app with `app.run_server(debug=True)`. This means that Dash will automatically refresh your browser when you make a change in your code.
Of course, the user has the option to turn the feature off `app.run_server(dev_tools_hot_reload=False)`.

Here's a short summary:
1. In the first example, it is shown that dash provides components which correspond to existing HTML tags, such as `div` and `h1`.
2. Every component has `children` which is either a string, number, another component, or a list of components. Basically, instead of constructing HTML with begin and end tags, which wouldn't make sense in Python, components are nested inside each other.
3. A component's style in Dash is assigned with a dictionary.
4. There are some changes in naming conventions in the transition from HTML to Dash (Python).
5. Leverage the programming aspect to create "complex reusable components."
6. Dash renders its graphs using plotly.js.
7. One can write portions of the app in Markdown and it'll automatically be converted to HTML. For example, `### Example Heading` in Markdown would become `

Example Heading

` in HTML.
8. Dash makes various UI components available such as dropdowns and checkboxes under `dash_core_components`. See their Dash Core Components Gallery for all the available components.

Next: Part 3. Basic Callbacks.

The big picture: the user specifies an event as watching the `component_property` of a particular component (specified by the `component_id`) using the decorator `@app.callback`. When the `component_property` changes, the method being decorated will run and that method's return value will change the specified `component_property`s of the `component_id`s listed in the declaration of decorator.

This is powerful, because every component is defined through its properties and this process allows for any component to be modified using callback functions.

There may be multiple inputs and multiple outputs. For multiple outputs, the callback function needs to return as many values as there are outputs.

The callbacks can be chained.

Finally, instead of making an update every time an input changes, one can use `dash.dependencies.State` to declare inputs to be read, but which do not trigger the callback when changed. Effectively, this allows one to have a form-like interface, e.g., listen to a "Submit" button and read all the input values when the "Submit" button is pressed.

Next: Part 4. Interactive Graphing and Crossfiltering

The first example wasn't showing up on the webpage so I ran it locally. As suggested by the text, there were four different graph interactions that were able to trigger a callback function: `hoverData` (hover over points), `clickData` (click on points), `selectedData` (select points), and `relayoutData` (a change in x-axis/y-axis range).

Remark: When I first read the term `relayoutData`, I read it as "relay" + "out." However, I believe it actually means "re" + "layout," as in a change of layout.

The second and third examples show some of the use cases when it comes to interactive graphing and crossfiltering.

Next: Part 5. Sharing Data Between Callbacks

This section details reasons why one shouldn't alter global variables and ways to share data between callbacks. The guide lists the following places to store data that would be shared between callbacks:
1) Browser
2) Disk
3) Shared memory space (e.g., Redis)

Finally: Part 6. FAQs

The FAQ is short and worth a quick read as the various Q&A do address some interesting points.

Relevant Links:
Getting to Know Dash (Github Repo)

Comments

Popular posts from this blog

Getting to know... D3

PySpark + Anaconda + Jupyter (Windows)

Observable HQ: dropdown input, d3 transition, and viewof