TURBO CARTO - The good, the handsome and the turbo.

readme.md

The good, the handsome and the turbo.

• Author: @ramiroaznar
• Link: http://bit.ly/turbo-carto-geocamp
• Slides: http://bit.ly/turbo-carto-talk

INDEX

• CARTOCSS vs. TURBO CARTO
• CARTO COLORS
• BUILDER LAYER STYLE

CARTOCSS vs. TURBO CARTO

1. Open the CARTO basic viewer.
2. Enter this URL http://ramirocartodb.cartodb.com/api/v1/map as "Maps API endpoint".
3. Leave empty the "API key".

Point symbols

4. Apply the following SQL query:

SELECT * FROM populated_places

5. Apply the following CartoCSS style (CTR + S):

#layer {
  marker-width: ramp([pop_max], range(1, 10), quantiles(3));
  marker-fill: #af5cda;
  marker-fill-opacity: 0.5;
  marker-allow-overlap: true;
  marker-line-width: 0.2;
  marker-line-color: #FFF;
  marker-line-opacity: 1;
}

Category

6. Apply the following SQL query:

SELECT * FROM continents

7. Apply the following CartoCSS style (CTR + S):

#layer {
  polygon-fill: ramp([name], (#5B3F95, #1D6996, #129C63, #73AF48, #EDAD08, #E17C05), category(6));
  polygon-opacity: 0.7;
  line-width: 0.2;
  line-color: #FFF;
  line-opacity: 0.5;
}

Choropleth

8. Apply the following SQL query:

SELECT * FROM world_borders

9. Apply the following CartoCSS style (CTR + S):

#layer {
  polygon-fill: ramp([pop_norm], (#fcde9c, #f58670, #e34f6f, #d72d7c, #7c1d6f), quantiles);
  polygon-opacity: 0.7;
  line-width: 1;
  line-color: #FFF;
  line-opacity: 0.5;
}

Bivariate styling

10. Apply the following SQL query:

SELECT * FROM railroad_data

11. Apply the following CartoCSS style (CTR + S):

#layer {
  marker-width: ramp([total_damage], range(1, 20), quantiles(5));
  marker-fill: ramp([railroad], (#5B3F95, #1D6996, #129C63, #73AF48, #EDAD08, #E17C05, #C94034, #BA0040, #8E1966, #6F3072, #CDD2D4), category(10));
  marker-opacity: 0.5;
  marker-fill-opacity: 1;
  marker-allow-overlap: true;
  marker-line-width: 1;
  marker-line-color: #FFF;
  marker-line-opacity: 0.4;
}

CARTO COLORS

Cindy Brewer

11. Apply the following SQL query:

SELECT * FROM nyc_census_blocks

12. Apply the following CartoCSS style (CTR + S):

#layer { 
  line-width: 1; 
  line-color: #FFF; 
  line-opacity: 0.5; 
  polygon-fill: ramp([shape_area], colorbrewer(YlGn), quantiles(5)); 
  polygon-opacity: 0.7;
}

BUILDER LAYER STYLE

None

• Marker/line width

• Point/line/polygon color

• Stroke width & color
• Blending
• CartoCSS

Aggregations (points)

• Square/hexbins
• Adm. Regions
• Animated (Torque!)
• Pixel (Heatmap!)

Widget autostyling

• Categories
• Histogram

RESOURCES

• Turbo Carto repository
• CARTO basic viewer block
• Introduction to Map Design
• Styling with Turbo Carto
• CARTO color scale app

thumbnail.png