Plotly graphs and figures

Building Dashboards with Dash and Plotly

Alex Scriven

Data Scientist

What is Dash?

  • A Python library for creating interactive web applications

$$

$$

Advantages:

  • Free! Unlike Tableau or PowerBI
  • Harness JavaScript with only Python
  • Less code than web application frameworks
Building Dashboards with Dash and Plotly

Plotly and Dash

  • Work well together

$$

  • Dash: Interactive dashboards with multiple Plotly graphs
  • See this example

 

An example screenshot of a financial dashboard containing a variety of graphs, text, tables, and images including a prominent line chart with hover details

Building Dashboards with Dash and Plotly

What is Plotly?

 

  • Refresh Plotly, focus on Dash
  • A Python library for creating modern, interactive graphs
    • Wraps JavaScript but code in Python
  • Create graphs with plotly.express

$$

$$

$$

Building Dashboards with Dash and Plotly

Our e-commerce data

  • Dataset of e-commerce sales

$$

$$

  • Details:
    • Item category (Major, Minor) + description
    • Unit price, quantity (+ OrderValue)
    • Country
    • Year-Month of sale

E-commerce sales representation

Building Dashboards with Dash and Plotly

Line charts with plotly.express

 

import plotly.express as px

line_graph = px.line(

  data_frame=ecom_sales,
  x='Year-Month',
  y='Total Sales ($)', 
  title='Total Sales by Month')

line_graph.show()

 

A line chart gif of sales by month where the mouse hovers over a point to show the month and sales figure pops up on hover

Building Dashboards with Dash and Plotly

Bar charts with plotly.express

$$

bar_fig = px.bar(
  data_frame=ecom_sales,
  x='Total Sales ($)',
  y='Country',
  title='Total Sales by Country',

  orientation='h')

bar_fig.show()

 

A gif of a horizontal bar chart of total sales on the x-axis by country on the y-axis. The mouse hovers over some bars to demonstrate that data appears on hover

Building Dashboards with Dash and Plotly

Customizing Plotly graphs

 

Changing the bar width of our bar graph:

bar_fig.update_layout({'bargap': 0.5})

bar_fig.show()

$$

$$

$$

Check out the Plotly documentation

 

An image of a horizontal bar chart of total sales on the x-axis by country on the y-axis. It is the same as the previous slide, but the gaps between the bars are smaller than the previous gif.

Building Dashboards with Dash and Plotly

Let's practice!

Building Dashboards with Dash and Plotly

Preparing Video For Download...