Absolutely awesome., many things to love. It took me some time to understand what was going on exactly. I think two things would help to understand faster how the app works instead of try: add the hamburger icon to the upper left button “Top 100 games” etc (maybe funny but it took me some time to understand I had to click there to get a filter panel, the icon would make me realize instantly clicking is intereseting) and 2) maybe very ambitious, maybe not, when you select a tag or 2 (love this addition of “non”, which instantly makes clear it’s a “or” query), change the colours of the part where the games have the selected filter. I have no idea if that is possible but it would draw my eye instantly to the games I’m looking for.
5 Likes
@marieanne Thanks so much! The hamburger is a fantastic idea – added! I also think it helps that I changed the offcanvas to display at the start.
I’ll have to think a little more about your color idea. I like it. Or maybe, same fill, but a special stroke color + width to “highlight” the stack of selected tags…
2 Likes
Very personal opinion, do not open the filterpanel on start. It makes the sunburst inactive and it triggers the question "do I first have to filter something ? ". Almost everybody will click on the menu/filter button out of curiosity now it’s universally recognizable.
3 Likes
That makes good sense to me too (and thanks for the constructive feedback!)
3 Likes
Hey everyone,
I finally had some time to create a dashboard again! 
How Can the Initial Visualization Be Improved?
The chart shows two variables: Current Players and Price.
- The histogram does a great job of displaying the spread between players and price bins.
- The scatter plot, however, lacks clarity. It’s not obvious that each dot represents a game, and without a legend, it’s even more confusing. Plus, the dots overlap, making it hard to differentiate between games, especially in the lower ranges.
- The third marginal plot doesn’t add much value either. It’s too clustered in the lower ranges, making it difficult to see the extent of the overlaps.
If the goal is to visualize the spread of players across different price categories, the histogram alone would have been enough for me. 
App Built with Vizro
I’ve created a Dash app using Vizro. Here’s what I did:
First Page: I created an overview with some summary statistics and some different visualizations of player numbers and prices. One visualisation would have been sufficient, but I just wanted to show how these 3 different charts are differently suited depending on what we want to analyse.
- Bar Chart: Perfect for quickly identifying the top games. It’s sorted, so rankings are easy to see, and price is indicated by color, showing that the most popular games are free. The bar chart becomes a bit more difficult to read if you visualize more entries, so I’ve added a parameter in there that only displays the top N, where N is configurable via the control.
- Treemap: A variation of the bar chart. It’s better for seeing the share of each game compared to the total. However, it’s harder to compare rankings because comparing areas is trickier than comparing lengths.
- Scatter Plot: Usually great for spotting correlations. I improved the original by adding opacity, making more dots visible. Still, it’s my least favorite choice because of overlapping dots, especially in the lower ranges.
Last Page: I added a table view. Honestly, it’s my favorite visual from the dashboard. Big shoutout to @AnnMarieW here! Her repository on Dash-Ag-Grid examples helped me a lot in achieving the styling I wanted. Adding Bootstrap components to the Dash-Ag-Grid was a visual game changer for me! 
Code: li-nguyen/figure-friday-week-5 at main
App: Games Dashboard - a Hugging Face Space by li-nguyen
10 Likes
Your dashboard looks even better than the Steam website. We missed you, @li.nguyen 
4 Likes
@li.nguyen, your dashboard really stands out. Outstanding work. Great to have you back.
1 Like
Hey @feanor_92 - this looks fantastic! Since you’re using the same bar chart and mostly need to swap the y-axis and x-axis variables, this would be a great opportunity for a Dash app with a control that allows you to choose which variable goes on the x-axis or y-axis! 
I like that you’ve sorted the bar charts already, this makes the ranking very clear!
2 Likes
Awesome work on the app, @Avacsiglo21! 
I really like the clear layout and hiearchy of the dashboard:
Logo and Dashboard Title → Dashboard Subtitle → Controls → Charts inside tab
I have one suggestion: Try matching the background color of your Plotly charts with the dashboard background. A similar shade would help make the overall appearance more cohesive and consistent.
2 Likes
Ah this is amazing @harrisward! How did you manage to create the combined bar + bubble chart? I love that the bubbles are aligned with the bars, I always had difficulties creating these charts! Would love to see the code for that
1 Like
@ThomasD21M - I absolutely love the color combination of green and purple here, along with the font selection. It really stands out! It also gives me a bit of a Pac-Man vibe, which I think works perfectly here! 
3 Likes
That is brilliant!!
2 Likes
Thanks a lot for your always excellent tips and also your outstanding work.
2 Likes
Of course! Plotly Graph Objects are the key and adding multiple traces. I’ll pop the source code into my github in the next day or so
1 Like
Thank you!