CartoColor icon indicating copy to clipboard operation
CartoColor copied to clipboard

think about reordering the different color groupings for categories

Open makella opened this issue 8 years ago • 10 comments

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 avatar Dec 12 '17 16:12 makella

@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

makella avatar Mar 02 '18 20:03 makella

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 avatar Mar 09 '18 20:03 ztephm

Color Balance Adjustment Tests

CARTOColors Test Points CARTOColors Test Polys CARTOColors Test Lines

Current palettes are on top:

qualitative

ztephm avatar Mar 16 '18 19:03 ztephm

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 avatar Mar 22 '18 22:03 ztephm

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 avatar Mar 22 '18 22:03 ztephm

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 avatar Mar 22 '18 22:03 ztephm

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 avatar Mar 23 '18 17:03 ztephm

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

ztephm avatar Mar 27 '18 21:03 ztephm

@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.

makella avatar Apr 27 '18 19:04 makella