CMSC110 (Introduction to Computing)

Spring 2013


Due before start of class on Tuesday, April 2, 2013

First, read Chapter 5 from GXK and Chapter 9 from Shiffman.

Task: Develop a processing program that enables a user to visualize some time series data.  Your program should allow the major trends in the time series to be easily visible.  Additionally, your program should allow for some form of interaction between the user and the data (some suggestions are given below).

Your program should be able to read in the time series data from a file, parse the data with Processing, and then use Processing to display the data in a clear and aesthetically pleasing manner.  You should consult Chapter 5 of GXK to get some ideas for effective methods of visualizing time series (e.g. line charts, bar charts, heat maps, etc.).  However, you are by no means limited to the formats presented in the GXK chapter.  Above all, the choice of visualization format should be informed by the story that you want to tell about your particular time series data.

Don't be afraid to be creative!  Visual enhancements that don't necessarily convey additional information but make the presentation of the data more interesting and aesthetically pleasing are encouraged.

Here are a few suggestions for how you might add an interactive element to your sketch:
  1. Use text to display the exact value of a datapoint when the mouse hovers over the relevant portion of the visualization.
  2. Zoom in on a particular segment of the time series by clicking the mouse on a segment of a line graph.
  3. Toggle the appearance of a moving average line with the click of a button.
You should select a dataset that lends itself to telling an interesting story through visualization.  You are welcome to find your own data from any source you'd like as long as it is: (1) a time series and (2) contains a reasonable number of datapoints (a rough rule of thumb would be at least 50).  You may want to obtain data from one of the following sites that serve as data clearinghouses: and  In addition, we are providing five dataset that we feel are suitable for completing the project. 

Timeseries datasets (you do not have to use one of these!):
  1. Product usage data: web browser popularity (also see here for more data).
  2. Demographic data: popularity of various names in the U.S.
  3. Economic data: U.S. GDP (consult here for more economic time series).
  4. Weather data: Philadelphia snowfall by year (for more weather datasets for Philadelphia consult the Franklin Institute Page).
  5. Stock market data: data from the book irrational exuberance (see here for more detail).

Remember to pay special attention to the aesthetic aspects of your design as well as interactivity. Be sure to use the programming features you have learned in the last week or two.

Extra Credit:  Extra points (in an amount to be determined) will be awarded based on students who create projects that significantly expand upon the requirements of the assignment.  This part of the assignment is totally open-ended, and you are welcome to discuss ideas with us.  One example of an extension that would merit extra credit would be to collect a second time series and overlay it on the first.  The second time series should help the user better understand the causes of the trends in the first time seres (for instance when graphing first class mail volume, one might include a graph of e-mail volume overlayed on the same plot).

What to Hand in: Hand in the entire sketch folder in your Dropbox folder. In addition to the sketch/programs also include; (1) a gif/jpg/png image of your finished sketch. (2) A formatted write-up with Page#1 showing your sketch, followed by a title, your name, a short 1-2 line description (as discussed in class) on page#1, and a short 1-2 paragraph more detailed description of the sketch and your personal experiences working on this sketch.

Back to CMSC110 Course Web Page