Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar
Last active December 15, 2016 11:24
Show Gist options
  • Save ramiroaznar/ec736a5db4a16b436290b25a2ec3c34b to your computer and use it in GitHub Desktop.
Save ramiroaznar/ec736a5db4a16b436290b25a2ec3c34b to your computer and use it in GitHub Desktop.
CARTO Viewer Workshop

TURBO VIEWER WORKSHOP


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

Bubbles

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

bubbles


Categories

  • Apply the following SQL query:
SELECT * FROM continents
  • 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

  • Apply the following SQL query:
SELECT * FROM world_borders
  • 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


Color Brewer

  • Apply the following SQL query:
SELECT * FROM nyc_census_blocks
  • 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


Bivariate
  • Apply the following SQL query:
SELECT * FROM railroad_data
  • 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

Buildings
  • Enter this URL http://builder-demo.carto.com/api/v1/map as "Maps API endpoint".
  • Apply the following SQL query:
SELECT 
  * 
FROM 
  bcn_buildings 
WHERE 
  sobre_rasa > 0
ORDER BY 
  ST_YMax(the_geom) DESC
  • Apply the following CartoCSS style (CTR + S):
#layer {
  line-width: 0.25;
  line-color: #FFF;
  line-opacity: 0.5;
  building-fill: ramp([sobre_rasa], (#ffffcc, #c7e9b4, #7fcdbb, #41b6c4, #1d91c0, #225ea8, #0c2c84), jenks);
  building-fill-opacity: 1;
  building-height: [sobre_rasa]*2;
}

buildings


Opacity
  • Apply the following SQL query:
SELECT * FROM world_borders
  • Apply the following CartoCSS style (CTR + S):
@locationred: #F24440;

#layer {
 polygon-fill: @locationred;
  polygon-opacity: ramp([pop_norm], 0.2, 1), quantiles);
  line-width: 0.4;
  line-color: lighten(@locationred, 20);
  line-opacity: 0.25;
}

opacity

Lines
  • Apply the following SQL query:
SELECT * FROM county_commuter_flow
  • Apply the following CartoCSS style (CTR + S):
#layer {
  line-width: ramp([workers_in_flow], range(1, 3.5), quantiles(5));
  line-color: ramp([workers_in_flow], (#f6d2a9, #f3aa84, #ea8171, #d55d6a, #b13f64), quantiles);
  line-comp-op: darken;
}

lines

Cartocolors
  • Apply the following SQL query:
SELECT * FROM ne_50m_admin_0_countries
  • Apply the following CartoCSS style (CTR + S):
#layer {
    polygon-opacity: 0.5;
    polygon-fill: ramp([mapcolor7], cartocolor(Bold), category(7));
    line-width: 2;
    line-color: ramp([mapcolor7], cartocolor(Bold), category(7));
    line-opacity: 0.4;
    line-offset: -1;
}

cartocolors


RESOURCES


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