Published on EARTH 801: Special Topics in Earth Sciences (https://www.e-education.psu.edu/earth801)

Home > Lessons > Small Projects

Small Projects

Small Projects: Introduction

Overview

Time to put the skills you've been learning to work while designing two small projects. Ideally one of the projects will be something for fun and the other one will be something that has science and/or data in it. I don't want to proscribe either one of them too narrowly because I'd like you to have control over what you want to do. If you created a program in an earlier lesson but didn't quite have the time or the know-how to make it work just the way you wanted, this is the perfect time to revisit that program and make it better. There is also a reading discussion featuring two chapters from The Visual Display of Quantitative Information by Edward Tufte.

Learning Outcomes

By the end of this lesson, you should be able to:

  • create two small projects that demonstrate many skills you've learned in this course

What is due for the Projects?

This lesson will take us two weeks to complete. The book chapter discussion nominally takes place over the first week, 14-20 July 2021. Turn in your two projects by 27 July 2021.

Questions?

If you have any questions, please post them to our Questions? discussion forum (not e-mail) in Canvas. I will check that discussion forum daily to respond. While you are there, feel free to post your own responses if you, too, are able to help out a classmate.

Reading Discussion

The .pdf copies of the articles we'll read for this week's discussion are in Canvas.

This week we will read and discuss two chapters from Edward Tufte's book The Visual Display of Quantitative Information:

  • Chapter 1: Graphical Excellence
  • Chapter 8: High-Resolution Data Graphics

The first chapter discusses why data maps, time series plots, and "narrative data graphics" are so valuable and why it pays to think carefully about how to construct them. There are some beautiful examples presented (and a couple of examples of what not to do) along with some how-to points regarding graphic construction best practices.

Chapter 8 I really like because of the baseball sparklines showing how different teams fared throughout a season. There are some other relevant points for us to consider in this chapter, too, because as we have discovered during this semester and in other courses in this master's degree program, Earth science produces really big datasets and usually you have to display all the data for the viewer to get the point.

Questions for discussion

As you read, consider the following questions, which we will discuss as a class:

  1. Study the Graphical Excellence checklist on the first page of Chapter 1. Are there any things you'd add or subtract from this list? Are there points here that are especially often violated by your students or other people?
  2. Why is the plot on p.15 "silly"?
  3. On p.51, Tufte says "Graphical excellence in nearly always multivariate." What does he mean?
  4. What are some Earth science concepts that could be displayed with "sparklines?"

Submitting your work

Once you have finished reading these two chapters, engage in a class discussion in Canvas that will take place over a week. This discussion will require you to participate multiple times over that period.

Grading criteria

You will be graded on the quality of your participation. See the grading rubric [1] for specifics.

Small Project 1

My suggestion is to create a cool animation, game, or drawing. Here's a video of my feeble example of a game. It would be better if it were relevant to Earth science concepts in some way.

Watch this video (1:25).

Bouncing Ball Game.
Click to expand to provide a transcript.

Up here I declare a bunch of variables. Then inside setup I make the size of the window and I load a couple fonts and inside draw, I draw the ball and this is how it moves. This chunk here takes care of what to do if the ball hits either one of the sides. It turns around and the stroke color becomes something else. If the ball hits the top, it turns around and the fill color becomes something else and you get a point. And then the points that you have so far are printed down here. If the ball hits the bottom, the game's over. These various things happen like it totals up the points you have. It draws a kind of flattened squashed ball the bottom and no loop tells the program to stop running because we're done. If you press the mouse inside the ball then it speeds up and the ball goes up. So, I'm not good this game or really any video game, but this is what it looks like when it's running. See at the bottom that it's totaling up my points and the ball is changing color just for fun. If I miss the ball, which will happen soon, that it says splat! Tells me that I got 10 points, and we're all done.

E. Richardson.

When it's running, you have to click inside the circle to make the circle go up. It will bounce off the sides and the top. Each time it bounces off the top border, it goes a little faster. If it hits the bottom, the game is over. A better version of this game would involve some kind of screen with directions at the beginning and a button to make it start, and a restart button. Maybe one of you can beef this up or create something a lot better.

Processing code for my example of a game:

?
// Bouncing ball game.
// Don't let the ball hit the bottom.
// Click inside the ball to make it go up.
 
color bg = color(220, 220, 200);
float ballsize = 40.0;
float speed = 1.0;
float y = random(ballsize, (height - ballsize));
float x = random(ballsize, (width - ballsize));
float ball_xdirection = 1;
float ball_ydirection = 1;
int points = 0;
PFont font1;
PFont font2;
 
void setup() P
   size(200, 200);
   font1 = loadFont("BradleyHandITCTT-Bold-48.vlw");
   font2 = loadFont("Garamond-14.vlw");
}
 
void draw() {
   background(bg);
   strokeWeight(4);
   ellipse(x, y, ballsize, ballsize);
   x = x + ((.5 * speed) * ball_xdirection);
   y = y + (speed * ball_ydirection);
 
   if (x > width - (ballsize/2) || x < ballsize/2)) {
      ball_xdirection *= -1;
      int r = int(random(255));
      int g = int(random(255));
      int b = int(random(255));
      stroke(r, g, b);
   }
    
   if (y < (ballsize/2)) {
      ball_ydirection *= -1;
      int r = int(random(255));
      int g = int(random(255));
      int b = int(random(255));
      fill(r, g, b);
      points=points+1;
    
   println("Good work! " + points + " points for you");
   }
 
   if (y > height - (ballsize/2)) {
      println("GAME OVER");
 
      textFont(font1);
      textAlign(CENTER);
      text("SPLAT!", width/2, height/2);
 
      textFont(font2);
      textAlign(RIGHT);
      fill(0);
      text("Points: " + points, width - 20, 20);
      strokeWeight(8);
      stroke(bg);
      fill(bg);
      ellipse(x, y, ballsize, ballsize);
      fill(255);
      stroke(255);
      ellipse(x, y + ballsize/2, ballsize*2, ballsize/2);
      noLoop();
   }
  
   if (mousePressed == true && mouseX <= x + ballsize/2 && mouseX >= x - ballsize/2 && mouseY <= y + ballsize/2 && mouseY >= ballsize) {
      speed = speed + 0.05;
      ball_ydirection = -1;
   }
 
}

A still shot from the end of the game:

Image of processing code from above with a window with the word SPLAT written in it.
Screenshot of the example game code with the Splat window.
E. Richardson

Turning in your work

Submit your program to the "small project 1" dropbox. Remember that if your program requires extra files such as fonts or external files then zip the whole thing and submit the zipped file to the dropbox.

Small Project 2

I suggest that this project do something visually interesting with an Earth science data set of some sort. If you are stumped or can't find anything good, let me know and I can help brainstorm.

Below is a video of the example program of an an animation of some foreshocks and aftershocks from the March 2011 Tohoku-Oki earthquake that happened off the coast of Japan. There's a time-elapsed clock up in the corner so you can tell how far along the animation is. I made the circle sizes go as a log scale instead of a linear scale like most people do because this way is actually a more accurate representation of the difference in earthquake magnitudes compared to each other. The fact that they are all represented as circular sources is not accurate, though. One thing you can see that falls naturally with my way of plotting is that you can really see the fact that aftershock locations basically fill up the area swept out by the mainshock. Remember from Earth 520 that one way to tell the areal extent of the rupture of a large earthquake is to see where the aftershocks are.

Watch this video (1:25).

Animation (and code) of the Tohoku-Oki earthquake
Click here for a transcript of the Tohoku-Oki earthquake video.

Here's my program that makes an animation of aftershocks from the Tohoku earthquake. So up at the top I declare some global variables. Then the set up block is actually pretty big in this program, because I use the setup block for everything that only has to run once so that it's not taking up extra space when I'm trying to run the actual animation. So inside the setup block, I load the font, I read in two different files. One of them has the earthquake data, and the other one has the coastline data. And then here's a line of text that I'm going to just write once, it never changes, and then I actually plot the coastline inside setup too, because that's never going to change during the animation. Then I just use draw to plot all the events. So this piece splits up all the lines of the input file into latitude, longitude, magnitude. And then all of these statements decide what color to make each circle, depending on what the magnitude is. And I have a little fallback statement in case I messed up with my equals and greater than signs up here. Then I just draw each data point with this line. And then this block right here makes a little time elapsed clock up in the corner that runs along and sweeps out a circle so that you can kind of tell when the animation is over. And then I increase this index number by one and run through the line again. So this is what it looks like when it is running. Pay really close attention right at the beginning, because you're going to see a foreshock with its own aftershocks, and then the huge really big event and all of its aftershocks. There's the first-- there's the big event. The size of the circle indicates the magnitude, and the color also indicates the magnitude. Here's this time elapsed clock up in the corner, and when it gets to the end, we'll know the animation's over. It's over now. So that's about a month of data.

E. Richardson

Here is the code that was shown in the video:

?
/**
 * tohokumap
 *
 * Loads a text file that contains three columns (lat, long, mag) of seismic locations
 * from NEIC Feb 10 - Apr 5 of 2011, in a box from 32N - 46N and 14E - 148E (Japan).
 *
 *
 * The magnitude of each event is shown by its radius (exp(mag)/20 = radius in pixels).
 *
 * The "clock" in the corner shows time elapsing as the events happen
 **/
  
 String[] lines;
 String[] coast;
 int index = 0;
 float magscale = 1.1;
  
 void setup() {
    size(700, 700); // Each degree of lon/lat is 50 pixels
    background(200);
    smooth();
    //frameRate(30);
    PFont font;
    font = loadFont("AppleSymbols-18.vlw");
    textFont(font);
    lines = loadStrings("tohoku_latlonmag.txt");
    coast = loadStrings("coast30062.txt");
    fill(0);
    text("Animation begins on 10 Feb 2011, ends on 5 Apr 2011", 100, 50);
     
    // Draw the coastline
    for (int i = 0; i < coast.length; i++) {
       String[] pieces = split(coast[i], ' ');
       float lon = float(pieces[0]);
       float lonMap = map(lon, 134, 148, 0, width);
       float lat = float(pieces[1]);
       float latMap = map(lat, 32, 46, heiht, 0);
       pushMatrix();
       translate(lonMap, latMap);
       stroke(0, 0, 255);
       point(0, 0);
       popMatrix();
    }
 }
  
 void draw() {
    // Plot the events
    stroke(150);
    if (index < lines.length) {
       String[] pieces = split(lines[index], ' ');
       float y = float(pieces[0]); // latitude
       float yMap = map(y, 32, 46, height, 0);
       float x = float(pieces[1]); // longitude
       float xMap = map(x, 134, 148, 0, width);
       float m = float(pieces[2]); //magnitude
        
       if (m < 4.0) {
          fill(192, 250, 58);
       }
       else if (m >= 4.0 && m <= 4.9) {
          fill(243, 250, 58);
       }
       else if (m >= 5.0 && m <= 5.9) {
          fill(250, 109, 58);
       }
       else if (m >= 6.0 && m <= 6.9) {
          fill(250, 186, 58);
       }
       else if (m >= 7.0 && m <= 7.9) {
          fill(150, 129, 58);
       }
       else if (m >= 8.0 && m <= 8.9) {
          fill(250, 100, 58);
       }
       else if (m > 8.9) {
          fill(250, 87, 58);
       }
       else {
          println("bummer! I don't know what to do with m = " +m);
       }
        
       ellipse(xMap, yMap, exp(m) / 20, exp(m) / 20);
        
       // Make a time elapsed clock up in the corner.
       noFill();
       ellipse(50, 50, 80, 80);
        
       // Angles start at 3 o'clock
       // Subtract HALF_PI to make the clock start at the top.
       float t = map(index, 0, lines.length, 0, TWO_PI) - HALF_PI;
       line(50, 50, cos(t) * 38 + 50, sin(t) * 38 + 50);
        
       index = index + 1;
    }
 }   

Another point made by this animation is that a magnitude 9 earthquake is really, really, really, mindbogglingly big!

If you are prepared to be watching closely at the beginning, you can see that this earthquake had a big foreshock, too, and that foreshock had a cascade of its own aftershocks before the main event happened.

Here is a video showing just the Tohoku aftershocks animation by itself (0:25). (This video lets you watch the animation without hearing me talk about the details of the program)

Animation of the Tohoku-Oki earthquake
E. Richardson

Here's a still shot from the end of the animation:

map of Japan with earthquake location. display from aftershocks animation program.
Still image from the end of the animation of the Tohoku-Oki earthquake
E. Richardson

Turning in your work

Turn in your project to the "small project 2" dropbox. Remember to zip your whole folder and turn the zipped file in if your program requires external files such as fonts, images, or data in order to run.

Source URL:https://www.e-education.psu.edu/earth801/node/497

Links
[1] https://www.e-education.psu.edu/earth801/node/537