Skip to content

Instantly share code, notes, and snippets.

@mukhtyar
Forked from piensaenpixel/readme.md
Created March 30, 2016 17:35
Show Gist options
  • Save mukhtyar/0032bf1bdf0667c394831f304c9041df to your computer and use it in GitHub Desktop.
Save mukhtyar/0032bf1bdf0667c394831f304c9041df to your computer and use it in GitHub Desktop.
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

    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:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment