Skip to content

Adding names to the color in the new (Vega) default color cycle #7248

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
anntzer opened this issue Oct 11, 2016 · 39 comments
Closed

Adding names to the color in the new (Vega) default color cycle #7248

anntzer opened this issue Oct 11, 2016 · 39 comments
Labels
Difficulty: Easy https://matplotlib.org/devdocs/devel/contribute.html#good-first-issues
Milestone

Comments

@anntzer
Copy link
Contributor

anntzer commented Oct 11, 2016

The new default color cycle (Vega10, http://matplotlib.org/devdocs/users/dflt_style_changes.html#colors-color-cycles-and-color-maps) is pretty nice, but the colors are not named. Thus, the only way to refer to a specific color in that cycle is with the "Cn" syntax, which does not read as well.

For examples, consider something like

positive_values = ...
negative_values = ...
ax.plot(positive_values, c="C2")  # green-ish
ax.plot(negative_values, c="C3")  # red-ish

The intent is certainly less legible than

positive_values = ...
negative_values = ...
ax.plot(positive_values, c="g")
ax.plot(negative_values, c="r")

(using green for positive values and red for negative values is a not so rare convention).

(Of course, just using "g" and "r" or whatever CSS/XKCD color names doesn't really work either if you want to blend well with other figure elements that use the Vega10 palette.)

Thus, I'd suggest adding names to the colors of the Vega10/Vega20 palette, e.g. using the "vega:" prefix. Something like "blue", "orange", "green", "red", "purple", "brown", "pink", "gray", "yellow", "cyan" (all prefixed by "vega:" -- I don't think we can use "v:" due to the possible confusion with the triangle_down marker -- depends on the exact way the parser works...) looks close to what the colors are. The Vega20 palette (which adds lighter versions of all colors) can be supported as "vega:lightblue", etc. See https://github.com/vega/vega/wiki/Scales#scale-range-literals for the full palette.

Thoughts? The implementation itself is easy of course (just add the names to the named colors dict).

I think this should be milestoned to 2.0 or 2.0.1.

@tacaswell tacaswell added this to the 2.0 (style change major release) milestone Oct 11, 2016
@tacaswell
Copy link
Member

Can not hurt, but we should make sure there is not an existing set of names for them.

I am pretty 😐 on this.

@NelleV
Copy link
Member

NelleV commented Oct 11, 2016

I think that's a good idea

@anntzer
Copy link
Contributor Author

anntzer commented Oct 11, 2016

@NelleV Can the machine shop do this? :)

@NelleV
Copy link
Member

NelleV commented Oct 11, 2016

The machine shop sure can!

@NelleV NelleV added Machine Shop Difficulty: Easy https://matplotlib.org/devdocs/devel/contribute.html#good-first-issues labels Oct 11, 2016
@anntzer
Copy link
Contributor Author

anntzer commented Oct 11, 2016

Doing the literature search suggested by @tacaswell (check whether they already have standard names) is also part of the assignment, hehe...

@trpham
Copy link
Contributor

trpham commented Oct 17, 2016

Not sure if I can use names from these references and try to match the color in vega cycle with those name using my naked eyes. Or any better way to do that?

https://xkcd.com/color/rgb/
https://en.wikipedia.org/wiki/X11_color_names
https://en.wikipedia.org/wiki/Web_colors
http://ingridsundberg.com/2014/02/04/the-color-thesaurus/
http://chir.ag/projects/name-that-color/#D62728

Also, something like: 'vega:steelblue' (for #1f77b4 ), 'vega:sienna' or 'vega:saddlebrown'( for #8c564b ) is hard to remember and long?

@NelleV
Copy link
Member

NelleV commented Oct 17, 2016

It'd be easier to find names if we had a way to see all colors that need to be named.
I do think that steelblue and saddlebrown are sligthtly loo long and too hard to remember, so if we can avoid those and stick to easy ones (vega:oranage, vega:blue), that be nicer.

@anntzer
Copy link
Contributor Author

anntzer commented Oct 17, 2016

Updated OP with link to the Vega palettes. I think that because these will be the default colors, we should stick to relatively short names.

As a side note, http://matplotlib.org/devdocs/examples/color/named_colors.html should be updated (I guess we'll have a new VEGA_COLORS dict). It may also make sense to sort the colors first by "category" in that plot (1. one-letter, 2. Vega, 3. CSS).

@NelleV
Copy link
Member

NelleV commented Oct 18, 2016

If I am not mistaken, it is only the first ten. There are only two redundant color (blue and green) so it should be quite straightforward

@tacaswell
Copy link
Member

We should probably consult @jheer on these names (I have also sent him a private email, but he is out on paternity leave this semester).

It is probably worth tracking down one of his students?

@tacaswell
Copy link
Member

Also, this is tagged 'Easy', but naming thing is one of the two hard problems in CS:

  1. cache invalidation
  2. naming things
  3. off-by-one bugs

@trpham
Copy link
Contributor

trpham commented Oct 18, 2016

Here are some suggestions of name that we come up with. I'd prefer one single word and here, some colors have many name options.

vega10

@OceanWolf
Copy link
Member

@trpham using a computer rather than by-eye to find closest match sounds like a solvable problem, just minimising the error.

def hexcolor_to_rgb(color):
    np.array([int(color[i:i+2], 16) for i in [1,3,5]])
our_color = hexcolor_to_rgb(our_c)

lowest_ms = np.inf
color_info = None
for color in list_of_their_colors:
    their_color = hexcolor_to_rgb(color)

    ms = ((their_color - our_color)**2).sum()  # find the entry
    if ms < lowest_ms:
      lowest_ms = ms
      color_info = their_color

That said, I think the "ms = " line needs to change to an algorithm more suited to colour as afaik rgb space doesn't work linearly. Others in this group can give a better formula for this. Good though as an initial approximation.

@QuLogic
Copy link
Member

QuLogic commented Oct 18, 2016

I don't think we should try to match "fancy" names to these colours (like steelblue or saddlebrown). The vega: prefix seems like a good enough differentiator, and I think picking the simplest name to go along with it is best.

@njsmith
Copy link

njsmith commented Oct 18, 2016

Should the prefix be vega10:, given that there are multiple vega scales?

@OceanWolf
Copy link
Member

@njsmith yes, I think so, I quite like the vega20 as well, useful for plotting bar charts with sub-categories.

@QuLogic I sit on the fence with this one. I agree that simple tends to work best, but I feel curious to see what names we find, and base my final opinion on that.

@anntzer
Copy link
Contributor Author

anntzer commented Oct 18, 2016

vega20 is just vega10 with lighter variants, so we could just have vega:blue, vega:lightblue, vega:red, vega:lightred and so on.
vega20b and 20c could be vegab:blue1, vegab:blue2, etc.; vegac:blue1, vegac:blue2, etc.

I'd rather keep the names of the colors in the new default cycle as short as possible.

@OceanWolf
Copy link
Member

I don't see why we need different names like that as we have namespaced the colours...

Maybe aliasing becomes an option? So we have orchid = vega10:pink

This way it allows people to search for colours, the concept behind xkcd colour naming came because people wanted to search for colours and so colours needed a description to easily find that colour. Perhaps though this goes overboard for matplotlib...

@anntzer
Copy link
Contributor Author

anntzer commented Oct 18, 2016

That's why I'm suggesting folding vega10 and vega20 into the same "vega:" namespace. If you look at how vega20b/c are arranged, they are made of quadruplets of variants of the same color, thus the blue{1,2,3,4} suggestion.

(Also I don't think "orchid" is really helpful as a name for a default color.)

@tacaswell
Copy link
Member

Also trying @domoritz to get some input from the vega folks.

@domoritz
Copy link

The color palette in vega is actually just the d3 color palette, which in turn is the original Tableau 10 color palette. Tableau recently updated the color palette as they described in a blog post: https://www.tableau.com/about/blog/2016/7/colors-upgrade-tableau-10-56782.

I think you should talk to Maureen Stone about the color names.

@efiring
Copy link
Member

efiring commented Oct 18, 2016

I seem to recall that some time ago there was a proposal to add a tableau color palette to mpl, but they were deemed to be proprietary so we did not proceed. Am I remembering incorrectly, or has something changed in the interim?

@QuLogic
Copy link
Member

QuLogic commented Oct 18, 2016

That was #3700 and I'm not sure it was ever resolved.

@tacaswell
Copy link
Member

vega, vega-light, and d3 are all BSD 3-clause, if there are IP issues, we are in a pretty big boat!

@OceanWolf
Copy link
Member

That said, vega and d3 don't exist in the repos for distros like debian and they will no doubt take a hard line on this rather than just hope for the best.

@ChrisBarker-NOAA
Copy link

@QuLogic is absolutely correct -- keep it simple, and it's mostly obviou swhat is simple from the names pasted by @trpham:

red, not crimson
brown, not sienna
pink, not orchid of violet or magenta (that's not at all magenta or violet anyway)
aqua, not turquoise or cyan

That last on it not as obvious though -- but, "turquoise" is too long and hard to spell, and "cyan" is a really common color name from the CMYK colorspace, which is exactly #00FFFF rgb(0,255,255), so better to go with "aqua"

So:
blue
orange
green
red
purple
brown
pink
gray
olive
aqua

@tacaswell
Copy link
Member

We should probably put this conversation on hold for a bit, pending more feedback from the UW group and Tableau.

This issue triggered a couple of other email chains which hopefully will get resolved soon.

@tacaswell
Copy link
Member

Literally a minute after I left my last comment I got an email from @jheer (Jeff Heer)

  1. The colors were chosen to largely align with basic color names, so those should be used: blue, orange, green, red, purple, brown, pink, gray, olive, cyan

so we should take that as the canonical names and go with that.

Maybe use 'd3' as the prefix instead of vega? I am hesitant to use Tableau's name without communicating with them (which is in progress). The cost of having 2 or 3 more-or-less identical namespaces of colors is low if we add a 'tb:' or similar prefix later

@OceanWolf
Copy link
Member

Looking at the colour code _color_data.py I see we already have the xkcd names in there so that eradicates the need for separate fancy colour names as I see it.

With the namespace, I suggest we put in the list of 20 colours as blue, lightblue, orange, lightorange, etctera, perhaps with a space or underscore, and then simply skip the light colours for assigning to the default prop_cycle, with d3 [::2].

@trpham
Copy link
Contributor

trpham commented Nov 1, 2016

The proposed naming convention that we are coming up with.
vega

@NelleV
Copy link
Member

NelleV commented Nov 1, 2016

We brainstormed today to find the color names of all possible colors in the vega cycles. We aimed at having only one namespace, and here is what we came up with.
I think we've nailed it down for category 10 and 20

@OceanWolf
Copy link
Member

@tacaswell Any word back from Tableau? Did you just try their main contact, or did you also try some of the specific people in the company, like the person who wrote the blog post cited above for how they devised their new colour scheme.

@tacaswell
Copy link
Member

I am talking to specific people, I'll update as soon as I know anything new. I am being a bit circumspect as I do not know if everyone on those email threads is ok with them being public.

Please do not start a second strand of inquiry with them.

@OceanWolf
Copy link
Member

Of course not, I wouldn't dream of imposing myself like that.

It has been two weeks though so I wondered if anything had come of it. I really love the colour scheme, especially for matplotlib and to come clean I have some public projects which I want to use it on ASAP, so I would like the all clear.

P.S. I should really try and come onto the Skype meetings. I shall try and free myself up to do so.

@QuLogic
Copy link
Member

QuLogic commented Nov 10, 2016

I like most of those colour names and agree with most of them. Category 10 and 20 look good, as does 20c, generally.

For 20b, it would be nice if all the colours did not correspond with the main 10 colours. That would emphasize that they are in a different set without having to modify the prefix explicitly. The red and pink in 20b don't really match with 10's red and pink, so I think that's also a good reason not to call them that as well. Using magenta for 20b's pink seems reasonable, and for 20b's red, maybe coral or salmon (but definitely not pink).

Also, there should probably be a grey alias for the gray.

@NelleV NelleV modified the milestones: 2.0.1 (next bug fix release), 2.0 (style change major release) Nov 10, 2016
@endolith
Copy link
Contributor

It would be nice if

ax.plot(positive_values, c="g")
ax.plot(negative_values, c="r")

referred to the new MPL 2.0 default green and red, so we could access them as easily as we could before, instead of using meaningless names like "C0" and "C1".

@NelleV
Copy link
Member

NelleV commented Jan 18, 2017

Hi @endolith
You can now refer to the colors as tab:blue, tab:orange etc.

@NelleV
Copy link
Member

NelleV commented Jan 18, 2017

I'm closing this issue, but we should probably document the color naming better.

@NelleV NelleV closed this as completed Jan 18, 2017
@tacaswell
Copy link
Member

The nice thing about the 'CN' names is that they will always track your current color cycle.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Difficulty: Easy https://matplotlib.org/devdocs/devel/contribute.html#good-first-issues
Projects
None yet
Development

No branches or pull requests