don't use so many colors that look the same

[jrheard]

on this graph:

the middle five sections are drawn using colors between yellowish-green and blueish-green, all of which look extremely similar to my eye. when i see that a particular yellowish-greenish thing is disproportionately represented and i want to see which one it is, i have to spend five minutes squinting at the legend (not shown) and seeing which yellowish-green dot matches the section of the graph i'm interested in.

long story short - can you please make firefly not use so many colors that look the same? thanks!

[fhats]

putting @bis12 on this for right now since I don't have the bandwidth to investigate. @bis12 - if you can't get to this in a little while, please bounce it back to me

[imbstack]

Background

In which we discuss how we currently choose colors

Colors are chosen from equidistant points on the HSV spectrum, which is what gives us our current rainbow. This works fine for anywhere up to a handful of colors, but clearly fails when there are as many colors needed as you have in that graph.

Solution 1

In which we do something clever

Someone posted online a Matlab snippet that generates maximally perceptually-distinct colors given an n for the number of colors we want and a background color. We could port this to JS and use it to generate our colors. No guarantees are made for how well this would work.

Solution 2

In which we add more UI

There is a possibility that we cannot make a better choice of colors in the general case and that we will always have similar looking colors when there are this many data sources being plotted. If this is true, we should highlight the corresponding line or area whenever a user hovers over the color swatch or title in the key. This would be nice in any case and would certainly solve the general case of having too many data sources to pick distinct colors for.

Conclusion

In which a question is asked

How do you two feel about either of these solutions?

[jrheard]

i prefer option 2. also, one thing to consider - we could just not assign all the colors in order. we could deliberately interleave the first half of our ordered list of colors with the second half, for instance.

[bigo]

seems pretty obvious that we should do both.

On Nov 22, 2012, at 11:48, Brian Stack notifications@github.com wrote:

Background

In which we discuss how we currently choose colors

Colors are chosen from equidistant points on the HSV spectrum, which is what gives us our current rainbow. This works fine for anywhere up to a handful of colors, but clearly fails when there are as many colors needed as you have in that graph. Solution 1

In which we do something clever

Someone posted online a Matlab snippethttp://www.mathworks.com/matlabcentral/fileexchange/29702-generate-maximally-perceptually-distinct-colors/content/distinguishable_colors.mthat generates maximally perceptually-distinct colors given an n for the number of colors we want and a background color. We could port this to JS and use it to generate our colors. No guarantees are made for how well this would work. Solution 2

In which we add more UI

There is a possibility that we cannot make a better choice of colors in the general case and that we will always have similar looking colors when there are this many data sources being plotted. If this is true, we should highlight the corresponding line or area whenever a user hovers over the color swatch or title in the key. This would be nice in any case and would certainly solve the general case of having too many data sources to pick distinct colors for. Conclusion

In which a question is asked

How do you two feel about either of these solutions?

— Reply to this email directly or view it on GitHubhttps://github.com/Yelp/firefly/issues/43#issuecomment-10639919.

[fhats]

+1 for doing both. I really want that client side color picker and annotations chooser ui :)

Happy thanksgiving!

On Thursday, November 22, 2012 at 12:38 PM, Oliver Nicholas wrote:

seems pretty obvious that we should do both.

On Nov 22, 2012, at 11:48, Brian Stack notifications@github.com wrote:

Background

In which we discuss how we currently choose colors

Colors are chosen from equidistant points on the HSV spectrum, which is
what gives us our current rainbow. This works fine for anywhere up to a
handful of colors, but clearly fails when there are as many colors needed
as you have in that graph.
Solution 1

In which we do something clever

Someone posted online a Matlab
snippethttp://www.mathworks.com/matlabcentral/fileexchange/29702-generate-maximally-perceptually-distinct-colors/content/distinguishable_colors.mthat
generates maximally perceptually-distinct colors given an
n for the number of colors we want and a background color. We could port
this to JS and use it to generate our colors. No guarantees are made for
how well this would work.
Solution 2

In which we add more UI

There is a possibility that we cannot make a better choice of colors in the
general case and that we will always have similar looking colors when there
are this many data sources being plotted. If this is true, we should
highlight the corresponding line or area whenever a user hovers over the
color swatch or title in the key. This would be nice in any case and would
certainly solve the general case of having too many data sources to pick
distinct colors for.
Conclusion

In which a question is asked

How do you two feel about either of these solutions?

—
Reply to this email directly or view it on
GitHubhttps://github.com/Yelp/firefly/issues/43#issuecomment-10639919.

— Reply to this email directly or view it on GitHub (https://github.com/Yelp/firefly/issues/43#issuecomment-10644532).

[bigo]

this guy has some opinions on the subject http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/

[dyakovlev]

Why not just highlight the relevant stripe when the label is moused over? Of course, this wouldn't work for static firefly displays with no input..