Skip to content

Latest commit

 

History

History

Part1

README.md

Part 1: Basics of Using Dash

Prequisite of using Dash

  • Knowing how Plotly works in Python
  • Knowing how Flask works in Python
  • Understand how html works

Goals

The goals of Part 1 are:

  1. Understand the basic layout of Dash
  2. Understand the basic of dcc and html packages
  3. Graph a chart using figure in dcc.Graph()
  4. Pass a previous Plotly graph on Dash

Plotly Dash Example

Reference here: Dash Layout

app.py is the code copied from the plotly dash site for testing.

Dash is very similar to using Flask on building a html. In this example, app.layout to outline the html page and build the Plotly figure on top of the html elements. The example on the Dash Layout site demostrates a higher level method to build bar chart on Dash.

dash_part1.py is the file identical to app.py from the Dash Layout reference page.

Example 1: Practice on my own

Plotly Dash can be viewed as a high-level visuilazation tool hosted by Flask. To build a Plotly Dash dashboard, you have to declare an app object, which is a Flask object. Then, you will design the dashboard by adding html components or dash core components into the layout instance. Html components are basic html instance; dash core components (dcc) are Dash-built object to show graphs or other Dash objects. The layout instance of app is composed of a tree of compoents. In each html components or dcc consists of attributes to define content, graphs, or format. For example, if you put html.H1(chilren='Hello World!'), Dash will translate that to < H1>Hello World!< /H1> on a html file. The code is run, it renders the html as you have defined and hosted on Flask server.

I used whisky.csv to plot a bar chart. You may find the data here. And the result looks like this:


And the original Plotly graph looks like:

Example 2: Using go.Figure on Dash

Reference here: Plotly Figures on Dash

If you know how to make a graph on Plotly and wish to host it on Dash. You may also do this. If you have existing code define the figure object in Plotly already, you may pass this figure object to dcc.Graph(), ie, you may define fig first, and pass fig to dcc.Graph(), dcc.Graph(figure=fig). It means you could define the figure instance outside of app.layout. In this example, I will use my existing Plotly graph and host it on Dash. The Plotly line chart is about the traffic of IPs given in the data set and was a homework I worked on my Data Visualization class in graduate school.

The result looks like this:

Notes

  • Dash's purpose is to build the visualization on a html page and host the html page on a Flask server.
  • Dash relies on Flask. Once you import Dash, it automatically import Flask. And the code is very similar to Flask.
  • app.layout lists the html page in hierarchical structure
  • You can either define figure outside or within app.layout. If you have done a visualization with Plotly before, you may just pass your previous Plotly figure into app.layout.
  • Flask host your html page at your localhost. To change port, add 'port=xxxx' as an arguement in app.run_server()

Next Charter

Clicker here to advance to next chapter.