makella · December 6, 2019 07:51 · Mar 16, 2018 · Mar 16, 2018 · Mar 16, 2018 · Mar 16, 2018
diff --git a/readme.md b/readme.md
@@ -9,6 +9,7 @@ Another option to get started, that we outline here, is using the [CartoCSS colo
 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](https://en.wikipedia.org/wiki/Harmony_(color)): 
 
 ![complementary](https://user-images.githubusercontent.com/1566273/37525139-94c46934-28f1-11e8-9286-c97ff878bf68.png)
+
 *Common color harmonies [source](https://htmlcolorcodes.com/color-picker/)* 
 
 # Overview

diff --git a/readme.md b/readme.md
@@ -9,6 +9,7 @@ Another option to get started, that we outline here, is using the [CartoCSS colo
 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](https://en.wikipedia.org/wiki/Harmony_(color)): 
 
 ![complementary](https://user-images.githubusercontent.com/1566273/37525139-94c46934-28f1-11e8-9286-c97ff878bf68.png)
+*Common color harmonies [source](https://htmlcolorcodes.com/color-picker/)* 
 
 # Overview
 

diff --git a/readme.md b/readme.md
@@ -78,7 +78,7 @@ marker-line-color: #000
 
 # Generate color harmonies
 
-As mentioned above, each color harmony are combinations of two or more colors with a fixed place on the color wheel. Knowing the degrees needed to rotate for each combination, we can modify easily modify the styling for each variable which in turn will update our map.
+As mentioned above, each color harmony are combinations of two or more colors with a fixed place on the color wheel. Knowing the degrees needed to rotate for each combination, we can easily modify the styling for each variable which in turn will update our map.
 
 ## Complementary colors
 

diff --git a/readme.md b/readme.md
@@ -113,7 +113,7 @@ Triadic colors are three, equidistant colors. To get triadic colors from our bas
 
 ```
 @brisbane:  #8f44c1;
-@sycamore: 	spin(@brisbane,(360/3));
+@sycamore:  spin(@brisbane,(360/3));
 @nzxmas:    spin(@brisbane,(-360/3));
 ```
 <img width="1191" alt="screen shot 2018-03-16 at 7 42 22 am" src="https://user-images.githubusercontent.com/1566273/37523811-ade251c8-28ed-11e8-984e-4fc91bf65ce2.png">

diff --git a/readme.md b/readme.md
@@ -54,7 +54,7 @@ First,
 
 Next, we'll set up variables that define the styling for each tree type and replace the default category colors in the [TurboCARTO ramp](https://carto.com/blog/styling-with-turbo-carto/) with the variable names.
 
-Our base color (`#8f44c1`) will be defined in `@brisbane` and `@sycamore` and `@nzxmas` we'll start with a neutral gray (`#555`).
+Our base color (`#8f44c1`) will be defined in `@brisbane`. `@sycamore` and `@nzxmas` we'll start with a neutral gray (`#555`).
 
 + at the top of the stylesheet, add each variable
 ```

diff --git a/readme.md b/readme.md
@@ -74,11 +74,6 @@ marker-width: 6;
 marker-line-color: #000
 ```
 
-```
-@brisbane: #8f44c1;
-@sycamore: #555;
-@nzxmas:   #555;
-
 <img width="1192" alt="screen shot 2018-03-16 at 7 40 15 am" src="https://user-images.githubusercontent.com/1566273/37523690-53aacc6c-28ed-11e8-8284-859210e125b9.png">
 
 # Generate color harmonies

diff --git a/readme.md b/readme.md
@@ -65,7 +65,7 @@ Our base color (`#8f44c1`) will be defined in `@brisbane` and `@sycamore` and `@
 
 + subsititute the colors with our variable names in the TurboCARTO for `marker-fill`:
 ```
-`marker-fill: ramp([common_species], (@brisbane, @sycamore, @nzxmas), ("Brisbane Box", "Sycamore", "New Zealand Xmas Tree"), "=");
+marker-fill: ramp([common_species], (@brisbane, @sycamore, @nzxmas), ("Brisbane Box", "Sycamore", "New Zealand Xmas Tree"), "=");
 ```
 
 + adjust width and line color
@@ -79,16 +79,6 @@ marker-line-color: #000
 @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;
-}
-```
 <img width="1192" alt="screen shot 2018-03-16 at 7 40 15 am" src="https://user-images.githubusercontent.com/1566273/37523690-53aacc6c-28ed-11e8-8284-859210e125b9.png">
 
 # Generate color harmonies

diff --git a/readme.md b/readme.md
@@ -31,15 +31,15 @@ Our species of interest are `Brisbane Box`, `Sycamore`, and `New Zealand Xmas Tr
 # Steps
 
 ## Setup
-+ [Symbolize trees]
-+ [Define variables]
++ [Symbolize trees](https://gist.github.com/makella/b6a88efd56b7e61446a74e9c9441211b#symbolize-trees-and-switch-to-cartocss-view)
++ [Set-up variables](https://gist.github.com/makella/b6a88efd56b7e61446a74e9c9441211b#set-up-variables)
 
 ## Generate color harmonies
-+ [Complementary]
-+ [Analogous]
-+ [Triadic]
-+ [Split complementary]
-+ [Change colors!]
++ [Complementary](https://gist.github.com/makella/b6a88efd56b7e61446a74e9c9441211b#complementary-colors)
++ [Analogous](https://gist.github.com/makella/b6a88efd56b7e61446a74e9c9441211b#analogous-colors)
++ [Triadic](https://gist.github.com/makella/b6a88efd56b7e61446a74e9c9441211b#triadic)
++ [Split complementary](https://gist.github.com/makella/b6a88efd56b7e61446a74e9c9441211b#triadic)
++ [Change colors!](https://gist.github.com/makella/b6a88efd56b7e61446a74e9c9441211b#triadic)
 
 ## Symbolize trees and switch to CartoCSS view
 

diff --git a/readme.md b/readme.md
@@ -39,6 +39,7 @@ Our species of interest are `Brisbane Box`, `Sycamore`, and `New Zealand Xmas Tr
 + [Analogous]
 + [Triadic]
 + [Split complementary]
++ [Change colors!]
 
 ## Symbolize trees and switch to CartoCSS view
 
@@ -74,9 +75,9 @@ marker-line-color: #000
 ```
 
 ```
-@brisbane: 	#8f44c1;
-@sycamore: 	#555;
-@nzxmas:    #555;
+@brisbane: #8f44c1;
+@sycamore: #555;
+@nzxmas:   #555;
 
 #layer {
   marker-width: 6;
@@ -96,7 +97,7 @@ As mentioned above, each color harmony are combinations of two or more colors wi
 
 ## Complementary colors
 
-Complementary colors are opposite from each other on the color wheel (180 degrees). 
+Complementary colors are opposite from each other on the color wheel (180 degrees apart). 
 
 Using our base `@brisbane`, we will set `@sycamore` to its complementary:
 
@@ -123,7 +124,7 @@ Below, `@sycamore` and `@nzxmas` are analogous to the base, `@brisbane`.
 
 ## Triadic
 
-Triadic colors are three, equidistant colors.
+Triadic colors are three, equidistant colors. To get triadic colors from our base, we can divide the color wheel into 3 equal parts.
 
 ```
 @brisbane:  #8f44c1;
@@ -134,7 +135,7 @@ Triadic colors are three, equidistant colors.
 
 ## Split Complementary
 
-Split complementary colors use two adjacent colors from the base complementary.
+Split complementary colors use two adjacent colors from the base complementary. We first find the complementary and then find the two adjacent colors that are 30 degrees on either side.
 
 ```
 @brisbane: 	#8f44c1;

diff --git a/readme.md b/readme.md
@@ -57,14 +57,21 @@ Our base color (`#8f44c1`) will be defined in `@brisbane` and `@sycamore` and `@
 
 + at the top of the stylesheet, add each variable
 ```
-  + @brisbane: #8f44c1;
-  + @sycamore: #555;
-  + @nzxmas:   #555;
+@brisbane: #8f44c1;
+@sycamore: #555;
+@nzxmas:   #555;
 ```
 
 + subsititute the colors with our variable names in the TurboCARTO for `marker-fill`:
-  + `marker-fill: ramp([common_species], (@brisbane, @sycamore, @nzxmas), ("Brisbane Box", "Sycamore", "New Zealand Xmas Tree"), "=");`
-+ set the `marker-width` to `6` and the `marker-line-color` to black
+```
+`marker-fill: ramp([common_species], (@brisbane, @sycamore, @nzxmas), ("Brisbane Box", "Sycamore", "New Zealand Xmas Tree"), "=");
+```
+
++ adjust width and line color
+```
+marker-width: 6; 
+marker-line-color: #000
+```
 
 ```
 @brisbane: 	#8f44c1;
@@ -85,6 +92,8 @@ Our base color (`#8f44c1`) will be defined in `@brisbane` and `@sycamore` and `@
 
 # Generate color harmonies
 
+As mentioned above, each color harmony are combinations of two or more colors with a fixed place on the color wheel. Knowing the degrees needed to rotate for each combination, we can modify easily modify the styling for each variable which in turn will update our map.
+
 ## Complementary colors
 
 Complementary colors are opposite from each other on the color wheel (180 degrees). 
@@ -132,4 +141,10 @@ Split complementary colors use two adjacent colors from the base complementary.
 @sycamore: 	spin(@brisbane,(180+30));
 @nzxmas: 	spin(@brisbane,(180-30));
 ```
-<img width="1191" alt="screen shot 2018-03-16 at 8 13 43 am" src="https://user-images.githubusercontent.com/1566273/37525277-0068fc68-28f2-11e8-9089-601617cf4f88.png">
+<img width="1191" alt="screen shot 2018-03-16 at 8 13 43 am" src="https://user-images.githubusercontent.com/1566273/37525277-0068fc68-28f2-11e8-9089-601617cf4f88.png">
+
+## Change colors!
+
+If you want to experiment with the harmonies with a different base color, simply change the color of your base variable:
+
+![change-base](https://user-images.githubusercontent.com/1566273/37526789-e8f54b64-28f5-11e8-958c-2daaf8ef7977.gif)
diff --git a/readme.md b/readme.md
@@ -56,9 +56,12 @@ Next, we'll set up variables that define the styling for each tree type and repl
 Our base color (`#8f44c1`) will be defined in `@brisbane` and `@sycamore` and `@nzxmas` we'll start with a neutral gray (`#555`).
 
 + at the top of the stylesheet, add each variable
-  + `@brisbane: #8f44c1;`
-  + `@sycamore: #555;`
-  + `@nzxmas:   #555`
+```
+  + @brisbane: #8f44c1;
+  + @sycamore: #555;
+  + @nzxmas:   #555;
+```
+
 + subsititute the colors with our variable names in the TurboCARTO for `marker-fill`:
   + `marker-fill: ramp([common_species], (@brisbane, @sycamore, @nzxmas), ("Brisbane Box", "Sycamore", "New Zealand Xmas Tree"), "=");`
 + set the `marker-width` to `6` and the `marker-line-color` to black

diff --git a/readme.md b/readme.md
@@ -53,19 +53,20 @@ First,
 
 Next, we'll set up variables that define the styling for each tree type and replace the default category colors in the [TurboCARTO ramp](https://carto.com/blog/styling-with-turbo-carto/) with the variable names.
 
+Our base color (`#8f44c1`) will be defined in `@brisbane` and `@sycamore` and `@nzxmas` we'll start with a neutral gray (`#555`).
+
 + at the top of the stylesheet, add each variable
- + `@brisbane:`
- + `@sycamore:`
- + `@nzxmas:`
-+ our base color (`#8f44c1`) will be defined in `@brisbane` and `@sycamore` and `@nzxmas` we'll start with a neutral gray (`#555`)
+  + `@brisbane: #8f44c1;`
+  + `@sycamore: #555;`
+  + `@nzxmas:   #555`
 + subsititute the colors with our variable names in the TurboCARTO for `marker-fill`:
   + `marker-fill: ramp([common_species], (@brisbane, @sycamore, @nzxmas), ("Brisbane Box", "Sycamore", "New Zealand Xmas Tree"), "=");`
 + set the `marker-width` to `6` and the `marker-line-color` to black
 
 ```
 @brisbane: 	#8f44c1;
 @sycamore: 	#555;
-@nzxmas: 	  #555;
+@nzxmas:    #555;
 
 #layer {
   marker-width: 6;

diff --git a/readme.md b/readme.md
@@ -53,8 +53,13 @@ First,
 
 Next, we'll set up variables that define the styling for each tree type and replace the default category colors in the [TurboCARTO ramp](https://carto.com/blog/styling-with-turbo-carto/) with the variable names.
 
-+ define the base color (`#8f44c1`) in the variable `@brisbane` 
-+ and set `@sycamore` and `@nzxmas` to a neutral gray (`#555`)
++ at the top of the stylesheet, add each variable
+ + `@brisbane:`
+ + `@sycamore:`
+ + `@nzxmas:`
++ our base color (`#8f44c1`) will be defined in `@brisbane` and `@sycamore` and `@nzxmas` we'll start with a neutral gray (`#555`)
++ subsititute the colors with our variable names in the TurboCARTO for `marker-fill`:
+  + `marker-fill: ramp([common_species], (@brisbane, @sycamore, @nzxmas), ("Brisbane Box", "Sycamore", "New Zealand Xmas Tree"), "=");`
 + set the `marker-width` to `6` and the `marker-line-color` to black
 
 ```

diff --git a/readme.md b/readme.md
@@ -0,0 +1,126 @@
+# Spin the color wheel!
+
+Inside of CARTO Builder we offer a set of default color schemes, [CARTOColors](www.carto.com/carto-colors), 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](https://lisacharlotterost.github.io/2016/04/22/Colors-for-DataVis/) 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](https://carto.com/docs/carto-engine/cartocss/properties/#color) `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](https://en.wikipedia.org/wiki/Harmony_(color)): 
+
+![complementary](https://user-images.githubusercontent.com/1566273/37525139-94c46934-28f1-11e8-9286-c97ff878bf68.png)
+
+# 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](https://data.sfgov.org/City-Infrastructure/Street-Tree-Map/337t-q2b4). 
+
+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
+
+![color-category](https://user-images.githubusercontent.com/1566273/37501074-41960d9e-2892-11e8-8283-6f32bff9840d.gif)
+
+## 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](https://carto.com/blog/styling-with-turbo-carto/) 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;
+}
+```
+<img width="1192" alt="screen shot 2018-03-16 at 7 40 15 am" src="https://user-images.githubusercontent.com/1566273/37523690-53aacc6c-28ed-11e8-8284-859210e125b9.png">
+
+# 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;
+```
+<img width="1191" alt="screen shot 2018-03-16 at 7 39 46 am" src="https://user-images.githubusercontent.com/1566273/37523724-6825da1a-28ed-11e8-84ab-2e9ba2298226.png">
+
+
+## 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);
+```
+<img width="1187" alt="screen shot 2018-03-16 at 7 36 21 am" src="https://user-images.githubusercontent.com/1566273/37523511-cb0b618c-28ec-11e8-9214-228c00108de9.png">
+
+## Triadic
+
+Triadic colors are three, equidistant colors.
+
+```
+@brisbane:  #8f44c1;
+@sycamore: 	spin(@brisbane,(360/3));
+@nzxmas:    spin(@brisbane,(-360/3));
+```
+<img width="1191" alt="screen shot 2018-03-16 at 7 42 22 am" src="https://user-images.githubusercontent.com/1566273/37523811-ade251c8-28ed-11e8-984e-4fc91bf65ce2.png">
+
+## 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));
+```
+<img width="1191" alt="screen shot 2018-03-16 at 8 13 43 am" src="https://user-images.githubusercontent.com/1566273/37525277-0068fc68-28f2-11e8-9089-601617cf4f88.png">
No results found