Create a gist now

Instantly share code, notes, and snippets.

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

turbocarto

The good, the handsome and the turbo.

INDEX

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

  1. Apply the following SQL query:
SELECT * FROM populated_places
  1. 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;
}

points-symbols

Category

  1. Apply the following SQL query:
SELECT * FROM continents
  1. 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;
}

categories

Choropleth

  1. Apply the following SQL query:
SELECT * FROM world_borders
  1. 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;
}

choropleth

Bivariate styling

  1. Apply the following SQL query:
SELECT * FROM railroad_data
  1. 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;
}

bivariate


CARTO COLORS

Cindy Brewer

  1. Apply the following SQL query:
SELECT * FROM nyc_census_blocks
  1. 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;
}

brewer


BUILDER LAYER STYLE

None

  • Marker/line width

builder-dots

  • Point/line/polygon color

builder-cat

builder-cho

  • Stroke width & color
  • Blending
  • CartoCSS

Aggregations (points)

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

Widget autostyling

  • Categories
  • Histogram

RESOURCES


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment