CARTO Viewer Workshop

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

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

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