Welcome to Advanced GIS, Lecture 3

This is a web page that can be viewed as slides.

→ to move forward

← to go back

Advanced GIS

download this data: bit.ly/advgis-airbnb

rename the file airbnb.csv and upload it to your CartoDB account

#ne10murbanareas{
marker-width: 3;
...
[zoom >= 10] {
marker-width: 8;
}
[zoom >= 16] {
marker-width: 13;
}

#ne10murbanareas{
    marker-width: 3;
    ...
    [zoom >= 10] {
        marker-width: 8;
    }
    [zoom >= 16] {
        marker-width: 13;
    }

#ne10murbanareas{
    marker-width: 3;
    ...
    [zoom >= 10] {
        marker-width: 8;
    }
    [zoom >= 16] {
        marker-width: 13;
    }
}

Advanced CartoCSS

recap

more fun with CartoCSS

Combining conditions
Variables
Attributes as values

#airbnb {
    marker-width: 3;
    ...
    [zoom >= 10] {
        marker-width: 8;
    }
}

#airbnb {
    marker-width: 3;
    ...
    [zoom >= 10][zoom < 16] {
        marker-width: 8;
    }
}

#airbnb {
    marker-width: 3;
    ...
    [zoom >= 10][zoom < 16] {
        marker-width: 8;
    }
}

markers are 3 pixels wide. if the map is between zoom level 10 and 16, the markers are 8 pixels wide.

you can do the same thing with attributes

#airbnb {
    marker-width: 3;
    ...
    [price >= 50] {
        marker-width: 8;
    }
}

#airbnb {
    marker-width: 3;
    ...
    [price >= 50][price <= 100] {
        marker-width: 8;
    }
}

you can do this with multiple attributes

#airbnb {
    marker-width: 3;
    ...
    [price >= 50][neighbourhood = 'Bedford-Stuyvesant'] {
        marker-width: 8;
    }
}

combine conditions with , to set properties with either condition

#airbnb {
    marker-width: 3;
    ...
    [price >= 50],
    [neighbourhood = 'Bedford-Stuyvesant'] {
        marker-width: 8;
    }
}

shortcut for:

#airbnb {
    marker-width: 3;
    ...
    [price >= 50] {
        marker-width: 8;
    }
    [neighbourhood = 'Bedford-Stuyvesant'] {
        marker-width: 8;
    }
}

#airbnb {
    marker-width: 3;
    ...
    [price >= 50],
    [neighbourhood = 'Bedford-Stuyvesant'] {
        marker-width: 8;
    }
}

markers with price over 50 are larger

also markers in Bed-Stuy are larger

recap

conditional statements look like

[mag >= 5.5] {
    ...
}

restrict statements more by putting conditions next to each other

[price >= 50][price <= 100] {
    ...
}

both conditions must be true

include more features by separating conditions with ,

[price >= 50],
[zoom >= 10] {
    ...
}

either condition could be true

#airbnb {
    marker-width: 5;
    marker-fill: #ff307a;
    marker-allow-overlap: true;
    
    [zoom >= 4] {
        marker-width: 10;
    }
    [zoom >= 8] {
        marker-width: 15;
    }
    [zoom >= 12] {
        marker-width: 20;
    }
}

what if I want to change marker-width?

#airbnb {
    marker-width: 6;
    marker-fill: #ff307a;
    marker-allow-overlap: true;
    
    [zoom >= 4] {
        marker-width: 12;
    }
    [zoom >= 8] {
        marker-width: 18;
    }
    [zoom >= 12] {
        marker-width: 24;
    }
}

there's a better way!

variables

@width: 6;
#airbnb {
    marker-width: @width;
    marker-fill: #ff307a;
    marker-allow-overlap: true;
    
    [zoom >= 4] {
        marker-width: 12;
    }
    [zoom >= 8] {
        marker-width: 18;
    }
    [zoom >= 12] {
        marker-width: 24;
    }
}

@width: 6;
#airbnb {
    marker-width: @width;
    marker-fill: #ff307a;
    marker-allow-overlap: true;
    
    [zoom >= 4] {
        marker-width: @width * 2;
    }
    [zoom >= 8] {
        marker-width: @width * 3;
    }
    [zoom >= 12] {
        marker-width: @width * 4;
    }
}

then I can change all the widths at once

@width: 8;
#airbnb {
    marker-width: @width;
    marker-fill: #ff307a;
    marker-allow-overlap: true;
    
    [zoom >= 4] {
        marker-width: @width * 2;
    }
    [zoom >= 8] {
        marker-width: @width * 3;
    }
    [zoom >= 12] {
        marker-width: @width * 4;
    }
}

it works with colors, too

@airbnbcolor: #ff307a;
#airbnb {
    marker-width: @width;
    marker-fill: @airbnbcolor;
    marker-line-color: @airbnbcolor;
    marker-line-opacity: 0.2;
    marker-allow-overlap: true;
}

@airbnbcolor: #ff307a;
#airbnb {
    marker-width: @width;
    marker-fill: fadeout(@airbnbcolor, 25%);
    marker-line-color: @airbnbcolor;
    marker-line-opacity: 0.2;
    marker-allow-overlap: true;
}

other color functions:

lighten(#ace, 10%);
darken(#ace, 10%);
saturate(#550000, 10%);
desaturate(#00ff00, 10%);
fadein(#fafafa, 10%);
fadeout(#fefefe, 14%);
spin(#ff00ff, 10);
mix(#fff, #000, 50%);

try it: use a variable for one of your properties

one last thing!

attributes as values

for example, easy relative sizes

Combining conditions
Variables
Attributes as values

how the web works

(a very short introduction)

What happens when you type google.com in your browser?

let's look at it with Chrome's Developer Tools:

Tools > Developer Tools

let's look at some other pages:

basic page

static map

a map in CartoDB

a map made with Leaflet

HTML

defines the structure of a page, loads other bits

HTML

CSS

adds style to parts of a page

CSS

JavaScript

makes web pages dynamic (eg AJAX)

JavaScript

your browser loads the HTML, which tells it which CSS and JavaScript files to get (if any)

but where is the browser getting the files from?

take a walk through a Google data center

inside a Google data center, via Wired

via m.ammoth, via the ny times

Google's official data center map

unofficial Google data center map (2008)

and how do the files get to you?

traceroute

can give you an idea of the route data takes to get from you to the server (and vice versa)

using Google Earth as a traceroute viewer

Chris Harrison

telegeography

The Guardian

2008: an "internet blackout [...] left 75 million people with only limited access, caused by a ship that tried to moor off the coast of Egypt in bad weather"

The Guardian

2008: an "internet blackout [...] left 75 million people with only limited access, caused by a ship that tried to moor off the coast of Egypt in bad weather"

The Guardian