Win ratio visualisation: bar chart change proposal


Call me thick, but I only now understood the visualisation below the line chart - it is a monthly horizontal normalized stacked bar, right?

In its current form it shows the ratio of relative strength in the win and loose categories. I personally have a hard time making anything of it since my stats of playing stronger/weaker opponents is skewed.

I would suggest a very simple change: switch the relative strength and results dimension in the visualisation. It will very easily show you the trend in your win ratio for stronger and weaker opponents, which is a sign of evolution if they are not equal.

Personally, I often resort to do it by hand but having it monthly is a drag.

Anyway, it is a suggestion on a feature which is already lightyears ahead of other servers so - thanks for the nice website!!!



It might be useful to mock up what you mean - I’m finding it hard to visualise.

If you mouse over a month, that month’s data is presented in the pie chart.

Does that help you more easily see what you are interested in?


Welcome to the community zormerton :slight_smile:

@Eugene wrote the entire element you’re discussing, FYI

1 Like

Heh heh - a slight correction …

I added the pie chart, because I never could really get much visual insight from the bar graph :smiley:

So I’m definitely curious in learning about different ways we might look at that bar graph.

1 Like

huh, thought you rewrote the code for the bar graph at the same time (and also added the extra graph under it)?

Nah, I just pushed the graph/bar over to the left to put the pie next to it.

I did change the colours (amid much debate!)


and how! :rofl: that thread almost got VIOLENT haha

1 Like

Wow. That was fast.
I am on my phone rn heading to a packed day of work. I can try to find time this week end for a mockup but the change I suggest is very small in terms of chart so it would look the same, in a slightly uglier since instead of horizontally stack purple and green, it would be for instance purple stacked on deep green for the “loose bar”, say below, and pink stacked on light green for the “wins bar” (top bar) .

The pie chart gives the global ratios category/total. The bar chart:
vertically: shows the counts (and incidentally ratio of) won and lost games.
Horizontally: ratios of relative strength split by won (top bar) and lost games (bottom bar)

So clearly the information is distinct. Grasping the ratios shown in the bar chart from the pie chart is difficult for me, but, maybe it is me but I am not very interested in the horizontal information in the bar chart. I would find the result of switching the “relative strength” and “result” dimensions more informative.

If this is a visualisation object taking the columns in input, i figured the change in the code would be minor, but for the potential problem of adapting the color coding.

Is it clearer?

Really cool reactivity :smile:


1 Like

Damn - rereading it is still not clear why.

So to emphasize that: what I think is interesting is to compare win ratio against stronger and win ratio against weaker.

For instance


Out of curiosity, would the effect you’re wanting to see also be possible if we kept wins on top of losses, but flipped the direction of growth? So instead of weak and strong opponents respectively being left and right, it would be expected and unexpected outcomes on left and right? I think that might be a nice balance of the info you seak combined with the aesthetics of keeping wins and losses separate.


1 Like

An aside: no coding change of this feature is “easy”. It’s one of the hairiest part of the client code - all painstakingly rendered using raw SVG.


However, don’t let this be a deterrent to you passionately making your claim for the obvious benefits of your preferred method :wink: understanding the job will be difficult is just added motivation to convince him that your way is worth it :smiley:

1 Like

The problem is the split in losses and wins - the horizontal information is relative to the number of wins at the top, and number of losses at the bottom. So you see the indeed expected vs unexpected, but not relative to a segment but relative to the total number of wins or losses. So this ratio of unexpected outcome for either wins or losses varies greatly depending on how much more you play weaker or stronger players.

ugh - but that is indeed what I feared. So the color of each part of the bar chart is hard coded for (top, left), (top right), etc? Then indeed annoying.

But what do you think of the added value?

Swapping colours alone is easy enough, but changing which value is in which quadrant is … a thing.

Though honestly, if it’s just “make this quadrant use this number instead of that one” it’s still probably not too bad.

As you say - is the added value there?

One thing that’s possible is to implement the change then , see if it gets approved, then see who complains (as per the pie chart :D) )

1 Like

ok - can I help?

Sure, lets chat :slight_smile:


FWIW, this proposed change is being discussed in this PR now.


This finally dealt with my longstanding qualm against the colour change. Finally, expected results (on the left) are clearly distinguishable from unexpected results (on the right)! :slight_smile:


This is one of those situations where it is impossible to please everyone. It depends what you are trying to see in the chart. There are three elements people might look at:

  1. Wins vs losses
  2. Stronger opponents or weaker opponents
  3. and expected results vs unexpected results.

When dividing a bar (or pie chart) into four segments it is impossible to arrange the four segments so that all three comparisons divide it cleanly into two parts.
Currently it is #1 (Wins &Losses) that appear on the diagonal but that seems fine to me because for #1 it is still an easily visible ‘Green vs Purple’. However someone who is colour blind may rue the change.

GaJ: Could you perhaps display the four components on a mobile tetrahedron with the size of each face adjusted proportionally? :wink:


I’m pretty sure his brain just exploded… :stuck_out_tongue:

1 Like