makella/readme.md

## readme.md

      
    Raw
  

              readme.md
            
          
    Spin the color wheel!

Inside of CARTO Builder we offer a set of default color schemes, CARTOColors, that can be used for both qualitative and quantitative data.
But what about the times when you want to customize the colors on your map, because of its theme, a predefined brand color, or just because? There are a variety of tools and guidelines available to find harmonious color combinations that can be brought into Builder to customize your map.
Another option to get started, that we outline here, is using the CartoCSS color function spin to get started with custom color schemes, particularly for qualitative data.
With the basic building blocks in place, this function can be used in a variety of ways on many different maps. To demonstrate, we'll generate a series of well-known color harmonies:

Overview

spin()

The color harmonies in the diagram above, are combinations of two or more colors with a fixed place on the color wheel. Using a base color and spin(), we can create each combination to color features on a map.
The function has two parameters a starting color (@base) and the number of degrees (25) to rotate from that color to define the next:
spin(@base,25)
The degrees range from 0-360 and can be defined as either positive or negative values. Positive values will spin clockwise, and negative, counter-clockwise.
Trees in SF

The maps in this example symbolize a subset of tree species found in the city of San Francisco's tree species inventory.
Our species of interest are Brisbane Box, Sycamore, and New Zealand Xmas Tree.
Steps

Setup


[Symbolize trees]
[Define variables]

Generate color harmonies


[Complementary]
[Analogous]
[Triadic]
[Split complementary]

Symbolize trees and switch to CartoCSS view

First,

we'll switch the basemap to Dark Matter Lite
apply default symbology to the category attribute common_species
and then switch to the CartoCSS view of the defined style


Set-up variables

Next, we'll set up variables that define the styling for each tree type and replace the default category colors in the TurboCARTO ramp with the variable names.

define the base color (#8f44c1) in the variable @brisbane
and set @sycamore and @nzxmas to a neutral gray (#555)
set the marker-width to 6 and the marker-line-color to black

@brisbane: 	#8f44c1;
@sycamore: 	#555;
@nzxmas: 	  #555;

#layer {
  marker-width: 6;
  marker-fill: ramp([common_species], (@brisbane, @sycamore, @nzxmas), ("Brisbane Box", "Sycamore", "New Zealand Xmas Tree"), "=");
  marker-fill-opacity: 1;
  marker-allow-overlap: true;
  marker-line-width: 1;
  marker-line-color: #000000;
  marker-line-opacity: 1;
}


Generate color harmonies

Complementary colors

Complementary colors are opposite from each other on the color wheel (180 degrees).
Using our base @brisbane, we will set @sycamore to its complementary:
@brisbane:  #8f44c1;
@sycamore:  spin(@brisbane,180);
@nzxmas:    #555;


Analogous Colors

Analogous colors are directly adjacent to the base color. Typically, at 30 degree intervals on either side.
Below, @sycamore and @nzxmas are analogous to the base, @brisbane.
@brisbane:  #8f44c1;
@sycamore:  spin(@brisbane,30);
@nzxmas:    spin(@brisbane,-30);


Triadic

Triadic colors are three, equidistant colors.
@brisbane:  #8f44c1;
@sycamore: 	spin(@brisbane,(360/3));
@nzxmas:    spin(@brisbane,(-360/3));


Split Complementary

Split complementary colors use two adjacent colors from the base complementary.
@brisbane: 	#8f44c1;
@sycamore: 	spin(@brisbane,(180+30));
@nzxmas: 	spin(@brisbane,(180-30));


Highlight three neighborhoods

@castro: #38A6A5;
@noe: #0F8554;
@twin: #73AF48;

#layer {
  polygon-fill: ramp([neighborho], (@castro,@twin,@noe, #ddd), ("Castro/Upper Market", "Twin Peaks", "Noe Valley"), "=");

  line-width: 1;
  line-color: #FFFFFF;
  line-opacity: 0.5;
}

Complementary Colors

Colors that are opposite each other on the color wheel are considered to be complementary colors
First, let's symbolize two neighborhoods with complementary colors:
@castro: #38A6A5;
@noe: spin(@castro, 180);
/*@twin: #73AF48;*/

#layer {
  polygon-fill: ramp([neighborho], (@castro,@noe, #ddd), ("Castro/Upper Market","Noe Valley"), "=");

  line-width: 1;
  line-color: #FFFFFF;
  line-opacity: 0.5;
}

@brisbane: #7a38a6;
@sycamore: spin(@magnolia,180);

#layer {
  marker-width: 5;
  marker-fill: ramp([common_species], (@magnolia,@victorian,transparent), (" Brisbane Box", " Sycamore"), "=");
  marker-fill-opacity: 1;
  marker-allow-overlap: true;
  marker-line-width: 0;
  marker-line-color: #FFFFFF;
  marker-line-opacity: 1;
}

Analogous

Analogous color schemes use colors that are next to each other on the color wheel.
@castro: #38A6A5;
@noe: spin(@castro,30);
@twin: spin(@castro,-30);

#layer {
  polygon-fill: ramp([neighborho], (@castro,@twin,@noe, #ddd), ("Castro/Upper Market", "Twin Peaks", "Noe Valley"), "=");

  line-width: 1;
  line-color: #FFFFFF;
  line-opacity: 0.5;
}

@brisbane: #9644cc;
@sycamore: spin(@brisbane,30);
@nzxmas: spin(@brisbane,-30);

#layer {
  marker-width: 5;
  marker-fill: ramp([common_species], (@brisbane,@sycamore,@nzxmas,transparent), (" Brisbane Box", " Sycamore", " New Zealand Xmas Tree"), "=");
  marker-fill-opacity: 1;
  marker-allow-overlap: true;
  marker-line-width: 0;
  marker-line-color: #FFFFFF;
  marker-line-opacity: 1;
}

Triadic

@brisbane: 	#8f44c1;
@sycamore: 	spin(@brisbane,(180+30));
@nzxmas: 	spin(@brisbane,(180-30));


@brisbane: #9644cc;
@sycamore: spin(@brisbane,(360/3));
@nzxmas: spin(@brisbane,(-360/3));

#layer {
  marker-width: 5;
  marker-fill: ramp([common_species], (@brisbane,@sycamore,@nzxmas,transparent), (" Brisbane Box", " Sycamore", " New Zealand Xmas Tree"), "=");
  marker-fill-opacity: 1;
  marker-allow-overlap: true;
  marker-line-width: 0;
  marker-line-color: #FFFFFF;
  marker-line-opacity: 1;
}

Split Complementary

@brisbane: #44c3cc;
@sycamore: spin(@brisbane,(180+30));
@nzxmas: spin(@brisbane,(180-30));

#layer {
  marker-width: 7;
  marker-fill: ramp([common_species], (@brisbane,@sycamore,@nzxmas,transparent), (" Brisbane Box", " Sycamore", " New Zealand Xmas Tree"), "=");
  marker-fill-opacity: 1;
  marker-allow-overlap: true;
  marker-line-width: 1;
  marker-line-color: #000000;
  marker-line-opacity: 1;
}

Shade

@castro: #38A6A5;
@noe: lighten(@castro,20);
@twin: lighten(@castro,40);

#layer {
  polygon-fill: ramp([neighborho], (@castro,@twin,@noe, #ddd), ("Castro/Upper Market", "Twin Peaks", "Noe Valley"), "=");

  line-width: 1;
  line-color: #FFFFFF;
  line-opacity: 0.5;
}

Tone

@castro: #38A6A5;
@noe: darken(@castro,10);
@twin: darken(@castro,20);
#layer {
polygon-fill: ramp([neighborho], (@castro,@twin,@noe, #ddd), ("Castro/Upper Market", "Twin Peaks", "Noe Valley"), "=");
line-width: 1;
line-color: #FFFFFF;
line-opacity: 0.5;
}
Lighter Colors

@castro: #45c0bf;
@noe: lighten(@castro, 20); 
@twin: lighten(@castro, 40);

#layer {
  polygon-fill: ramp([neighborho], (@castro,@twin,@noe, #ddd), ("Castro/Upper Market", "Twin Peaks", "Noe Valley"), "=");

  line-width: 1;
  line-color: #FFFFFF;
  line-opacity: 0.5;
}

Darker Colors

@castro: #45c0bf;
@noe: darken(@castro, 15); 
@twin: darken(@castro, 30);

#layer {
  polygon-fill: ramp([neighborho], (@castro,@twin,@noe, #ddd), ("Castro/Upper Market", "Twin Peaks", "Noe Valley"), "=");

  line-width: 1;
  line-color: #FFFFFF;
  line-opacity: 0.5;
}