CartoDB / CartoColor

CartoColors as a node module
220 stars 17 forks source link

think about reordering the different color groupings for categories #39

Open makella opened 6 years ago

makella commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

Qualitative Scheme Color Organization

Reconsidering the default

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

Prism's color order

Pastel's color order

ztephm commented 6 years ago

Color Balance Adjustment Tests

CARTOColors Test Points CARTOColors Test Polys CARTOColors Test Lines

Current palettes are on top:

qualitative

ztephm commented 6 years ago

Here are the .carto files for these tests ^

CARTOColors Test Points (on 2018-03-16 at 20.51.40).zip

CartoColors Lines (on 2018-03-16 at 20.52.55).zip

CARTOColors Test Polys (on 2018-03-16 at 20.53.38).zip

ztephm commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

reorder_newcolors_2

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

ztephm commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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