Opened 6 weeks ago

Last modified 4 days ago

#28353 needs_revision defect

Use Guard & Exit, Guard only, Exit only, and Middle only on all bandwidth by flag graphs

Reported by: teor Owned by: metrics-team
Priority: Medium Milestone:
Component: Metrics/Website Version:
Severity: Normal Keywords:
Cc: teor, metrics-team, ux-team Actual Points:
Parent ID: #28328 Points:
Reviewer: Sponsor:

Description

Should we use Guard & Exit, Guard only, Exit only, and Middle only on:

I think it would be helpful to be consistent, but it's also not a big deal.

If we make the bandwidth-flags and bwhist-flags graphs use the same flags, should we merge the two graphs?

Child Tickets

Change History (31)

Changed 6 weeks ago by karsten

comment:1 Changed 6 weeks ago by karsten

I like the idea! Note, however, that a merged graph will contain eight lines. We'll have to split the graph and have one subgraph for advertised bandwidth and one for bandwidth history. Or we'll have to split it into four subgraphs by relay flag combination. I think two subgraphs works better, but I haven't tried four. Here's an example:


And yes, doing the same for the #28328 would work, too. Continuing that discussion on that ticket.

comment:2 Changed 6 weeks ago by teor

Hmm, let's have the same scale on both graphs if we can?

Changed 6 weeks ago by karsten

comment:3 in reply to:  2 Changed 6 weeks ago by karsten

Replying to teor:

Hmm, let's have the same scale on both graphs if we can?

Sure!


comment:4 Changed 4 weeks ago by karsten

So, should we do it?

comment:5 Changed 4 weeks ago by teor

Oh, I didn't realise you were waiting for feedback!

Yes, it looks good. Let's do it.

Changed 4 weeks ago by karsten

comment:6 Changed 4 weeks ago by karsten

Indeed, I could have made that clearer. Thanks for the feedback now!

So, I was just about to implement this, and then I had another visualization idea: this may be a case where an area plot works better than a line plot.


Some remarks:

  • The total area is also the total advertised bandwidth or total bandwidth history for all relay flag combinations. That information is not available in the line graph.
  • I chose an order for the areas where "Guard and Exit" sits between "Guard only" and "Exit only". I also chose a color that can be seen as mix of the two other colors. The idea is that it should be relatively easy to visually spot the area of Guard-flagged relays or Exit-flagged relays regardless of the other flag.
  • "Neither Guard nor Exit" could as well be the top-most area. It can't, however, go in the middle, because that spot is already taken. But that's why I didn't call it "Middle only" anymore.

If this graph still makes sense to you, I'd want to run it by the UX team for better colors, so that the "Guard and Exit" color looks less muddy and all colors are most likely color-blind friendly.

Now I'm again waiting for feedback. :) Thanks in advance!

comment:7 Changed 4 weeks ago by teor

Wow, ok, that looks really great. And it's much easier to compare the graphs.

Let's consider using areas for the consensus weight graphs as well.

Changed 4 weeks ago by karsten

comment:8 Changed 4 weeks ago by karsten

Cc: metrics-team ux-team added

Glad you like it, too! And yes, we should do the same with the consensus weight graphs once we have a good solution here.

So, after sleeping over it, I made another graph with primary colors blue for Exit and red for Guard, secondary color purple for Guard and Exit, and a neutral color but not gray for Neither Guard nor Exit:


However, here ends my color wisdom and I hand over to the UX people. Copying them on this ticket and reaching out via email.

comment:9 Changed 3 weeks ago by antonela

Hi! The contrast between the pink and the red colors are not strong enough. I would suggest having a shade of green (aroundish #12bc00).

I think that would be useful for you to have a suggestion on how to render this kind of graphs. I filed #28629 to have a Graphs section at the styleguide.

Changed 3 weeks ago by karsten

comment:10 Changed 3 weeks ago by karsten

Replying to antonela:

Hi! The contrast between the pink and the red colors are not strong enough. I would suggest having a shade of green (aroundish #12bc00).

Hi antonela!

Hmm, I see how green would have a stronger contrast. But green doesn't convey the special meaning of the second color as a mix of the first and the third color: the first color stands for relays with the Exit flag, the third color for relays with the Guard flag, and the color in between for relays with both Guard and Exit flags. That's why the middle color was supposed to be a blend of the other two colors, which is not the case with green.

How's this: magenta for Exit, cyan for Guard, and blue for Guard and Exit?


comment:11 Changed 2 weeks ago by irl

I like the area plot. For looking at colors, see this website. Just put the colors in either side and it will calculate the contrast ratio.

W3C guidelines: https://www.w3.org/TR/WCAG/#contrast-minimum

comment:12 Changed 2 weeks ago by antonela

I used ColorOracle to imitate commons colorblind issues. Check the attachements. I think you will need a better contrast between that magenta and that blue. A #0000FF blue will works better.

Nice process! we will have this in mind for #28629

comment:13 in reply to:  12 Changed 2 weeks ago by dcf

Replying to antonela:

I used ColorOracle to imitate commons colorblind issues. Check the attachements. I think you will need a better contrast between that magenta and that blue. A #0000FF blue will works better.

Nice process! we will have this in mind for #28629

Here's a previous ticket on graphs for color vision deficiencies: #6463.

For my version of colorblindness,

  • comment:6 (purple green gray) is great, A+.
  • comment:8 (red magenta blue gray) is only a little worse, the red and magenta are closer but still distinguishable. The bottom three colors are good. I know karsten said it's not gray but it looks gray to me :)
  • comment:10 (magenta blue lightblue gray) is not good, I have to look twice to distinguish the magenta and blue. The bottom three colors are good.

Changed 13 days ago by karsten

comment:14 Changed 13 days ago by karsten

New suggestion with light blue, green, and yellow:


Context: I usually avoid using yellow as chart color, because it works terribly in line charts. But I think it works okay in a stacked area plot when surrounded by darker colors. The three colors chosen here also satisfy the "two-colors-mixed-together" idea for this graph. And I think it works for most types of colorblindness, at least if I interpret the result of Coblis, the color blindness simulator, correctly.

comment:15 Changed 13 days ago by karsten

Status: newneeds_review

irl, unrelated to the actual colors, can you please review the last two commits in my task-28353 branch? This branch does not yet contain a patch to remove the two obsolete graphs, and we might still want to tweak the colors. But it would be good to announce changes now in order to start the two-week countdown for making those changes by December 20. Thanks!

comment:16 Changed 12 days ago by irl

Status: needs_reviewmerge_ready

I have not looked in a lot of detail for syntax issues or other specifics, but this looks good in principle.

comment:17 Changed 12 days ago by karsten

Great! Pushed and deployed the first commit. We'll have two more weeks to finalize the color discussion, missing patch (to remove the two obsolete graphs), and for a more detailed review. Thanks!

comment:18 Changed 6 days ago by karsten

Please also review the newly added commit 1f70089 in my task-28353 branch which removes the two obsolete graphs and updates documentation.

comment:19 Changed 6 days ago by karsten

Status: merge_readyneeds_review

comment:20 Changed 4 days ago by notirl

Status: needs_reviewneeds_revision

Can we redirect the old pages to the new bandwidth-flags page?

comment:21 in reply to:  20 Changed 4 days ago by karsten

Replying to notirl:

Can we redirect the old pages to the new bandwidth-flags page?

Hmm. Or maybe a page with the new link, at least for the next couple months? Otherwise people will never update their bookmarks.

Note: See TracTickets for help on using tickets.