Advanced Interactive Web Mapping, Programming, and Design

In-class Excercises

Part 1: JavaScript refresher

Recall your web development skills through this exercise. Write this code in a code editor on your computer or use an online code editor such a JS Bin.

  1. Create an HTML page.
  2. Add a select input and a div element.
  3. Style your page using CSS.
  4. Add JavaScript to your page such that when the select changes the div's CSS properties change, in a manner of your choosing. For example, the select might have options for colors that update the background color of the div as in this example.
  5. Post your page to Gist or a GitHub repository.

Part 2: CartoDB

Let's get familiar with CartoDB's interface.

  1. Create a CartoDB account (using an email address ending in .edu if you have one).
  2. Download data from the AirBnB listings via Inside AirBnB for a New York City (you want the file called listings.csv under New York City).
  3. Upload the data to CartoDB and explore its visualization wizards.
  4. Do the same with a shapefile of City Council Districts on the city's open data portal. Shapefiles have to be zipped to be uploaded to CartoDB.
  5. Edit the infowindows for your visualization.
  6. Publish your visualization and get a public link for it.