3.mapping-space

Exercise 3: Mapping Space and Frames of Reference

In this exercise you will be concerned with the space on the screen as much as the marks you place on it. This will be true both because you'll be creating a traditional, cartographic map (for which space & position have obvious informational analogs) and because you'll be combining the map view with a second diagram of your own design that will exist in conversation with it.

Preliminaries

The new library we'll be using for the mapping portion of this exercise is called Leaflet.js. Take a look at its API Reference and Tutorials which you'll likely find helpful as you customize your tile set and add markers, pop-ups, tooltips, and the like.

Take a look at the P5 wiki page on Integrating other Libraries for an overview of how to interact with the functions provided by external libraries.

The Leaflet.js Quick Start provides a good introduction to setting up a map and adding markers to it.

Goal

• Create both a diagrammatic and a geospatial visualization of recent seismic activity using one of the live data feeds provided by the USGS in CSV format. All the fields are explained in the left column and links to the feeds are in the sidebar on the right. For your convenience a snapshot of all the feeds (some of which are quite large) is in the data folder alongside your sketch.js file.
• Either choose from one of the ‘significant earthquakes’ feeds (hourly, daily, weekly, monthly), or pick your own quake-magnitude threshold from the items in the sidebar.
  • Note that if you pick a shorter timescale, your visualization should account for the fact that there may be no datapoints and/or pick a lower threshold to increase the number of points.
• Use the depth, magnitude, location, time, and text fields to design a visualization that reflects current earthquake activity in terms of magnitude and recency. Examine quantitative differences in 1-hour, 1-day, 7-day, or 30-day data sets.
• Incorporate magnitude and one other earthquake attribute (depth, time, etc) and experiment with different ways of encoding numerical values using size, shape, texture, and color.
• To get a feel for the ways you can combine and separate different aspects of the data, try opening one of the CSVs in a spreadsheet program and using pivot tables, histograms, filters, etc. to explore what’s available in the feed.
• For the extra-ambitious:
  • Add at least one UI element to control the representation of your data (e.g. range, focus, filter)
  • Experiment with pre-processing the data. Try grouping different events based on commonalities (e.g., location, size, depth range) and reporting them in terms of sums or averages. In other words, just because there are 36 rows in your CSV, that doesn't mean there have to be precisely 36 dots in your visualization!

Process

• As before, we’ll be loading data from external files and will need to use the local HTTP server. Remember to run make server from the command line before opening up http://localhost:8000 in your browser.
• The USGS provides ‘live’ data via its feeds but for ease of development, I've created a snapshot of today’s feeds in the data folder. Also note that there are snapshots from previous years in the data/2017 and data/2018 folders. Try selecting different feeds by changing the loadTable() call in your sketch and see how your representation changes based on different data.
  • If you want to pull new data down from the USGS, try running the script at data/update.sh. It will replace the contents of all the CSV files in the data folder with the newest information.

Review

For this assignment, brush up on these commands & constructs from last time:

• The coordinate system
• Shape primitives: rect()/ellipse()/arc()/line()
• Setting colors: fill()/stroke()
• Mixing colors: color()/lerpColor()/Brewer
• Iteration: for(…;…;…)/[].forEach(…)/while(…)

Also recall the utility functions for dealing with data files & normalizing or interpolating numerical values:

• Structured data: loadTable()/loadJSON()
• Interpolation: map()/norm()