Building Dashboards with Dash and Plotly: A Comprehensive Guide

Welcome to this course on building dashboards with Dash and Plotly, two powerful tools for creating interactive modern web applications. In this course, we will explore the advantages of using Dash and how it can be used to create stunning web applications with minimal code.

One of the key benefits of using Dash is its free pricing model, making it an attractive alternative to other popular dashboarding software. Additionally, Dash allows developers to use JavaScript to build amazing user experiences while only writing in Python. With Dash, developers can also expect less code to get a web application compared to frameworks like Django.

Plotly and Dash are created by the same company, which means they naturally work together seamlessly. This makes it easy for developers to incorporate Plotly graphs into their Dash applications. In this course, we will focus on building dashboards with Dash and refresh our knowledge of Plotly, as it is not the primary focus of this course.

We will be using a dataset of e-commerce sales, which contains numerous informative columns related to each sale, including item category at both major and minor levels, text description, price, quantity ordered, total order value, country of purchase, and year and month of sale. We will start by creating a line chart using some global e-commerce data to visualize the total sales in dollars each month.

To create the figure object, we first import Plotly Express as px by convention. Then, we specify the relevant px submodule, which in this case is px.line for a line chart. Plotly Express only requires us to specify the data frame and column names as arguments. We have also added a title as a string and used the show method to display the graph. The result is an instant interactive line chart.

Creating different types of graphs with Plotly Express is a similarly easy process. For example, let's create a bar chart of the total sales by country. The Python code is very similar to the code we wrote to generate the line graph, but instead of px.line, it is px.dot.bar. We also have an additional argument specific to the bar chart orientation, which in this case is h for horizontal rather than v for vertical. Again, we get an instant interactive chart with very little code.

One of the benefits of using Plotly Express is that we can set many properties of a graph upon creation. However, sometimes we may want to update them later, which is crucial for our Dash apps. To do this, we use the update layout method of the figure object. This accepts a dictionary containing key-value pairs of the properties to change and their new values.

Let's change the bar width of our bar graph by using the update layout method of the Plotly figure object. It accepts a dictionary containing key-value pairs of the properties to change and their new values. We want to change the bar gap to be larger, making the bars themselves thinner. We can then show the new figure, and notice the larger bar gaps. You can check the specific properties that can be set for each graph in the Plotly documentation.

Now that we have practiced building and customizing some Plotly graphs, let's move on to the next topic. In this course, we will explore how to use Dash to create interactive web applications with minimal code. We will delve into the advantages of using Dash and learn how to build stunning dashboards with ease.

"WEBVTTKind: captionsLanguage: enwelcome to this course on building dashboards with dash and plotly dash is a python library that allows you to create interactive modern web applications easily some advantages of dash are it is free unlike other popular dashboarding software you can use javascript to build amazing user experiences while only writing in python there is less code to get a web application compared to frameworks such as django plotly and dash are created by the same company so they naturally work together dash apps can include plotly graphs of any type and number check out this finance dashboard we can see it has images text graphs and formatting you could find the code for the line chart by searching for go.scatter in the source code in this course we will not spend much time learning plotly we'll just refresh the important concepts plotly is a python library for creating modern interactive graphs it is a wrapper for creating javascript code by writing entirely in python although there are multiple ways to create graphs with plotly we will use plotly express as plotly is not the focus of this course throughout this course we will use a data set of e-commerce sales each row is a sale it contains a number of informative columns related to the sale including the item category at both a major and minor level and text description the price of the item quantity ordered and therefore total order value the country of purchase and the year and month of sale let's create a line chart using some global e-commerce data where we would like to visualize the total sales in dollars each month we firstly import plotly.express as px by convention then we create the figure object using the relevant px submodule here it is px.line for a line chart plotly express only requires us to specify the data frame and then column names as arguments we have also added a title as a string finally we use the show method to display the graph we get an instant interactive line chart nice stuff creating different types of graphs with plotly express is a similarly easy process let's create a bar chart of the total sales by country the python code is very similar to the code we wrote to generate the line graph however instead of px.line it is p x dot bar we also have an additional argument specific to the bar chart orientation we would like the bar chart to be horizontal so specify this argument as h rather than v for vertical again we get an instant interactive chart with very little code we can set many properties of a plotly graph upon creation such as those set earlier in this video however sometimes we may want to update them later this is very important for our dash apps we do this using the update layout method of the figure object let's change the bar width of our bar graph we use the update layout method of the plotly figure object it accepts a dictionary containing key value pairs of the properties to change and their new values here we want to change the bar gap to be larger making the bars themselves thinner we can then show the new figure notice the larger bar gaps it worked you can check the specific properties that can be set for each graph in the plotly documentation let's practice building and customizing some plotly graphwelcome to this course on building dashboards with dash and plotly dash is a python library that allows you to create interactive modern web applications easily some advantages of dash are it is free unlike other popular dashboarding software you can use javascript to build amazing user experiences while only writing in python there is less code to get a web application compared to frameworks such as django plotly and dash are created by the same company so they naturally work together dash apps can include plotly graphs of any type and number check out this finance dashboard we can see it has images text graphs and formatting you could find the code for the line chart by searching for go.scatter in the source code in this course we will not spend much time learning plotly we'll just refresh the important concepts plotly is a python library for creating modern interactive graphs it is a wrapper for creating javascript code by writing entirely in python although there are multiple ways to create graphs with plotly we will use plotly express as plotly is not the focus of this course throughout this course we will use a data set of e-commerce sales each row is a sale it contains a number of informative columns related to the sale including the item category at both a major and minor level and text description the price of the item quantity ordered and therefore total order value the country of purchase and the year and month of sale let's create a line chart using some global e-commerce data where we would like to visualize the total sales in dollars each month we firstly import plotly.express as px by convention then we create the figure object using the relevant px submodule here it is px.line for a line chart plotly express only requires us to specify the data frame and then column names as arguments we have also added a title as a string finally we use the show method to display the graph we get an instant interactive line chart nice stuff creating different types of graphs with plotly express is a similarly easy process let's create a bar chart of the total sales by country the python code is very similar to the code we wrote to generate the line graph however instead of px.line it is p x dot bar we also have an additional argument specific to the bar chart orientation we would like the bar chart to be horizontal so specify this argument as h rather than v for vertical again we get an instant interactive chart with very little code we can set many properties of a plotly graph upon creation such as those set earlier in this video however sometimes we may want to update them later this is very important for our dash apps we do this using the update layout method of the figure object let's change the bar width of our bar graph we use the update layout method of the plotly figure object it accepts a dictionary containing key value pairs of the properties to change and their new values here we want to change the bar gap to be larger making the bars themselves thinner we can then show the new figure notice the larger bar gaps it worked you can check the specific properties that can be set for each graph in the plotly documentation let's practice building and customizing some plotly graph\n"