Moving to a stacked-style chart

[Omga4000]

Hi TPU admins,

Have you considered moving to a stacked-style charts for your GPU reviews?
If you condense the resolutions you could post all charts in one page and we won't have to click through 20 pages to see all the results of different games.
It will also be much easier to compare them to one another without having to look at 3 different charts.

Here's an example I've created:
(EDIT: Using a new, prettier template than I had originally used)
I've also sampled and matched the current TechPowerUp color scheme to match.
Showing both "lights-on" and "lights-off" (dark mode) modes, which will be automatically adjusted according to the user's settings.

Cyberpunk 2077 | Created with Datawrapper

Average FPS - Higher is Better

www.datawrapper.de

Relative Performance | Created with Datawrapper

Higher is better

www.datawrapper.de

 

[W1zzard]

Good idea

Hmm .. such an approach doesn't work well with our style of putting the bar label inside the bar .. but we can always switch to a different presentation format.

I also fear that the charts are too busy for a wide range of our audience, who can barely understand an x-y chart. Part of our success is that the charts are really easy to read and are static images that can easily be shared around

Thoughts from other members?

Edit: can you make another chart with 12 entries (typical game), and one with 35 (typical summary)

 

[lexluthermiester]

Thoughts from other members?

It might make things more compact and potentially easier to read. Might also save the review staff time not having to create extra graphs.

 

[qubit]

This isn't bad and I see it on other sites, but I prefer the current style as it's clearer. One can much more easily visually see at a glance the difference in performance between the cards at a particular resolution.

 

[BSim500]

I'm happy to see resolutions combined into one stacked chart as normally there's always going to be a wide enough gap between fps to not cause issues with labels clashing (unless a game is severely CPU bottlenecked). Not sure about combining completely different games as if they have a very close performance that could cause readability issues. Stacked charts only work when the 2-3x lots of data to be displayed always have enough of a gap between them to write the data on the bar, but not for data where they could be close to each other. Only problem I can see is if you decided to introduce including the oft-requested 1% / 0.1% lows in future, you'd use the stacked chart for that and would then have no room for resolutions. Of course a 9-column table (avg / 1% / 0.1% x3 resolutions) is one alternative that would give the maximum amount of data in the minimum amount of space.

 

[P4-630]

I like this style:

Nvidia GeForce RTX 4080 - De enige echte 4080

De GeForce RTX 4080 is een van de meest controversiële videokaartlaunches in de geschiedenis van Nvidia. Het wél uitgebrachte model heeft een naam hoog te houden, maar lukt dat ook?

tweakers.net

(move your mouse over the graphs)

 

[Frick]

I like this style:

Nvidia GeForce RTX 4080 - De enige echte 4080

De GeForce RTX 4080 is een van de meest controversiële videokaartlaunches in de geschiedenis van Nvidia. Het wél uitgebrachte model heeft een naam hoog te houden, maar lukt dat ook?

tweakers.net

(move your mouse over the graphs)

Oh god no. Cool concept, but not as implemented there.

 

[P4-630]

Or this:

Review: Lenovo Ideapad 3 (82KT00C5MH). 469 euro met Ryzen 3

Voor de Ideapad 3 betaal je minder dan 500 euro. Is deze laptop van Lenovo de moeite waard? De benchmarkscores verrassen ons.

nl.hardware.info

 

[Omga4000]

Edit: can you make another chart with 12 entries (typical game)

Here's an example I've created for the 12 entries:

Cyberpunk 2077 | Created with Datawrapper

Average FPS - Higher is Better

www.datawrapper.de

(hover over them with your mouse)

Here's the embed code so you can try embedding it into a webpage and see what it looks like:

<iframe title="Cyberpunk 2077" aria-label="Split Bars" id="datawrapper-chart-SUy0m" src="https://datawrapper.dwcdn.net/SUy0m/3/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="590" data-external="1"></iframe>
<script type="text/javascript">!function(){"use strict";window.addEventListener("message",(function(e){if(void 0!==e.data["datawrapper-height"]){var t=document.querySelectorAll("iframe");for(var a in e.data["datawrapper-height"])for(var r=0;r<t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data["datawrapper-height"][a]+"px"}}}))}();</script>

and one with 35 (typical summary)

Different style, just to show what else is possible.

Relative Performance | Created with Datawrapper

Higher is better

www.datawrapper.de

<iframe title="Relative Performance" aria-label="Split Bars" id="datawrapper-chart-NdKcH" src="https://datawrapper.dwcdn.net/NdKcH/4/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="1164" data-external="1"></iframe>
<script type="text/javascript">!function(){"use strict";window.addEventListener("message",(function(e){if(void 0!==e.data["datawrapper-height"]){var t=document.querySelectorAll("iframe");for(var a in e.data["datawrapper-height"])for(var r=0;r<t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data["datawrapper-height"][a]+"px"}}}))}();</script>

I prefer the current style as it's clearer

I feel like the changes I've made would greatly assist the readability.

Cool concept, but not as implemented there

Or this

Feel free to check my suggested implementation shown above, improvements appreciated!
If your decision was changed don't forget to edit your poll answer

 

[W1zzard]

Might also save the review staff time not having to create extra graphs.

I've coded a big database management system for it, just click on "generate" and it builds everything and optionally uploads to the review

(move your mouse over the graphs)

No plans to make dynamic JavaScript charts. We get A LOT of exposure through social media (I see our charts everywhere), because they are simple images that people can easily link to/upload.

The charts are HWI have a static option in the hamburger menu, still not sure

 

[birdie]

I totally dislike it.

What I'm looking forward is a JS chart akin to computerbase.de where you can hover the mouse over any GPU and it becomes 100% and all the other cards values are recalculated automatically in relation to it. Makes comparing GPUs a lot easier than calculating your GPU % vs 100%.

And instead of say three charts, you have just one - you just choose in the header which resolution you're interested in.

In this case you actually get away with having ~25 pages of charts and instead you can choose any number of games you're interested in a single combined chart. Not good for an ad revenue though.

This could be made an extra review page/feature, though where you're free to choose 1) resolution (radio) 2) games (checkboxes) and 3) cards (checkboxes) and see the results you need.

That comes with a huge shortcoming though - no easy way to grab a link to a chart to copy it to somewhere else, so old static PNG charts absolutely have to be there somewhere.

 

[lexluthermiester]

I've coded a big database management system for it, just click on "generate" and it builds everything and optionally uploads to the review

Nice! Didn't know you'd automated the process to that extent.

 

[Omga4000]

I totally dislike it.

Just wondering, what do you dislike exactly? The current style or what I've offered?
Because what I've offered is basically the same as what we're currently using, only combined into a single chart.

Also, as @W1zzard had noted, there are no plans to use JS charts.

 

[Vayra86]

Oh god no. Cool concept, but not as implemented there.

Yeah I hate it too.

Kinda grown accustomed to the current TPU style, the info is just there, its simple, easy to read and the numeric information is included in the same bar, as well. Not just %. It just places everything you need to know about a specific card on a single line. That's good, to me.

Just wondering, what do you dislike exactly? The current style or what I've offered?
Because what I've offered is basically the same as what we're currently using, only combined into a single chart.

Also, as @W1zzard had noted, there are no plans to use JS charts.

This is messy:

And we're missing FPS in the chart. So we have percentages with no context. In the other chart, we had FPS without percentages. If you do both, a larger part of each chart will be working like above: part out of the bar, part inside the bar, with different color text. For TPU's charts, there is no movement of text no matter the length:

Another point is that you're also giving the reader 'more work' to read a chart instead of what is essentially (TPU style) a bullet list of models and accompanying data. I find myself having to skim over the x/y chart left to right to connect several pieces of info.

Another point is what the focus is of this style: here, the focus seems to be 'the relative performance of cards between resolutions' but the practical situation is often that you're just looking at the performance for a specific resolution. That's what matters. If I game at 1440p I don't really care primarily about the performance lost going to 4K.

 

[Omga4000]

Yeah I hate it too. Never go there anymore either because its the bottom barrel of parts reviews really. Not a review goes by over there without major fail. Consistency is zero, testing methodologies change all the time, and since they've invited Hardware.info to the team, nothing improved either, except the quantity.

Kinda grown accustomed to the current TPU style, the info is just there, its simple, easy to read and the numeric information is included in the same bar, as well. Not just %. It just places everything you need to know about a specific card on a single line. That's good, to me.


This is messy:

View attachment 271087
And we're missing FPS in the chart. So we have percentages with no context. In the other chart, we had FPS without percentages. If you do both, a larger part of each chart will be working like above: part out of the bar, part inside the bar, with different color text.

Another point is that you're also giving the reader 'more work' to read a chart instead of what is essentially (TPU style) a bullet list of models and accompanying data. I find myself having to skim over the above chart left to right to connect several pieces of info.

I really didn't understand your point.

1. This is messy - what is?
   The spaces between the numbers? The percentage symbol? The numbers going out of the bar?
   Unclear what you meant, but it's all fixable with some editing, just tell me what exactly was it that bothered you here.
2. You're missing FPS in which chart? This is the relative performance chart.
   TPU never had FPS in their relative performance charts.
   W1zzard asked me to create two separate charts: one with 12 entries and FPS, and one with 35 entries for the relative performance chart.
   The idea was never to combine the two of them into one.
3. This is literally less work for the reader since he doesn't have to juggle between 3 charts.
   I really didn't get what was more complicated or "more work" here, do explain.

All I've done is take 3 charts and make them a single chart, that's really it.
I didn't change the current TPU style even a bit - just combined it into one.
It's basically as if I had done this:

Only I made it prettier

If you do both, a larger part of each chart will be working like above: part out of the bar, part inside the bar, with different color text. For TPU's charts, there is no movement of text no matter the length

EDIT:
Saw your edit just now.
Ohhh I see the problem here. You're talking about the design itself. That's not what I meant to show, though.
What I've created is an example of what I had meant a stacked-style chart would look like.
The colors, indentations, location of the FPS / percentages, font style, font size, etc.. are all to be decided by TPU themselves.
Nothing of what I had done is actually what I had suggested TPU uses. I am just showing a very general example / idea.

Please do not use the current template (which is just some free template I found online to express my idea) when you're considering this suggestion.

The only question which should be discussed here is whether or not we should use 3 separate charts or a stacked-style charts.
Nothing more, nothing less