Plotly graphs and figures

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 us to easily create interactive, modern web applications. Some advantages of Dash are; It is free, unlike other popular dashboarding software. You can use JavaScript-level experiences while writing only Python. And there's much less code than web application frameworks like Django.

3. Plotly and Dash

Plotly and Dash are created by the same company, so they naturally work well together. Dash apps can include any number and type of Plotly graphs. Check out this finance dashboard. We can see it includes images, text, charts, and formatting - all integrated into a single web app. You can find the implementation for each chart by looking through the source code.

4. What is Plotly?

We won't spend much time learning Plotly in this course - we'll just refresh key concepts. Plotly is a Python library for creating modern, interactive graphs. It's a wrapper that generates JavaScript behind the scenes, while you write in Python. Although there are several ways to build graphs with Plotly, we'll use Plotly Express, as it's straightforward and was introduced in the prerequisite course.

5. Our e-commerce data

Throughout the course, we'll work with a dataset of e-commerce sales, where each row is a single sale. It includes useful columns like: the item category at both a major and minor level and text description, the price of the item, quantity ordered, and 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 showing total sales in dollars by month. We first 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 the DataFrame and column names as arguments. We've also added a title. Finally, we use the show method to display the graph. And just like that, we have an instant, interactive line chart. Nice!

7. Bar charts with plotly.express

Creating different types of graphs with Plotly Express is just as easy. Let's create a bar chart showing the total sales by country. The Python code looks almost the same - except instead of px.line, we use px.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 change the bargap property to make the bars thinner by increasing the space between them. Then, we display the updated figure. Notice the wider gaps - our update worked! You can find many other customizable properties in the Plotly documentation.

9. Let's practice!

Let's practice building and customizing some Plotly graphs.

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.