Assignment 5

This assignment is designed to help you gain familiarity with D3's programming model and common idioms. It assumes basic knowledge of Javascript and HTML.

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

What You Need to Do

Starting with the template (see the Resources section below), use D3 to create a web page that contains a set of 7 DIVs, each showing a different color of the rainbow: red, orange, yellow, green, blue, indigo, and violet.

If you look inside the template file, you will find comments specifying where you should add your D3 Javascript code. The assignment can be completed using only basic D3 techniques as covered in the introductory "Let's Make A Bar Chart" example.

Your final web page should look like this:

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: 5_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..."

Hint: Debugging might be easier if you use Chrome's Icognito mode. That mode is very useful for web developers because it disables caching (which can keep old files around in your web browser after you've edited the file to make changes). I suggest using an Icognito window for all of your web development work.

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 with your solution (the same one as posted on the web).

Please Note: The HTML file 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?)