Example Maps

Awesome examples go here!

• Value by Alpha
• Multi-Scale Marker Width

Value by Alpha

• uses polygon-opacity to ramp transparency from a starting color

TurboCarto

#demographics_sf [white_pop != null] {

  ::asian {
  
    polygon-fill: mediumvioletred;
    polygon-opacity: ramp([asian_pop],0,0.9,(0.1,.34,.67,.90),>=);
  
  }
  
  ::hispanic {
    polygon-fill: teal;
	polygon-opacity: ramp([hispanic_pop],0,0.9,(0.1,.34,.67,.90),>=);
  
  }
  
  ::black {
    polygon-fill: darkorange;
 	polygon-opacity: ramp([black_pop],0,0.9,(0.1,.34,.67,.90),>=);
  }
  
  ::white {
    polygon-fill: #000;
    polygon-opacity: ramp([white_pop],0,0.9,(0.1,.34,.67,.90),>=);
    
    line-color: #fff;
    line-width: 0.25;
    line-opacity: 0.25;
    polygon-gamma: 0.5;
    line-comp-op: soft-light;
  }
    
}

Multi-Scale marker-width

https://team.carto.com/u/mamataakella/builder/84984356-502f-11e6-9205-0ecd1babdde5/embed

TurboCarto

#layer {
  marker-width: ramp([dn], 5, 8, quantiles,7);
  marker-fill:#777f7f;
  marker-fill-opacity: 0.8;
  marker-allow-overlap: true;
  marker-line-width: 0;
  marker-line-color: #fff;
  marker-line-opacity: 1;
  
  
  [zoom<=2]{marker-width: 2.5;}
  
  [zoom=3]{
    marker-width: ramp([dn], 2, 4, quantiles,7);
  }
  
  [zoom>=6]{
   marker-width: ramp([dn], 10, 16,quantiles,7);
  }
}