1. Plotly graphs and figures
Welcome to this course on building dashboards with Dash and Plotly.
2. What is Dash?
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.
3. Plotly and Dash
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-dot-scatter in the source code.
4. What is Plotly?
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.
5. Our e-commerce data
Throughout this course, we will use a dataset 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.
6. Line charts with plotly.express
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-dot-express as px, by convention.
Then we create the figure object using the relevant p x submodule. Here it is px-dot-line for a line chart.
plotly express only requires us to specify the DataFrame 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!
7. Bar charts with plotly.express
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 p-x-dot-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.
8. Customizing Plotly graphs
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 bargap 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.
9. Let's practice!
Let's practice building and customizing some Plotly graphs.