Advanced Interactive Web Mapping, Programming, and Design

In-class Excercises

Part 1: CartoCSS

  1. Open the class CartoCSS reference and CartoDB's CartoCSS documentation. These will be useful in the next few steps.
  2. Download the Airbnb listings from Inside Airbnb for the city of your choosing. The filename should be listings.csv.
  3. Load the data in your CartoDB account.
  4. Using CartoCSS, style the map. Do at least the following:
    1. Change the markers' fill color to hsl(284, 39%, 50%)
    2. Change the markers' width to 5
    3. Remove the line around the markers
    4. Make the markers more transparent
    5. What does the marker-comp-op property do? Try setting it to multiply for the markers.

Part 2: CartoCSS conditional statements

  1. Open your map from Part 1 if you closed it.
  2. Using conditional statements in your CartoCSS, do the following:
    1. Give markers that have room_type set to Entire home/apt a fill of #d13838
    2. Give markers that have price over 500 a width of 20. If the city you picked doesn't have many rooms over 500, feel free to pick a smaller value.
    3. Over zoom 12 make the markers less transparent

Part 3: SQL

  1. Open your map from Part 2 if you closed it.
  2. Open the SQL cheatsheet.
  3. Go to the Data View for your map and execute a few SQL queries using the patterns outlined in the cheatsheet:
    • Count the rows
    • Select rows in a particular neighbourhood (eg Astoria)
    • Select rows where price is under 50
    • Count the rows where price is under 50
    • Find the minimum price
    • Find the average price for listings in the neighbourhood you picked earlier
    Keep track of the queries you run in a text file.
  4. Which of the above work in Map View, too?

Part 4: Embedding CartoDB maps

  1. Create an empty HTML page.
  2. Using the CartoDB map you made in the previous parts, press the Publish button.
  3. Copy the code under Embed it.
  4. Paste the embed code into your page.