Changes to the seek graph (scatterplot on play page)

I’m working on adding a legend to the graph on the play page, but also thinking of some changes to (hopefully) make it more useful. My first idea is to make unranked games a different shape so that they can still be color-coded by size. Then, the previous unranked orange color can be repurposed to signify custom board sizes.

Currently debating between circles and triangles for unranked games. Any preferences?

  • Circle
  • Triangle
  • Other (please comment)

0 voters


5 Likes

Also, feel free to post any other suggestions on how to improve the seek graph.

3 Likes

Maybe double-check if the color palette is color-blind friendly or could possibly be improved.

When picking the color palette for the multi-color go tool (see https://vsotvep.github.io/MulticolorGo.html), we found a palette that was designed to be color-blind friendly. That might be something to consider using.

3 Likes

Good idea. I’ll probably have the graph use a color-blind friendly color palette when the overall site theme is set to “accessible”. I’m thinking the color palette could also use some tweaking in light mode.

Here’s a cool site (populated with the current color scheme) if anyone wants to mess around making an accessible version.

2 Likes

As a side note, I kind of dislike that we have an “accessibility theme” - websites should be designed to be accessible by default. So if someone finds an accessible color palette that
looks good, don’t hesitate to add it to the “light” or “dark” themes as well!

That said, the information in the Seek Graph also exists in tables below that don’t depend on color, so I’m not concerned in this case.

6 Likes

Noted. In this case I also wanted to keep the original colors as much as possible out of nostalgia.

4 Likes

Gonna nudge ever so slightly OT for my usual plug of Accessible Theme is objectively better! :sweat_smile: would love to see it as the site default, or even the only available option :wink:

Back on topic…

Fair enough for nostalgia but if you want to consider accessible colours I really like this chart as a reference.

2 Likes

That chart is exactly what we used for the multi-color go palette (of https://vsotvep.github.io/MulticolorGo.html)

1 Like

I’ll try that palette out soon.

How about triangles for unranked and circles for rengo?

2 Likes

It ends up looking like this with the suggested scheme. I’m worried that the colors are a bit too muted.

3 Likes

They stand out well enough for me on dark theme, how are they on light theme?

1 Like

As far as I know the accessible theme always has a dark background. For the light theme I did this:

3 Likes

Oh I wasn’t sure if you were only putting accessible colours in accessible theme or use them for all themes

1 Like

The RNIB guidance for the use of colour in visualisations is along the lines of “never indicate anything with colour alone”. Remember there is a class of colour-blindness in which colour can barely be determined at all. Accessible use of colour is to not rely on colour alone to indicate anything.

You have a lot of other ways you could indicate the various different properties here that you have not yet explored - size, brightness, filled-in-ness, stroke pattern.

The main thing I’d like to see in the graph is a legend. It took me ages to figure out that the horizontal line indicated my rank, and not some property of the data.

4 Likes

Of course – there is also a list of challenges below the graph, and mousing over a point in the plot offers a textual representation.

I do, but I feel that most of these would introduce confusing visual clutter at the scale we’re talking. However, I’d be happy to consider if you have a specific idea to map one of these visual cues to a challenge property.

Agreed. That’s why I posted originally:

Maybe mousing over or near the rank line could display “Your rank: x kyu/dan” in addition to including the rank line in the legend (and making the styling a bit more distinctive).

4 Likes

This is an important concept, but I think it’s worth reiterating:

I’m not even vision impaired, but I solely use the tables, so I feel like this page is meets accessibility guidelines regardless of what happens in the seek graph.

1 Like

I think I’ll combine the legend and the challenge filters (which used to be at the very bottom of the page). Something like this:

4 Likes

I hate to be negative but how many really use the graph? To my mind it could just be removed all together for a cleaner UI, especially on mobile.

4 Likes

Possibly nobody uses the graph because it needs updating :man_shrugging:

3 Likes

Or maybe because this kind of info shouldn’t be presented in a graph? :man_shrugging:

1 Like