Learn how to enhance your data dashboard by integrating a pie chart visualization using Plotly Express and Dash. This article walks through building a pie chart that displays the five largest stocks by volume and embedding it into a live dashboard layout.
Key Insights
- Plotly Express is used to create a simplified pie chart by leveraging stock volume data, filtered and rounded to highlight the five largest stocks, with each slice labeled by company name.
- Dash manages the overall dashboard structure, while Plotly focuses on generating individual visual components such as figures, enabling smooth integration between the two tools.
- Noble Desktop demonstrates how to wrap Plotly figures with Dash Core Components (DCC) to render them within the dashboard layout using div containers for structured organization.
This lesson is a preview from our Data Analytics Certificate Online (includes software). Enroll in this course for detailed lessons, live instructor support, and project-based training.
So we've got our dashboard, but it doesn't have a lot of data on it, and we have our data. We aren't really combining them by making a visualization of that data and putting it on our dashboard. That's our next step.
We're going to make quite a few visualizations on our dashboard, but we're going to start out with a pie chart showing the share of the largest stocks. So we're going to work with a library called Plotly to do that. So let's import it.
Plotly, and we're going to import the express version and why I'll tell you in a second. So Plotly is actually, it's very similar to PyPlot, and it comes from the Dash team. And Plotly's kind of place in this ecosystem is that Dash is in charge of managing this overall dashboard here, of which there will be, again, several different visualizations on it.
Plotly is more small scale. Plotly is, let's create the little figures themselves, and then Dash will use those figures and lay them out on a dashboard. And they play very well together because again, they're from the same team.
One is focused on the small scale, one is focused on the larger scale, but they're meant to be integrated together. Now we'll be using the express version, which we're calling PX, which is very common with Plotly Express. We're using the express version, which sacrifices some customization for simplicity.
We generally don't need to customize things as much as we typically do with, say, PyPlot. So Plotly takes the, Plotly Express takes the approach of, this is a less customizable because we set all the customizations to be the default kind of standard. You aren't going to really need to change very many of these.
So let's just set them to begin with. So we do a lot less work. It's all configured for us.
Now, if we do need to configure something more, we can always fairly easily swap the express version out for the full version. But I often find that all I need is the express version, that that's customizable enough for my purposes. Okay, so we've imported it.
The next thing we're going to do is create this pie chart. And the first step there is to create a pie figure. I usually call it the pie figure.
And it's what you get when you create, when you use the Plotly Expresses.pie function. Now, because I'm going to pass in several different, once I get past two arguments that I'm going to pass in, I usually like to put in some extra white space to make it vertical, a little more readable. The first argument we're going to put in is stocks, our data frame.
What data frame should it use to make this pie chart? And the answer is it should use the volume one. Rather, it should use the version of it we've got at this point in the code where we've worked with volume a lot to narrow it down to our, to filter it down to the five largest and to do some rounding of the volume values. So the values for our pie chart are those volume values.
So we pass in this volume string to say that's the column. Make that the column that we're working with. And for the names that should label each one, we want the company column to be the one.
So company will be labeled. And we can also put a title in, top five stocks, stocks by volume. All right, that's our pie figure.
Now, as I said, Dash is in charge of putting this figure that we just made using Plotly Express into something that can integrate into the dashboard. And I like to call that, I like to make a separate variable for that. You don't have to.
The pie graph, which is part of the dashboard, is what we get when we call DCC. That's Dash core components. It's part of Dash to get little pieces of Dash.
And it's got a graph function. And if we simply pass in that the figure we want is that pie figure, then this will make a graph that can be incorporated directly into our dashboard layout. So now, down here, where we're doing our layout, we're going to change this H4 to a div.
And as we've talked about, div is like, it's not a text formatting, like the headings or the paragraphs. It's simply a way to separate areas. And it's a container very often for several different children.
In this case, we're going to start with one child, which is that pie graph. So now that we used Dash core components to surround our pie figure with some glue code so that it can go into our dashboard, now we've got our pie graph and we can just pass that in. So just like with the H4, when we had a child of it, which was this string, here we're making a div with its child that's the pie graph.
All right, let's save that. And let's see our dashboard reload. And here it is.
It looks much better. It's got some real data here. All right, let's think about this data for a moment in our next section.