Design Webinar Part 1: Airport Traffic

readme.md

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

  1. Add Layer with the traffic dataset (point map)

  2. Rename as to Airports Points

  3. 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;
     }
     

  4. 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.

  5. Add layer with the same dataset (traffic airports)

  6. Rename as airports routes

  7. 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'
     

  8. We style the lines.

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

  9. 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/