ramiroaznar/readme.md

## readme.md

      
    Raw
  

              readme.md
            
          
    TURBO VIEWER WORKSHOP


Author: @ramiroaznar
Link: http://bit.ly/turboviewer-cartosummit
Slides

INDEX


CARTOCSS vs. TURBO CARTO

Bubbles
Categories
Choropleth
Color Brewer
Bivariate
Building
Opacity
Lines
Cartocolors


RESOURCES


CARTOCSS vs. TURBO CARTO


Open the CARTO basic viewer.
Enter this URL http://ramirocartodb.cartodb.com/api/v1/map as "Maps API endpoint".
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;
}


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;
}


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;
}


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;
}


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;
}


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;
}


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;
}


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;
}

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;
}


RESOURCES


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


## thumbnail.png

      
    Raw
  

              thumbnail.png