CS 106 Winter 2016

Assignment 09: Tables

Question 1 Population Pyramid



A population pyramid is a standard way to visualize the age distribution in a population. At its core, it works like two bar graphs turned sideways. You divide a population up into age groups and show the number of people belonging to each age group at some point in time. One bar graph (the one on the left in the image above) shows the male population, and the other shows the female population.

Statistics Canada publishes annual age-segmented population data going back to 1971, giving us a clear snapshot of how the Canadian population pyramid has evolved over 45 years. You will write a sketch that uses the StatsCan data (sorted into two CSV files, one for men and one for women) to render population pyramids, with the ability to move interactively through the years and watch the changes.

Proceed as follows:

  1. Download the two files male.csv and female.csv and add them to an empty sketch. Open one of the files in a text editor (or maybe in Excel?) and have a look at it. Really! You'll see that there's a row for each year from 1971 until 2015 (plus a header row at the top). Each row has an initial field that tells you the year, followed by 18 fields showing the population for each age group in that year (divided up by gender into the two files).
  2. In setup(), load the two CSV files and store them in global variables. Set the sketch window to have size 600×400. Remember that these CSV files have special header lines, so use the "header" option when you load them in.
  3. Before you start drawing graphs, make sure you know how to access the populations you'll need. Create a global variable to hold a year, and set it to the year you were born. Now add code to setup() that prints out all the population fields for that year, from the table corresponding to your gender. Verify that you get exactly the numbers you need: that they're taken from the correct row of the correct table, and that you include exactly every field in that row except for the year itself. Once you're comfortable with this, comment out or remove the printing code but leave the global variable.
  4. Now create a draw() function that draws the bar graph for females for the current year. Note that as you walk across a row of the table and ages increase, you draw bars from the bottom of the sketch to the top. For starters, put the graph anywhere you want; it's more important to get the shape correct.
  5. Change the code so that the graph is drawn in a reasonable location. Its left edge should be shifted slightly to the right of the vertical centre of the sketch window. There should be margins on the bottom, right and top. You can do this by explicitly shifting coordinates around, or perhaps by using a geometric context.
  6. Now draw the male graph as well, positioned to grow outward from left of the centre line of the sketch window. If you want to be elegant, think about defining a single helper function to draw either of the graphs, and then call that function twice, once for males and once for females. How might that work?
  7. Add the text as shown in the image above. Add text labels for all the bars, showing the age ranges they represent. Ideally, draw the labels using a loop. Note that if you're using a counter like idx to iterate over the bars from bottom to top, then the idxth age range runs from ages 5*idx to 5*idx+4. In larger text, draw the year in the space above the graphs. You can use the built-in function textSize() to switch between sizes, and it'll be helpful to call textAlign( CENTER ).
  8. Finally, allow the user to move backward and forward through the years. Use the built-in variable keyCode to respond to presses of the left and right arrow keys. When the left arrow key is pressed, move to the year before the one currently shown; when the right arrow key is pressed, move one year forward. Don't allow the user to leave the legal range of years (for example, pressing the left arrow when 1971 is showing does nothing).

You can spice up your sketch however you like. Choose a reasonable colour scheme for the background, the text, and the two sets of bars. Add other annotations or interactivity if you like. In the example above I added thin vertical lines to mark population values of 500000 and 1000000, making it easier to judge the bars, but that's not required. If you depart to much from the original specification, consider putting your changes into a separate enhanced version of the sketch.

Save your work in a sketch titled PopPyramid.

Submission

Remember to review the Code Style Guide and use Processing's built-in auto format tool. Then review the How To Submit document. At the top of all of your source files, be sure to include a comment with your name and student ID number. When you're ready, zip the PopPyramid sketch into an archive called A09.zip and upload that file to LEARN.