CartoCSS for maps - Githubissues

@andrewxhill @stuartlynn @ohasselblad

here is the cartocss and associated layers for each of your maps in the L train blog.

All four maps below use the same basemap. The styling for the basemap is as follows:

Map Background:

Set Basemap to custom
With #000000 as the color

Detailed Water:

To cut the land out, I'm using a detailed water dataset: https://team.cartodb.com/u/mamataakella/tables/detailed_water
Since we are rotating the map, add the following SQL to the layer:

SELECT 
the_geom,cartodb_id, 
st_rotate(the_geom_webmercator,0.50459214, 
st_transform(cdb_latlng(40.658439, -73.963394),3857)) the_geom_webmercator 
FROM mamataakella.detailed_water

CartoCSS for water:

#detailed_water{
  polygon-fill: darken(gray,38);
}

Stuart

Walking and Subway

Layer 1: Subway Lines and Labels https://team.cartodb.com/u/mamataakella/tables/nyc_subway

SQL
SELECT the_geom, route_id, cartodb_id, st_rotate(the_geom_webmercator,0.50459214, st_transform(cdb_latlng(40.658439, -73.963394),3857)) the_geom_webmercator FROM mamataakella.nyc_subway
CartoCSS

#nyc_subway {

    line-width: 1.5;
    line-color: transparent;
    [zoom>=14]{line-width: 2;}

    [route_id='M'] {
     line-color: #FF6319;
    }
    [route_id='G' ]{
     line-color: #6CBE45;
    }
    [route_id='J'] {
     line-color: #996633;
         line-offset: -4;
    }
    [route_id='L'] {
     line-color: #A7A9AC;
    }
}

#nyc_subway::labels[zoom>=12] {
  [route_id='M'],
  [route_id='G'],
  [route_id='J'],
  [route_id='L'] { 
    ::symbol {
       marker-width: 16;
       marker-fill: red;
       marker-line-width: 0;
       marker-line-color: white;
       [route_id='M']{marker-fill: #FF6319;}
       [route_id='G']{marker-fill: #6CBE45;}
       [route_id='J']{marker-fill: #996633;}
       [route_id='L']{marker-fill:#A7A9AC;}
   }
  text-name: [route_id];
  text-face-name: 'Open Sans Bold';
  text-size: 12;
  text-label-position-tolerance: 10;
  text-fill: #FFFFFF;
  text-halo-fill: #FFF;
  text-halo-radius: 0;
  text-allow-overlap: true;
  text-placement: point;
  text-placement-type: simple;
 }
}

Layer 2: Walking Lines

SQL (since we didn't know about those really high values I kept the data in the range excluding those)

SELECT 
the_geom, sum, cartodb_id, 
st_rotate(the_geom_webmercator,0.50459214, st_transform(cdb_latlng(40.658439, -73.963394),3857)) the_geom_webmercator 
FROM mamataakella.subway_walking_sum
WHERE (sum >= 0 AND sum < 4580.881214744863)

CartoCSS

#subway_walking_sum{

  line-color: #d33c98;
  line-width: 1;
  line-opacity: 1;
  line-cap: square;
  line-join: round;

  [ sum <= 4209.65] {
    line-width:5;
    [zoom<=12]{line-width:3.5;}
    [zoom>=15]{line-width:7;}
  }
  [ sum <= 2394.21428571429] {
    line-width: 2.5;
    [zoom<=12]{line-width:2.0;}
    [zoom>=15]{line-width:5;} 
  }
  [ sum <= 1030.6] {
    line-width: 1.25;
    [zoom<=12]{line-width:1.0;}
    [zoom>=15]{line-width:2;} 
  }
  [ sum <= 322.845238095238] {
   line-width: 0.8;
   [zoom<=12]{line-width:0.5;}
   [zoom>=15]{line-width:1;}     
  }
[ sum <= 128.333333333333] {
    line-width: 0.4;
    [zoom<=12]{line-width:0.3;}
    [zoom>=15]{line-width:0.6;}
 }
}

Layer 3: Detailed Water

See information above
Andy:

Poverty Ratio Choropleth

Layer 1: Subway Stops https://team.cartodb.com/u/mamataakella/tables/subway_nycstations_copy

SELECT 
the_geom, route_lbl,name_prop,cartodb_id, 
st_rotate(the_geom_webmercator,0.50459214, st_transform(cdb_latlng(40.658439, -73.963394),3857)) the_geom_webmercator 
FROM mamataakella.subway_nycstations_copy

CartoCSS

#nycstations[route_lbl='L']{

  marker-fill-opacity: 0.9;
  marker-line-color: #FFF;
  marker-line-width: 1;
  marker-line-opacity: 1;
  marker-placement: point;
  marker-type: ellipse;
  marker-width: 4;
  marker-fill: #000000;
  marker-allow-overlap: true;    
}

Layer 2: L Subway Line https://team.cartodb.com/u/mamataakella/tables/nyc_subway

SELECT 
the_geom,route_id,cartodb_id, 
st_rotate(the_geom_webmercator,0.50459214, st_transform(cdb_latlng(40.658439, -73.963394),3857)) the_geom_webmercator 
FROM mamataakella.nyc_subway

CartoCSS

#nyc_subway [route_id='L'] {
    line-color: #A7A9AC;
        line-width: 3;
        line-opacity: 1;    
}

Layer 3: Detailed Water

See info above

Layer 4: Percent Poverty

SELECT 
the_geom,round(100*ratio_poverty) as ratio_poverty,cartodb_id, 
st_rotate(the_geom_webmercator,0.50459214, st_transform(cdb_latlng(40.658439, -73.963394),3857)) the_geom_webmercator 
FROM mamataakella.lodes_od_acs_bk_moran_2

CartoCSS

@1: #B29FD3;
@2: #8C8AB5;
@3: #697497;
@4: #4B5E79;
@5: #32495B;

#lodes_od_acs_bk_moran_2{
  polygon-fill: transparent;
  polygon-opacity: 1;
  line-color: transparent;
  line-width: 0.5;
  line-opacity: 1;
}

#lodes_od_acs_bk_moran_2 [ ratio_poverty <= 100] {
   polygon-fill: @1;
   line-color: @1;
}
#lodes_od_acs_bk_moran_2 [ ratio_poverty <= 54.9751243781095] {
   polygon-fill: @2;
   line-color: @2;
}
#lodes_od_acs_bk_moran_2 [ ratio_poverty <= 38.7568555758684] {
   polygon-fill: @3;
   line-color: @3;
}
#lodes_od_acs_bk_moran_2 [ ratio_poverty <= 24.9443207126949] {
   polygon-fill: @4;
   line-color: @4;
}
#lodes_od_acs_bk_moran_2 [ ratio_poverty <= 13.3501259445844] {
   polygon-fill: @5;
   line-color: @5;
}

Moran's i

Annotation

Font: Open Sans
Text-size: 12
Box: #000000, 0.1 opacity, P=5
Line: #FFFFFF, W=5
Layer 1: Subway Stops
https://team.cartodb.com/u/mamataakella/tables/subway_nycstations_copy
SQL

SELECT 
the_geom, route_lbl,name_prop,cartodb_id, 
st_rotate(the_geom_webmercator,0.50459214, st_transform(cdb_latlng(40.658439, -73.963394),3857)) the_geom_webmercator 
FROM mamataakella.subway_nycstations_copy

CartoCSS

#nycstations[route_lbl='L'][zoom>=12]{
  marker-fill-opacity: 0.9;
  marker-line-color: #FFF;
  marker-line-width: 1;
  marker-line-opacity: 1;
  marker-placement: point;
  marker-type: ellipse;
  marker-width: 6;
  marker-fill: #000000;
  marker-allow-overlap: true;
}

Layer 2: Subway Lines with L highlighted https://team.cartodb.com/u/mamataakella/tables/nyc_subway

SELECT 
the_geom,route_id,cartodb_id, 
st_rotate(the_geom_webmercator,0.50459214, st_transform(cdb_latlng(40.658439, -73.963394),3857)) the_geom_webmercator
FROM 
nyc_subway
where 
route_id in ('G','L','M','J','3','A')

CartoCSS

#nyc_subway{
        line-width: 1;
        line-opacity: 0.4;

    [route_id='A'],
    [route_id='C'],
    [route_id='E'] {
        line-color: #0039A6;
    }
    [route_id='B'],
    [route_id='D'],
    [route_id='F'],
    [route_id='M'] {
        line-color: #FF6319;
    }

    [route_id='G']{
        line-color: #6CBE45;
    }
    [route_id='J'],
    [route_id='Z'] {
        line-color: #996633;
    }

    [route_id='L']{
    line-color: #A7A9AC;
        line-width: 3;
        line-opacity: 1;
       [zoom<=11] {line-width:1;}
    }

    [route_id='N'],
    [route_id='Q'],
    [route_id='R'] {
        line-color: #FCCC0A;
    }

    [route_id='S'] {
        line-color: #808183;
    }

    [route_id='1'],
    [route_id='2'],
    [route_id='3'] {
        line-color: #EE352E;
    }
    [route_id='4'],
    [route_id='5'],
    [route_id='6'] {
        line-color: #00933C;
    }
    [route_id='7'] {
        line-color: #B933AD;
    }
}

Layer 3: Detailed Water

See above for details

Layer 4: Moran's i

SELECT 
    the_geom,
    cluster_poverty_per_capita,
    cartodb_id, 
st_rotate(the_geom_webmercator,0.50459214, 
st_transform(cdb_latlng(40.658439, -73.963394),3857)) As the_geom_webmercator 
FROM 
  mamataakella.lodes_od_acs_bk_moran_2
  WHERE 
  substr(geoid::text,1,5) = '36047' AND 
  significance_poverty_per_capita <= 0.01 AND 
  cluster_poverty_per_capita IN ('HH','LL')

CartoCSS

@HH: #AD2BAD;
@LL: #4DB6AC;

#layer[cluster_poverty_per_capita="HH"] {
   polygon-fill: @HH;
   line-color: darken(@HH,3);
   line-width: 1;
   [zoom<=9]{line-width: 0;}
}

#layer[cluster_poverty_per_capita="LL"] {
   polygon-fill: @LL;
   line-color: darken(@LL,3);
   line-width: 1;
   [zoom<=9]{line-width: 0;}
}

Andrew

Optimal Routes Map

Layer 1: L Subway Stops

data: https://team.cartodb.com/u/mamataakella/tables/subway_l_stops
SQL:

SELECT 
the_geom,cartodb_id, 
st_rotate(the_geom_webmercator,0.50459214, st_transform(cdb_latlng(40.658439, -73.963394),3857)) the_geom_webmercator 
FROM mamataakella.subway_l_stops

CartoCSS:

#subway_l_stops{
  marker-fill-opacity: 0.9;
  marker-line-color: #FFFFFF;
  marker-line-width: 1;
  marker-line-opacity: 1;
  marker-placement: point;
  marker-type: ellipse;
  marker-width: 3;
  marker-fill: #FFFFFF;
  marker-allow-overlap: true;

  [zoom>=13]{marker-width: 4;}
}

Layer 2: Detailed Water

See above for styling details

Layer 3: Bus/Walk Lines

SELECT 
the_geom, az_route, cartodb_id, 
st_rotate(the_geom_webmercator,0.50459214, st_transform(cdb_latlng(40.658439, -73.963394),3857)) the_geom_webmercator 
FROM mamataakella.subway_walk_lodes_bus

CartoCSS

#subway_walk_lodes_bus {
   line-width: 1;
   line-opacity: 0.4;
   line-comp-op:soft-light;
   [zoom>=14]{line-width: 2;}

   [az_route="A"] {
    line-color:  #74A0CD;
   }
   [az_route="M"] {
    line-color: #E59623;
   }
   [az_route="S"] {
    line-color: #995868;
   }
}

CartoDB / Canarsie

CartoCSS for maps #6

Stuart

Walking and Subway

Andy:

Poverty Ratio Choropleth

Moran's i

Andrew

Optimal Routes Map