Assignment 6

This assignment is designed to give you a better understanding of D3's data joins, selections, and transitions. Be sure you understand the solution to Assignment 5 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, Canvas, and the class website) that you used to help you complete this assignment. This includes any ressource ranging from textbooks to friends to generative AI technologies. 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, Canvas, 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 develop an interactive scatterplot that lets users explore the relationship between life expectancy and poverty rate within the United States.

The template file for this assignment, which you can find here, 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 already included. That includes the data, as well as some intial D3 code that sets up axes, scales, and other useful constructs for this project. What you need to provide is an implementation for the renderVis() function that supports the requirements listed below. 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).

Using the template you should create a scatterplot that supports the following features:

Position cirlces, one for each state, according to the poverty and life expectancy values. Your circles should be positioned to align with the scatterplot axes included in the original template. (Hint: use the D3 scales already included in the template.)
Color code the circles by region, such that all states in the same region are represented with circles of the same color. (Hint: use the "category10" scale already included in the template.)
Allow a user to control which states appear in the scatterplot using the select box already included in the template. All data should be shown when "United States" is selected. If other values are shown, only the states in the corresponding region should be displayed. See the video below as a demonstration of the required functionality.
When a user moves the mouse pointer over a circle, provide a detailed textual description of corresponding state above the scatterplot. You should also "turn off" the effect when the mouse is moved off the circle. You'll want to take a look at D3's selection.on function. You should also look at the solution video included below to see the desired behavior. Notice how the text above the scatterplot is changing as the mouse pointer moves around the visualization.

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 all of the basic requirements listed above. Then use D3 transitions to animate the entrance and exit of circles in the scatterplot. The video below shows circles that fade in and out using transitions.

Your final web page should look and behave as shown in the following video.

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 is available here: 6_template.html.

Please Note: The specific steps required to save this template file to your computer depend on which web browser you are using. For example, in Chrome you would right click on the link and select "Save Link As..."

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 Canvas. 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 Canvas 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 Canvas 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?)