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.
- Pull the most recent changes into your clone or fork of http://github.com/samizdatco/dvia-2018
For this assignment, brush up on these commands & constructs from last time:
- The coordinate system
- Shape primitives:
- Setting colors:
- Mixing colors:
Also recall the utility functions for dealing with data files & normalizing or interpolating numerical values:
The new library we'll be using for the mapping portion of this exercise is Leaflet.js whose API Reference and Tutorials 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.
Create a 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
datafolder alongside your
- 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 (especially in light of the week's assigned reading) color.
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!
- As always, only create or modify files within the
- Start off by making pencil sketches for at least three different approaches to representing the data in the feeds. The point of these sketches is not to accurately represent the data as it exists but to illustrate your strategy for mapping the quantities, times, text strings, etc. to formal elements. These three sketches should be conceptually different from one another; not just stylistic tweaks of the same idea.
- Describe in the
README.mdfile both the logic of your map & diagram designs and how they'll relate to each other on screen (i.e., is one a sidebar or inset to the other, are the graphics summarizing all earthquakes or do they detail specific ones selected from the map, etc.).
- Place your sketches in the
processfolder of your subdirectory.
- Describe in the
- As before, we’ll be loading data from external files and will need to use the local HTTP server. Remember to run
npm startfrom the command line before opening up
http://localhost:8080in your browser.