Use reduced palettes #258

dpordomingo · 2019-08-15T07:28:56Z

depends on #257
depends on #259

This PR proposes simpler palettes on charts displaying only a few different data.
e.g. when showing only merged vs unmerged, it's only needed two colors, and it might be interesting to use a different palette.

Description of the problem

Let's consider this palette greenDark, green, greenLight, redDark, red, redLight which produces nice shades of colors and relations when applied to many data (which will cause circular repetition if not enough colors compared with the amount of data to represent).

But what if the same palette is assigned to a chart representing only these 2 items passed, failed?
With current code, colors are randomly assigned, so there is no control about which will be assigned.
Assuming that we can control the color assignment (which can be wrong considering [1] [2] [3]), let's consider that the definition order will be kept.
Then, in that example chosen colors will be greenDark, green, but it would be way better if it would be green, red, closer to which the data represents.

proposed solution:

Choose better palettes when different metrics are less dense.

pros:

we can apply our main colors also in this kind of charts.
as a lateral effect, this PR also mitigates the unexpected color change in charts, which happens when the page is refreshed.

cons:

not really, but yes: if the user cares about palettes, they should choose a better palette for their data; otherwise, it will be assigned the default one, which can be ok in many cases.

Palettes Changes

On overview dashboard:

chart	reduced palette
Commits Evolution	`srcdDuo`
Number of commits per day of the week	`srcdDuo`
Number of commits to HEAD per month	`srcdDuo`
Total number of commits per repository	`srcdDuo`

On collaboration dashboard:

chart	reduced palette
Most Active Repositories	`srcdSix`
Number of pull requests created	`srcdDuo`
Time to Merge Change Over Time	`srcdDuo`

dpordomingo · 2019-08-15T07:31:41Z

@ricardobaeta There is no branding in this PR, but I also added you as a reviewer to confirm that it makes sense to have this kind of reduced palettes on charts showing only a few different metrics.

carlosms · 2019-08-15T09:18:42Z

This adds a bit of "complexity" when users create a chart, right? Instead of choosing the sourced palette, now you have to be careful to choose a palette that contains enough colors for the data you are representing.
And this might be known by us, but not by a user customizing their dashboards.

This change also avoids charts changing its colors to quite different ones when the page is refreshed.

What if we changed the code where the colors are assigned to make it deterministic? Can this be done? It would make the dashboard consistent no matter the number of colors in the palette, which I think is desirable.

This PR prepares the charts displaying only a few different data, to use palettes with fewer colors.
e.g. when showing only merged vs unmerged, it's only needed two colors, and it might be interesting to use a different palette.

This can be interesting indeed, but if we had deterministic colors assigned, we would not need reduced palettes. We could have different full sourced palettes that could apply to any chart.

se7entyse7en · 2019-08-15T10:11:24Z

I completely agree with @carlosms.

Also, what would happen if we choose a palette with fewer colors than those required? In case that the alternative solution of changing the color assignment is too complex I'd add already all the src<n> palettes instead of only those for two and six colors.

dpordomingo · 2019-08-16T12:00:26Z

I rebased over current code, so now the commit introduced by this PR is only the last one:

b1bf0e9 Proposes better palettes when there are fewer metrics to represent.

I also rewrote the PR description in a way that I think that it answers your (totally reasonable) questions:

TL;TR

Is it reasonable to think that we can have a way to control how the way that colors are assigned, not based on its order, but in any kind of priorities based on, e.g. the different amount of data being displayed?
Or is it more reasonable to choose a better palette when represented data has another nature?

carlosms · 2019-08-19T10:42:26Z

I've kind of lost the conversation after editing the original description.
But still, is the (small) extra complexity needed?
The example you propose is not really related to the number of colors and metrics, it's about how failed/passed would match better with red/green.

If green and greenLight look ok next to each other in a chart with many metrics, why is it not ok on one with 2 metrics?

On the other hand I'll trust whatever @ricardobaeta prefers on this topic.

dpordomingo · 2019-08-19T11:01:22Z

My point is that a palette containing 16 colors (to be applied sequentially) may not order them using the same priority that if they were being used for a chart using only 2 colors.

But again. This is only a RFC, trying to help @ricardobaeta when he's creating our official palette.

ricardobaeta

Excellent work ✨

Use palettes with less colors in charts that does not require many different colors Signed-off-by: David Pordomingo <David.Pordomingo.F@gmail.com>

dpordomingo · 2019-09-13T09:59:44Z

Rebased over @ricardobaeta palette, already merged.

Some clarifications from the discussion above:

deterministic palettes are not that easy to implement, and they do not cover all the requirements as they were explained above,
if the chart creator does not care about colors, it will be selected the default one, which is ok for most of the cases. If the creator prefers a more limited palette (to have more control over the applied colors), the creator can choose it.
this does not collide nor difficult any other furder work to improve superset or D3 palettes in order to let us control better the applied colors, i.e. using a more powerful way to define only one palette with internal priorities for its colors.

If you @src-d/applications do not have any strong opinion against this, we could merge this to be released on v0.6.0.

carlosms

👍

dpordomingo · 2019-09-13T12:40:37Z

Changelog at #280(suggestion)

dpordomingo added the enhancement New feature or request label Aug 15, 2019

dpordomingo requested review from ricardobaeta and a team August 15, 2019 07:28

dpordomingo self-assigned this Aug 15, 2019

This was referenced Aug 15, 2019

Use SUPERSET_DEFAULT as the default palette #257

Merged

[RFC] Apply our brand colors on source{d} charts #241

Closed

Apply our brand colors on source{d} dashboards #259

Merged

dpordomingo force-pushed the schemes-reduced-palettes branch from 377a547 to b1bf0e9 Compare August 16, 2019 10:12

dpordomingo changed the title ~~Use reduced palettes~~ [RFC] Use reduced palettes Aug 16, 2019

dpordomingo force-pushed the schemes-reduced-palettes branch from b1bf0e9 to 99a91be Compare August 19, 2019 04:10

ricardobaeta approved these changes Aug 20, 2019

View reviewed changes

dpordomingo mentioned this pull request Sep 11, 2019

source{d} color scheme by default on Charts Visual Properties #255

Closed

Use simpler palettes for charts with only a few metrics

8a56b03

Use palettes with less colors in charts that does not require many different colors Signed-off-by: David Pordomingo <David.Pordomingo.F@gmail.com>

dpordomingo force-pushed the schemes-reduced-palettes branch from 99a91be to 8a56b03 Compare September 13, 2019 09:00

dpordomingo changed the title ~~[RFC] Use reduced palettes~~ Use reduced palettes Sep 13, 2019

dpordomingo requested a review from carlosms September 13, 2019 10:00

carlosms approved these changes Sep 13, 2019

View reviewed changes

dpordomingo mentioned this pull request Sep 13, 2019

Bump changelog for 0.6.0 #280

Merged

2 tasks

dpordomingo merged commit 8c09c38 into src-d:master Sep 16, 2019

dpordomingo deleted the schemes-reduced-palettes branch September 16, 2019 05:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Use reduced palettes #258

Use reduced palettes #258

Uh oh!

dpordomingo commented Aug 15, 2019 •

edited

Loading

Uh oh!

dpordomingo commented Aug 15, 2019

Uh oh!

carlosms commented Aug 15, 2019

Uh oh!

se7entyse7en commented Aug 15, 2019

Uh oh!

dpordomingo commented Aug 16, 2019

Uh oh!

carlosms commented Aug 19, 2019

Uh oh!

dpordomingo commented Aug 19, 2019

Uh oh!

ricardobaeta left a comment

Uh oh!

dpordomingo commented Sep 13, 2019

Uh oh!

carlosms left a comment

Uh oh!

dpordomingo commented Sep 13, 2019

Uh oh!

Uh oh!

Use reduced palettes #258

Use reduced palettes #258

Uh oh!

Conversation

dpordomingo commented Aug 15, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description of the problem

proposed solution:

pros:

cons:

Palettes Changes

Uh oh!

dpordomingo commented Aug 15, 2019

Uh oh!

carlosms commented Aug 15, 2019

Uh oh!

se7entyse7en commented Aug 15, 2019

Uh oh!

dpordomingo commented Aug 16, 2019

TL;TR

Uh oh!

carlosms commented Aug 19, 2019

Uh oh!

dpordomingo commented Aug 19, 2019

Uh oh!

ricardobaeta left a comment

Choose a reason for hiding this comment

Uh oh!

dpordomingo commented Sep 13, 2019

Uh oh!

carlosms left a comment

Choose a reason for hiding this comment

Uh oh!

dpordomingo commented Sep 13, 2019

Uh oh!

Uh oh!

dpordomingo commented Aug 15, 2019 •

edited

Loading