Enhance your data analysis by experimenting with different chart types to uncover patterns and insights within your datasets. This article walks through the implementation and evaluation of horizontal bar charts and scatterplots to determine their usefulness in visual storytelling.
Key Insights
- Adding a horizontal bar chart using Plotly Express’s px.bar function with an orientation argument set to "h" allows for a rotated view of data, but in this case, it provided no additional insight beyond the vertical version.
- A scatterplot comparing stock volume to closing price revealed no discernible relationship between those variables, indicating that sometimes visualizations serve more for exploration than for conveying clear trends.
- As coding proficiency grows, developers tend to streamline their syntax, such as embedding dcc.Graph elements directly instead of assigning them to separate variables, improving readability and efficiency.
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.
Let's see how much we can learn from looking at a couple more visualizations and filling out this dashboard a little bit more. So back in our code, let's add a horizontal bar graph and see if that tells us anything more than just the regular bar graph. So how do we do that? It's even closer to what we've written before.
We're going to say, I'll call it a nice long name. I like long names. Horizontal bar figure equals px.bar. It's the same method call and it's almost the same line.
Stocks is our data frame, volume on the bottom along left to right on a horizontal axis, y, the vertical axis will be the company name. So these are reversed because everything is sort of pivoted 90 degrees in a horizontal bar chart. And if you don't know what I mean, you'll see.
And we also add a new value orientation in which we don't need to even add that if it's vertical because it's just vertical by default. But if we want to override that and make it a horizontal bar chart, we add this orientation argument and set it to h. And finally, a title. Top five stocks by volume as a horizontal bar chart.
Let's save it. Oh, nope. I save it.
I look and nothing has changed because we haven't finished this yet. We've created this bar figure, but we haven't actually added it here. Now, previously, we made a variable for the graph.
We're going to skip that. And you'll find this happens a lot as you get comfortable with a tool that you start to be able to write the code a little more implicitly, not make everything the longest version possible, but shorten the code up a little bit because now you can read it because now you're more familiar with it. So rather than make a variable holding what dcc.graph returns, instead we'll just put the call to dcc.graph here.
We'll say the next element that we'll add as a child of our div is that dcc.graph where the figure is our horizontal bar figure. There we go. Okay, I've saved it.
Let's see it. Now, does this add anything? The bar chart and the pie chart really told a different story. The horizontal bar chart really doesn't.
It's pretty much just a pivoted version of this. Now, I think it's worth it to explore this. It's also worth it very often to do both of these and think about which one is telling your story best.
In our case, I actually think the one we started with is actually better. There's no particular reason this should be horizontal, and I think I'd rather think of things as being higher rather than more over to the right, but it depends on what story you're trying to tell and which one is a better fit. And at the very least, it let us explore a different way of writing the code.
Let's do a scatterplot because I think this will actually give us some more new information, some new ways of looking at it. So let's add a scatterplot. Now, a scatterplot is about relationship between two different values.
Here, we've been looking at the relationship of these volumes to each other, but let's look at the values in our… Let's take a look at the original data frame here. We can look at the values. There's nothing to be gained by looking at the value of Apple versus its volume, comparing the string to that.
But we might say, is there a relationship between the value that it closed at every day and the volume of how many sold that day? Let's find out. That's what a scatterplot is really good for. So I'm going to make a figure scatterplot, maybe just scatter figure, px.
And yeah, it's exactly the method you would think would be dot scatter. Our data frame is still stocks, and on X, we'll do volume, but we'll spell it correctly. But on our y, our up and down axis, we'll say, okay, but how much was the close value? Given a volume, how much was close? And our title will be a little different this time.
Volume versus closing price, like that. And now we'll do the same kind of thing here. Don't forget the comma at the end.
And we'll say, okay, I want a DCC dot graph based on the figure being our scatter figure. All right, as soon as I save it, let's go back, not to the terminal, but the browser, and see this scatterplot. And I think what we can see here, we have a relationship among a scatterplot usually looks like a diagonal line if there's a strong relationship.
What we see here is no relationship at all. We have a kind of line going perfectly horizontal with like a little bit of an up and down, not really any sort of relationship. It's not that the higher the volume is, the higher the closing, or the higher the volume is, the lower the closing.
And then we also have this weird, I think it's NVIDIA up here, that's a weird scatterplot over here, weird outlier over here. Really, really high volume or really high closing price, but it didn't make it have more or less volume. So this is helpful.
Again, sometimes your visualization is not about presenting something to the public. Sometimes it's for being able to visualize it yourself. It's for exploring what are these relationships, what data is meaningful, what is the noise, and what is the signal here? This one is noise.
We've explored a couple of different ways of looking at these visualizations. Let's wrap up what we've done.