Design Webinar Part 1: Airport Traffic

Create a Basemap

First, we will create a simple basemap that we can use to display the airport traffic information on top of

Add the data

From your Maps dashboard, click on NEW MAP
In the Add datasets dialogue, search for world borders to find the World Borders (High Definition) dataset available in the CartoDB Library
Once located, click to highlight, and then click CREATE MAP which will sync the layer to your account from the CartoDB Library and also add it to our map

Style the Background

The default basemap is Positron to change that, let's change the background color of the map

In the Editor choose "Change basemap" and change the default color to '#2e3c43'

Style the Countries

To continue with the subtle theme for our basemap, we'll style the countries so they sit nicely with the background color of the map

First, let's rename the layer to "Basemap"
Next, we'll open the styling Wizard and change the following properties:

polygon-fill: #FFFFFF;
polygon-opacity: 0.1;
line-color: #FFF;
line-width: 0.25;
line-opacity: 0.1;

Give our Map a Title

Double click on the title and change it to "Airport Traffic"

Ok! Now let's pass it over to Emilio who will walk us through the design of the airport traffic data!

http://bit.ly/1UUA9aG

Airport Traffic

Use Custom Basemap

Add layers Data

Add Layer with the traffic dataset (point map)
Rename as to Airports Points

Style point layer That’s the data we need.

airport_traffic:

#airport_traffic{
  marker-fill-opacity: 0.6;
  marker-line-color: #3E7BB6;
  marker-line-width: 0.20;
  marker-line-opacity: 0;
  marker-placement: point;
  marker-multi-policy: largest;
  marker-type: ellipse;
  marker-fill: #FFFFFF;
  marker-allow-overlap: true;
  marker-clip: false;
}

For more context we are going to style this layer depends the number of users airport_traffic:

#airport_traffic [ users <= 249143] {
   marker-width: 6.0;
}
#airport_traffic [ users <= 35019] {
   marker-width: 5.4;
}
#airport_traffic [ users <= 22640] {
   marker-width: 4.9;
}
#airport_traffic [ users <= 16512] {
   marker-width: 4.3;
}
#airport_traffic [ users <= 12334] {
   marker-width: 3.8;
}
#airport_traffic [ users <= 9051.5] {
   marker-width: 3.2;
}
#airport_traffic [ users <= 6472] {
   marker-width: 2.7;
}
#airport_traffic [ users <= 4445] {
   marker-width: 2.1;
}
#airport_traffic [ users <= 2752] {
   marker-width: 1.6;
}
#airport_traffic [ users <= 1266] {
   marker-width: 1.0;
}

But without the flight lines it lacks a sense of movement.

Add layer with the same dataset (traffic airports)
Rename as airports routes

Now we need connect both cities (the_geom to the_geom_1), we convert points in line. We need use this simple SQL

 SELECT cartodb_id, users, field_4,
   ST_TRANSFORM(
     ST_MakeLine(the_geom, the_geom_1),3857
   ) AS the_geom_webmercator
   FROM airport_traffic WHERE field_4 = 'Q3'

We style the lines.

   #airport_traffic {
     polygon-opacity: 0;
     line-color: #5CA2D1;
     line-width: .25;
     line-opacity: 1;
   }

If you like we could style the line depends the number of users

   #airport_traffic [ users <= 229457] {
     line-opacity: 0.40;
   }
   #airport_traffic [ users <= 26186] {
     line-opacity: 0.35;
   }
   #airport_traffic [ users <= 15551] {
     line-opacity: 0.30;
   }
   #airport_traffic [ users <= 10161] {
     line-opacity: 0.25;
   }
   #airport_traffic [ users <= 6115] {
     line-opacity: 0.20;
   }
   #airport_traffic [ users <= 3320] {
     line-opacity: 0.15;
   }
   #airport_traffic [ users <= 1245] {
     line-opacity: .1;
   }

Change the order of the layers, put the airports point on the top.
Add title and customize legends.

Publish the final map

Other notes:

You can take a look this blog post about how draw lines between points - http://blog.cartodb.com/jets-and-datelines/

piensaenpixel/readme.md