Assignment 8

This assignment is designed to give you a better understanding of the Simple Statistics library and ways in which these sorts of "third party libraries" can be integrated into an interactive D3 visualization. The assignment focuses on methods for correlation and linear regression. Be sure you understand the solution to Assignment 6 before attempting to solve this problem.

This assignment is to be completed individually. It is not a team project.

You must document (using comments in your code) all resources (beyond our official textbook, Sakai, and the class website) that you used to help you complete this assignment. For example, if you referenced a code example from an online website such as Stackoverflow or github you could acknowledge it as follows:

  // Next we print 'Hello, World' to the console.
  // Based on help from: https://stackoverflow.com/questions/39603204/alerthello-world-not-working/39603400
  console.log('Hello, world!');

You must provide an attribution to any resource you consulted to complete this assignment except for our official textbook, Sakai, or the class website. Failure to provide attribution is a violation of the honor code.

What You Need to Do

For this assignment, you will augment the interactive scatterplot from Assignment 6 with correlation and regression statistics that supplement the visual representation.

The template file for this assignment will be posted to Sakai as an attachment to the Sakai assignment entry for this homework. Because it builds upon the solution for A6, it will be posted after Assignment 6 has been submitted. As in Assignment 6, the template includes life expectancy and poverty data for all 50 states plus the District of Columbia. The data also includes an assignment for each state to one of five regions: the Midwest, Northeast, South, West, or Other. Other is used only for Hawaii and Alaska.

The template file has most of what you need for this assignment already included. That includes the data, as well as the D3 code required to render an interactive scatterplot. What you need to do is add the code required to implement a few additional features. You'll see that there are both Basic and Advanced requirements. A perfect score is only possible for those who complete both the Basic and Advanced work.

Basic "B Level" Requirements

A perfect implementation for the following requirements will earn you 8 points (out of a maximum of 10).

Compute and display the correlation coefficient between life expectancy and poverty rate. Your software should update the correlation coefficient each time the user switches the visualization to show data for a new region, displaying the result in the area just above the scatter plot. The value should be rounded to two decimal places. To implement this feature, you'll need to add JavaScript code to the template's "updateCorrelation()". Hint: A span element with ID "correlation" is provided in the template. You can update the contents of that span with the correlation value.
In addition to the correlation coefficient, compute a linear regression line (see the Simple Statistics function named "linear_regression()") for the selected region's life expectancy and poverty rates. The regression line information must be integrated into the display. As a minimum, the slope (m) and the y-intercept (b) can be reported in text form on the page whenever the region is changed. (The variables m and b are the names used by Simple Statistics are adopted from the classic y=mx+b slope-intercept form of a linear equation.)

Advanced "A Level" Requirements

A perfect implementation for the basic requirements listed above will earn you 8 points (out of a maximum of 10). To earn the remaining points on the assignment, you must satisfy the following additional requirement:

First, be sure you've completed the requirements listed above. Then extend your visualization to draw the linear regression line as part of the scatterplot instead of simply showing the m and b values. Then, to make your visualization extra slick, you need to animate the changing regression line when the region changes. This will help emphasize regional differences as users explore the visualization.
Hint: there is a "clipPath" in the template. You don't need to use a clip path to make the regression line look nice, but it could be very helpful!

The video below shows the complete solution, including the "A Level" portion of the assignment. Your final web page should look and behave similarly.

Resources

Need help? Use our Piazza discussion forum to ask your questions. This way others in the class can benefit from the answers. You may also find that one of your classmates may have already asked your question and that the answer is just a click away. If you don't get a speedy response, feel free to send me an email to say "Please look on Piazza and answer my question!" I'll do my best to respond within 24 hours. However, don't wait until the last day before the assignment is due! You may not get an answer in time! You can, of course, also stop by my office hours.

The template to use as the starting point for this assignment will be posted to Sakai as an attachment to the corresponding Sakai Assignment 8. It will not be available until after Assignment 6 is turned in for grading because the template builds upon the solution to that assignment.

Submitting Your Solution

Please post your assignment to a web server as described in the "Web Hosting for Your Assignments" section of this web page.

Once you are finished with your work, you will then need to submit the assignment via Sakai. You should submit both (a) the URL of your online assignment solution, and (b) a copy of the HTML file (including all Javascript code) with your solution (the same one as posted on the web).

Please Note: The HTML file (and any linked Javascript code) that you submit through Sakai should match the version on your webserver EXACTLY. No modification should be made to the online version after your make your final submission of the assignment. If there are any differences, only the version submitted through Sakai will be considered for grading purposes.

Grading

As with all programming assignments in this course, your grade for this assignment will be determined using a scale of 0 to 10, with 10 the best possible score. Please note, however, that not all assignments are weighted equally when determining your final grade for the semester.

Your grade for this assignment will be based on a combination of factors including:

Correct functionality (e.g., Does your Javascript code do what it is supposed to do?)
Clarity of your solution (e.g., Did you solve the prolem directly and efficietly? Or is your answer excessively complex and/or inefficient?)
Coding style (e.g., Is your code readable with comments, meaningful variable names, and good whitespace/indentation?)