Learn how to transform a basic Dash dashboard by integrating a pie chart using Plotly Express and pandas data. This article walks through replacing a static heading with a dynamic graph and preparing the data for effective display.
Key Insights
- Create a pie chart using Plotly Express by passing grouped data from a pandas DataFrame, specifying the column for values and using the DataFrame index for labels.
- Replace an HTML heading in a Dash app with a dcc.Graph component to embed the chart and display it interactively within the dashboard interface.
- Noble Desktop demonstrates how to clean up and clarify code by assigning row indices to a variable like item_names, improving readability and maintainability.
Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.
Now, if you remember from last time, this h1 is what actually puts out our dash message here. Hello, dash. We're going to put a graph there instead.
So let's add a little bit, a new section, maybe figures. And we'll make first a pie figure. And it's going to be the PlotlyExpress pie function.
And we're going to pass it a few arguments. The first is our top five data. The next is what should be the values.
And that is what column are we interested in. And we're interested in the column item price. And finally, the names for the values in our pie chart.
And they will be our top five dot index. And the reason for that, the reason it's the index, is these might look like they're a column of item name. But actually, these item names are the names of the rows.
Normally, in a pandas data frame, they are, you know, 0,1, 2,3, 4. But when you do a group by like this, you get actual names for your rows. So those are the index. If we print out what's top five dot index, we should actually probably make a list out of it.
It'll print better. Oh, we've got an error. It's not item price here.
It's order price. Or possibly item price as number. Let's see.
Let's see if that'll work. I'm going to run app.pie again. Yep, expected one of item price as number.
That's what it's expecting for a value name. Let's try that one more time. Item price as number.
Run Python app.pie again. There we go. So these are the index, the row names for each of the five pieces of data in our top five.
So that's what we want to have be the names of this. Now we're going to use this top five dot index. It's a little bit of a, like if we know what we're looking at, we could be like, oh yeah, the index is the row names.
Let's actually make it item names equals top five dot index. That'll make the rest of this code much easier to read. I'm going to change this to item names.
There we go. I'm going to run that code again, make sure it still runs. Great.
All right. We've got our pie figure, but we haven't actually put it on the page yet. So what we're going to do is we're going to, instead of the h1, we're going to change this to a div, which is a different HTML element that makes it an area on our page.
We're going to pass in our dcc.graph. That is like, hey, this is the graph that has this figure inside it. In fact, we're going to pass in for the figure argument, our pie figure we made up there. Let's give that a try.
And there we go. There's our pie figure. Now it's in a graph within our dashboard.
All right. The next step, we'll add some more graphs. We'll remember how to do multiple graphs.
And then we'll lay it out with Bootstrap and give it a proper layout and see what we can do with that tool.