Visualizing Data

Chapter 3. Mapping

This chapter covers the basics of reading, displaying, and interacting with a data set. As an example, we’ll use a map of the United States, and a set of data values for all 50 states. Drawing such a map is a simple enough task that could be done without programming—either with mapping software or by hand—but it gives us an example upon which to build. The process of designing with data involves a great deal of iteration: small changes that help your project evolve in usefulness and clarity. And as this project evolves through the course of the chapter, it will become clear how software can be used to create representations that automatically update themselves, or how interaction can be used to provide additional layers of information.

Drawing a Map

Some development environments separate work into projects; the equivalent term for Processing is a sketch. Start a new Processing sketch by selecting File → New.

For this example, we’ll use a map of the United States to use as a background image. The map can be downloaded from http://benfry.com/writing/map/map.png.

Drag and drop the map.png file into the Processing editor window. A message at the bottom will appear confirming that the file has been added to the sketch. You can also add files by selecting Sketch → Add File. A sketch is organized as a folder, and all data files are placed in a subfolder named data. (The data folder is covered in Chapter 2.)

Then, enter the following code:

PImage mapImage; void setup( ) { size(640, ...