Skip to content

Latest commit

 

History

History
136 lines (81 loc) · 5.68 KB

Module 6 - Creating Dashboards with Plotly and Dash.md

File metadata and controls

136 lines (81 loc) · 5.68 KB

Module Introduction

In this module, you will get started with dashboard creation using the Plotly library. You will create a dashboard with the theme "US Domestic Airline Flights Performance". You will do this using a US airline reporting carrier on-time performance dataset, Plotly, and Dash concepts learned throughout the course. Hands-on labs will follow each concept to make you comfortable with using the library. Reading lists will reference additional resources to learn more about the concepts covered.

Learning Objectives

  • Identify high-level popular Python dashboarding tools.
  • Demonstrate basic Plotly, Plotly.graph_objects, and Plotly express commands.
  • Demonstrate using Dash and basic Dash components (core and HTML).
  • Demonstrate adding different dashboard elements including text boxes, dropdowns, graphs, and others.
  • Apply interactivity to dash core and HTML components.
  • Describe how a dashboard can be used to answer critical business questions.

Additional Resources for Dashboards

For more information about Dashboards, visit the following links:

Python dashboarding tools

John Snow's data journalism

Additional Resources for Plotly

To learn more about using Plotly to create dashboards, explore

Plotly Python

Plotly graph objects with example

Plotly express

API reference

Here are additional useful resources:

Plotly cheatsheet

Plotly community

Related blogs

Open-source datasets

Plotly Basics - Scatter, Line, Bar, Bubble, Histogram, Pie, Sunburst

Plotly Basics

Additional Resources for Dash

To learn more about Dash, explore:

Complete dash user guide

Dash core components

Dash HTML components

Dash community forum

Related blogs

Dash Basics - HTML and Core Components, Multiple Charts

Dash Basics

Additional Resources for Interactive Dashboards

To learn more about making interactive dashboards in Dash, visit:

Python decorators reference 1

Python decorators reference 2

Callbacks with example

Dash app gallery

Dash community components

Add interactivity: user input and callbacks

Add interactivity

Flight Delay Time Statistics Dashboard

Flight Delay Time Statistics Dashboard

Reading: Summary

  • Best dashboards answer critical business questions. It will help businesses make informed decisions, thereby improving performance.
  • Dashboards can produce real-time visuals.
  • Plotly is an interactive, open-source plotting library that supports over 40 chart types.
  • The web-based visualizations created using Plotly python can be displayed in Jupyter notebook, saved to standalone HTML files, or served as part of pure Python-built web applications using Dash.
  • Plotly Graph Objects is the low-level interface to figures, traces, and layout whereas Plotly express is a high-level wrapper for Plotly.
  • Dash is an Open-Source User Interface Python library for creating reactive, web-based applications. It is both enterprise-ready and a first-class member of Plotly’s open-source tools.
  • Core and HTML are the two components of Dash.
  • The dash_html_components library has a component for every HTML tag.
  • The dash_core_components describe higher-level components that are interactive and are generated with JavaScript, HTML, and CSS through the React.js library.
  • A callback function is a python function that is automatically called by Dash whenever an input component's property changes. Callback function is decorated with @app.callback decorator.
  • Callback decorator function takes two parameters: Input and Output. Input and Output to the callback function will have component id and component property. Multiple inputs or outputs should be enclosed inside either a list or tuple.

Graded Quiz

Question 1: Plotly express is a ________ wrapper

  • A. [ ] Low-level
  • B. [X] High-level

Question 2: @app_callback is the callback decorator.

  • A. [ ] True
  • B. [X] False

Question 3: Choose correct way of adding callback decorator:

  • A. [ ]
@app.callback[Output(component_id='bar-plot', component_property='figure’),
Input(component_id='input-yr', component_property='value')]
  • B. [X]
@app.callback( Output(component_id='bar-plot', component_property='figure’),
Input(component_id='input-yr', component_property='value'))
  • C. [ ]
@app.callback( Output{component_id='bar-plot', component_property='figure’},
Input{component_id='input-yr', component_property='value'})