Lecture 3: Mapping

By Dr. Shaheera Rashwan

Draw a Map
• 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.
• Sketch -> Add File and enter the following code
PImage mapImage;
void setup( ) {
size(640, 400);
mapImage = loadImage("map.png");
}
void draw( ) {
background(255);
image(mapImage, 0, 0);
}

2
Setting Locations on Map
• Add two files: a file containing the coordinates for the center
of each state can be found at
http://benfry.com/writing/map/locations.tsv. And a file to read
the location data file can be found at
http://benfry.com/writing/map/Table.pde.
• Create locationTable and use the locationTable.getFloat( )
function to read each location’s coordinates (x and y values)
and draw a circle using those values.

3
PImage mapImage;
Table locationTable; void draw( ) {
background(255);
int rowCount; image(mapImage, 0, 0);
void setup( ) { // Drawing attributes for the ellipses.
smooth( );
size(640, 400); fill(192, 0, 0);
noStroke( );
mapImage = loadImage("map.png"); // Loop through the rows of the locations
// Make a data table from a file that file //and draw the points.
//contains the coordinates of each state. for (int row = 0; row < rowCount; row++) {
float x = locationTable.getFloat(row, 1);
locationTable = new Table("locations.tsv"); // column 1
float y = locationTable.getFloat(row, 2);
// The row count will be used a lot, so // column 2
store //it globally. ellipse(x, y, 9, 9);
}
rowCount = locationTable.getRowCount( ); }
}

4
US Map and centers of states

5
Data on a Map

• We want to load a set of values that will appear on the map

itself. For this, we add another Table object and load the data
from a file called random.tsv, available at
http://benfry.com/writing/map/random.tsv
• It’s always important to find the minimum and maximum
values for the data, because that range will need to be
mapped to other features (such as size or color) for display.

6
PImage mapImage;
// Read the data table.
Table locationTable;
dataTable = new Table("random.tsv");
int rowCount; // Find the minimum and maximum
Table dataTable; values.
for (int row = 0; row < rowCount; row+
float dataMin = MAX_FLOAT; +) {
float dataMax = MIN_FLOAT; float value = dataTable.getFloat(row, 1);
void setup( ) { if (value > dataMax) {
dataMax = value;
size(640, 400); }
mapImage = loadImage("map.png"); if (value < dataMin) {
dataMin = value;
locationTable = new Table("locations.tsv"); }
rowCount = }
locationTable.getRowCount( ); }

7
void draw( ) {
background(255);
image(mapImage, 0, 0);
smooth( );
// Map the size of the ellipse to the data value
fill(192, 0, 0); void drawData(float x, float y, String abbrev) {
noStroke( ); // Get data value for state
float value = dataTable.getFloat(abbrev, 1);
for (int row = 0; row < rowCount; row++) { // Re-map the value to a number between 2 and 40
String abbrev = float mapped = map(value, dataMin, dataMax, 2, 40);
dataTable.getRowName(row); // Draw an ellipse for this item
ellipse(x, y, mapped, mapped);
float x = locationTable.getFloat(abbrev, 1); }
float y = locationTable.getFloat(abbrev, 2);
drawData(x, y, abbrev);
}
}
8
Varying data by size

9
• Another refinement option is to keep the ellipse the same size but
interpolate between two different colors for high and low values
• replace the drawData( ) function with the following:
void drawData(float x, float y, String abbrev) {
float value = dataTable.getFloat(abbrev, 1);
float percent = norm(value, dataMin, dataMax);
color between = lerpColor(#FF4422, #4422CC, percent); // red to blue
fill(between);
ellipse(x, y, 15, 15);
}

10
Varying data by color

11
Two-Sided Data Ranges

• Because the values in the data set are positive and negative, a better
option would be to use separate colors for positive or negative while
changing the size of each ellipse to reflect the range
• In this case, positive values are remapped from 0 through the
maximum data value into a value between 3 and 30 for the diameter of
the ellipse.
• Negative values are mapped in a similar fashion, where the most
negative (dataMin) will be mapped to size 30, and the least negative
(0) will be mapped to size 3. Positive values are drawn with blue
ellipses and negative values with red

12
void drawData(float x, float y, String abbrev) {
float value = dataTable.getFloat(abbrev, 1);
float diameter = 0;
if (value >= 0) {
diameter = map(value, 0, dataMax, 3, 30);
fill(#333366); // blue
} else {
diameter = map(value, 0, dataMin, 3, 30);
fill(#EC5166); // red
}
ellipse(x, y, diameter, diameter);
}

13
Magnitude and positive/negative

14
References
• Book of the Course-Chapter 3 Until page 41

15
End of Lecture

16