NYC Data Science Academy Workshop <07.12.2017>

Grab this page here: http://bit.ly/carto-nydsa

Me, Map Scientist at Carto

Mehak Sachdeva, mailto:[email protected], @MehakSachdeva_

Intro

Using CARTO you can:

easily overlay data onto a map
analyze the data to reveal spatial patterns
tell stories by creating beautiful visualizations
and then share them with the world!

CARTO combines

SQL and PostGIS
map styling with CartoCSS
JavaScript for overlay and interactivity
A tileserver turning all that data and styles to TILES

Add it up and you roughly get CARTO.

Diagram of CARTO's architecture

Open source

Look at our code! Find the errors bugging you, improve it, be a part of a community.

http://github.com/CartoDB/cartodb

Intro to Builder

Welcome to Carto Builder - let's make a map!

This is map I recently demo-ed in the CartoCamp meetup last month.

The problem statement: Randomly select a citibike and follow it through a random day! (Involved, CARTO, SQL, Google Maps API in Python) Check out the complete workshop here!

Final map:

Start with the datasets here:

Citibike Routing data: http://mehak-carto.carto.com/api/v2/sql?q=select%20*%20from%20citibike_routing&format=csv&filename=citibike_routing

Citibike Stations: http://mehak-carto.carto.com/api/v2/sql?q=select%20*%20from%20citibike_stations&format=csv&filename=citibike_stations

Upload these datasets and use them to create a map
On the citibike_routing layer perform the Connect with Lines analysis:

Pull out the source from the analysis as a separate layer:

Style the point layer using Animated styling and categorical variables:

Style the routing lines with categorical variables too:

The final CartoCSS for the line layer looks like this:

#layer {
  line-width: 1.5;
  [category = 1]{line-color:#5F4690; }
  [category = 2]{line-color:#1D6996; }
  [category = 3]{line-color:#38A6A5; }
  [category = 4]{line-color:#0F8554; }
  [category = 5]{line-color:#73AF48; }
  [category = 6]{line-color:#EDAD08; }
  [category = 7]{line-color:#E17C05; }
  [category = 8]{line-color:#CC503E; }
  [category = 9]{line-color:#94346E; }
  [category = 10]{line-color:#6F4070; }
  [category = 11]{line-color:#666666; }
  [category = 12]{line-color:#5effd4; }
  [category = 13]{line-color:#ff3535; }
}

Styling for the stations:

Tweaking the CartoCSS to enhance styling:

The final CartoCSS for the torque layer looks like this:

Map {
  -torque-frame-count: 256;
  -torque-animation-duration: 30;
  -torque-time-attribute: "duration";
  -torque-aggregation-function: "CDB_Math_Mode(trip_id)";
  -torque-resolution: 2;
  -torque-data-aggregation: linear;
}
#layer {
  marker-width: 4;
  marker-fill: ramp([value], (#5F4690, #1D6996, #38A6A5, #0F8554, #73AF48, #EDAD08, #E17C05, #CC503E, #94346E, #6F4070, #666666), (1, 2, 3, 4, 5, 6, 7, 8, 9, 10), "=");
  marker-fill-opacity: 1;
  marker-line-width: 0;
  marker-line-color: #FFF;
  marker-line-opacity: 1;
  comp-op: lighter;
}
#layer[frame-offset=1] {
  marker-width: 6;
  marker-fill-opacity: 0.5;
}

Notice the CDB_Math_Mode function which creates predictable values for styling.