Skip to content
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

think about reordering the different color groupings for categories #39

Open
makella opened this issue Dec 12, 2017 · 10 comments
Open

think about reordering the different color groupings for categories #39

makella opened this issue Dec 12, 2017 · 10 comments

Comments

@makella
Copy link
Contributor

makella commented Dec 12, 2017

for example, 2 color version of Prism wouldn't be purple to blue it would be purple to yellow (basically, working in complementary, split complementary, etc.)

@makella
Copy link
Contributor Author

makella commented Mar 2, 2018

@ztephm

To follow-up on our conversation about category schemes...

Here are a couple of examples of what I would like to explore.

Qualitative Scheme Color Organization

Is there a better way to organize some of the schemes to support better color differentiation for maps with fewer categories and/or should we reconsider the default?

For example, a map with 3 categories, using Prism:

screen shot 2018-03-02 at 1 23 31 pm

Prism's current color order:

screen shot 2018-03-02 at 1 16 28 pm

Would this be better? (Just as an example, haven't tested!)

screen shot 2018-03-02 at 1 25 23 pm

OR

Should we default to another color scheme for category maps?

For example, the same three categories with Vivid:
screen shot 2018-03-02 at 1 27 01 pm

A Second Look at Color Balance

Do we need to fine-tune any of the category schemes?

For example, do any of the colors in these schemes need to be better balanced or modified at an individual level? Are some colors in the schemes to close to one another? Do some have more saturation than others, etc?

screen shot 2018-03-02 at 1 29 14 pm

Those are two questions to start with!

Let me know if you have any questions!

thanks!
mamata

@ztephm
Copy link

ztephm commented Mar 9, 2018

Qualitative Scheme Color Organization

Reconsidering the default

Vivid and Bold colors look like they are more easily distinguished from each other & Voyager.

  • I tested at a variety of zooms, including ones where the most Voyager colors were visible

  • 2 Categories:

    2_categories

  • 5 Categories:

    screen shot 2018-03-09 at 3 33 14 pm

Prism's color order

  • Current:

    36920184-197c57de-1e1d-11e8-8597-d8c690a81f6b

    5 Categories:

    prism_5cat

  • If Prism is re-ordered like this, the first 4 colors are a mini perceptual sequence: one category one doesn't stand out too much more than the others but they are still easier to distinguish from each other than current, u agree?:

    prism_mix1

    5 Categories:

    prism_mix1_5cat

  • Or how about this (same idea w/1st few colors = one doesn't visibly stand out more than the other categories)?

    prism_mix2

    5 Categories:

    prism_mix2_5cat

Pastel's color order

  • Current:

    screen shot 2018-03-09 at 3 53 16 pm

    5 Categories:

    pastel_5cat

  • How about this order instead against Voyager basemap, just putting yellow last?

    screen shot 2018-03-09 at 3 57 10 pm

    2 Categories:

    pastel_mix1_2cat

    5 Categories:

    pastel_mix1_5cat

@ztephm
Copy link

ztephm commented Mar 16, 2018

Color Balance Adjustment Tests

CARTOColors Test Points
CARTOColors Test Polys
CARTOColors Test Lines

Current palettes are on top:

qualitative

@ztephm
Copy link

ztephm commented Mar 22, 2018

A Second Look at Color Balance

Here's round 2 of adjusted palettes

Prism

#584c8f, #1a6c9c, #39a7a5, #0f8554, #72ae48, #ecac0a, #e17c05, #cc5a43, #cc3d5f, #993966, #ad4ea9, #666666

Antique

#80536b, #c49e60, #af6458, #736f4c, #4a6d92, #585377, #68855b, #9c9c5e, #ad6a81, #a18160, #4a8187, #7b8888

Bold

#8a4599, #21a66c, #386cba, #f2b700, #e84d6a, #80ba5a, #e68311, #188c9e, #cf48b4, #f97a72, #51518f, #a6aa9a

Vivid

#e58707, #5871b0, #2fbd9c, #9ac945, #cc62b0, #24796b, #e1af16, #2e89c3, #89519e, #ed6f66, #cc4190, #a5aa99

Pastel

#65c4cc, #f5cb69, #f89c74, #daaaf2, #87c55f, #aac1f2, #fca9cf, #c1d16f, #8be0a4, #b89ee8, #d4b485, #b3b3b3

newcolors

CARTOColors Test Points Mar 20 (on 2018-03-22 at 22.18.30).zip

CartoColors Test Lines March 20 (on 2018-03-22 at 22.19.42).zip

CARTOColors Test Polys March 20 (on 2018-03-22 at 22.20.58).zip

@ztephm
Copy link

ztephm commented Mar 22, 2018

Qualitative Scheme Color Organization 1

Here are the adjusted palettes re-ordered light/dark (mostly, some light/dark swatches I switched for max contrast on the map):

reorder_newcolors_1

Points Ordering 1 (on 2018-03-22 at 21.49.24).zip

Lines Ordering 1 (on 2018-03-22 at 22.35.58).zip

Polygons Ordering 1 (on 2018-03-22 at 22.37.51).zip

@ztephm
Copy link

ztephm commented Mar 22, 2018

Qualitative Scheme Color Organization 2

I also did another light/dark re-order w/adjusted palettes, but again with some switches:

Goals for @ least first 2 swatches

  • enough contrast to differentiate categories but look equally important
  • enough contrast with Voyager colors
  • different from first 2 colors in other palettes

reorder_newcolors_2

Points Ordering 2 (on 2018-03-22 at 22.39.37).zip

@ztephm
Copy link

ztephm commented Mar 23, 2018

Qualitative Scheme Color Organization 3

Here are the original palette colors, re-ordered light/dark:

reorder_original

For comparison here are the original colors in original order:

current_original_order

Both sets are in here:

Original Colors - Ordering (on 2018-03-23 at 17.51.28).zip

@ztephm
Copy link

ztephm commented Mar 27, 2018

A 2nd Look at Color Balance + Qualitative Scheme Organization Comparisons

Here are the 2 & 3 category comparisons, including re-ordered Prism adjusted colors:

comparisons

Here are the hex color schemes:

ADJUSTED COLORS / ORIGINAL ORDER:

Antique

#80536b, #c49e60, #af6458, #736f4c, #4a6d92, #585377, #68855b, #9c9c5e, #ad6a81, #a18160, #4a8187, #7b8888

Bold

#8a4599, #21a66c, #386cba, #f2b700, #e84d6a, #80ba5a, #e68311, #188c9e, #cf48b4, #f97a72, #51518f, #a6aa9a

Vivid

#e58707, #5871b0, #2fbd9c, #9ac945, #cc62b0, #24796b, #e1af16, #2e89c3, #89519e, #ed6f66, #cc4190, #a5aa99

Pastel

#65c4cc, #f5cb69, #f89c74, #daaaf2, #87c55f, #aac1f2, #fca9cf, #c1d16f, #8be0a4, #b89ee8, #d4b485, #b3b3b3

Prism

#584c8f, #1a6c9c, #39a7a5, #0f8554, #72ae48, #ecac0a, #e17c05, #cc5a43, #993966, #cc3d5f, #ad4ea9, #666666

ADJUSTED COLORS / REORDER 2:

Antique

#585377, #4a8187, #af6458, #c49e60, #736f4c, #9c9c5e, #80536b, #68855b, #4a6d92, #ad6a81, #a18160, #7b8888

Bold

#386cba, #cf48b4, #e68311, #21a66c, #f2b700, #51518f, #80ba5a, #8a4599, #f97a72, #188c9e, #e84d6a, #a6aa9a

Vivid

#e58707, #5871b0, #2fbd9c, #cc4190, #9ac945, #89519e, #e1af16, #24796b, #ed6f66, #2e89c3, #cc62b0, #a5aa99

Pastel

#65c4cc, #f89c74, #c1d16f, #daaaf2, #87c55f, #f5cb69, #aac1f2, #fca9cf, #d4b485, #8be0a4, #b89ee8, #b3b3b3

Prism

#cc3d5f, #39a7a5, #584c8f, #ecac0a, #993966, #72ae48, #1a6c9c, #e17c05, #0f8554, #ad4ea9, #cc5a43, #666666

Prism - light purple start

#ad4ea9, #584c8f, #39a7a5, #1a6c9c, #72ae48, #0f8554, #ecac0a, #cc5a43, #e17c05, #cc3d5f, #993966, #666666

Prism - dark purple start

#584c8f, #39a7a5, #1a6c9c, #72ae48, #0f8554, #ecac0a, #cc5a43, #e17c05, #cc3d5f, #993966, #ad4ea9, #666666

@makella
Copy link
Contributor Author

makella commented Apr 27, 2018

@ztephm thanks so much for going through this exercise!

There are some other tests I need to do with CARTO VL and category schemes. Once I wrap my head around that better, I'll walk you through it.

But I will use your modified schemes for that testing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants