CS465 - Assignment Four

Due: 2014-03-18 11:00a

Objectives

[45 points] Build some visualizations

  1. [15 points] Create a bubble chart from the census data that displays percent over 65 on the X axis and percent white on the Y axis. The radius of the bubbles should be between 1 and 8 and determined by overall population. Label the axes appropriately. You have two choices for this one, you can make use of the example I showed in class, or you can build your own from scratch. If you use my example, much of the work has been done to construct a scatterplot, but, you will need to do more work adding additional functionality to it (like sizing the bubbles and adding labels). In other words, if you use my code, I will expect that you do not break the reusability of the code – any addition you make will need to be a tunable parameter.

  2. [15 points] Create a line chart of the Orange dataset that maps age to circumference. The graph should have a line per tree, each measured data point should be marked with a dot, the axes should be labeled and you must have a legend showing which tree corresponds to each color. We did not have time to talk about line charts in class, but I have posted a simple example with a single line. I am still leaving you with many things to look up / figure out. You will want to take a look at d3.nest() and d3.legend() at the very least.

  3. [15 points] Redo the top 50 Green supercomputers graph using D3. To make your life a little easier, here is just the top 50. It does not need to be a perfect match. I just want to see a horizontal bar chart ordered by rank with Japan and the United States called out in a different color. You might go further and make the graph better by labeling the bars with the country of origin. Even better, figure out how to set the color on hover and highlight all of the bars of the matching country when you hover over one of them (+10 bonus points).

Turning in your work

Hand in a zip file called username_hw4.zip. This should contain a directory called username_hw4. Inside, there should be three files: username_hw4_1.html, username_hw4_2.html, username_hw4_3.html. You are welcome to include any other supporting files that you may need (local copy of the data, d3.legend.js, etc). Please add appropriate HTML text including your name, date, the assignment, and a label for each visualization. You are welcome to include additional explanatory text as you feel appropriate.

I would like this document turned in in the DROPBOX on MiddFiles. You can refer to the reference on the LIS wiki to help you connect to the file server.