Create multiple visualizations using Plotly’s px.bar and px.scatter functions, adjusting orientation and visual elements like size and color to enhance clarity. As the number of graphs increases, organize them more effectively using a layout framework such as Bootstrap for improved presentation and usability.
Key Insights
- Use Plotly’s px.bar with the orientation parameter set to "h" to create a horizontal bar chart, using item names for the x-axis and item prices for the y-axis.
- Enhance scatter plots by dynamically sizing and coloring data points based on numerical values, improving visual insight into data magnitude.
- As multiple visualizations are added, transition to using a layout framework like Bootstrap to better structure and present graphs within a Dash dashboard, as demonstrated in the Noble Desktop article.
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 add a couple more graphs real quickly, and then we'll start seeing that we're running into a problem. We'll add a horizontal bar figure, px.bar, and it's almost the same. You'll be forgiven if you copy and paste here.
Top five, X is the item names, and the y is item price as number. But then we also add orientation equals h, which by default is v, but we want a horizontal bar as well. Now we'll also make a scatter plot, scatter figure, px.scatter, and we'll pass in the top five, an X, our item names, and a y, which is again item price as number.
We'll do something different with the scatter plot in a moment. All right, now we need to add these here. We'll make a dcc.graph where the figure is the scatter figure.
Don't forget your commas after that one. We'll add dcc.graph, and I did these a little out of order, I guess. Add the bar h. All right, let's take a look at that.
There's the scatter plot. There's the bar graph. One of the neat things we can do is we can make this scatter plot have different sizes depending on the value.
You can see the bigger numbers now have bigger circles. Another nice touch is to do the same thing but for color. I like that one particularly.
Okay, so a problem we're running into here is that we've got a lot of graphs, and they're not very well organized. They're not very well laid out. So in our next step, we're going to get away from doing HTML.
Or rather, we'll still be using HTML, but we'll be using Bootstrap, which itself will use CSS and HTML. We'll put in a layout framework.