Description
In programming assignment 3, you work with an existing visualization created with D3. The main task in the assignment is to modify the D3 code to provide interactive brushing and linking.
The goal of the assignment is to learn about designing interaction and implementing interaction using D3.
MODIFYING THE PROVIDED CODE
It is quite common to provide brushing and linking in visualizations. In this assignment, you are asked to add interaction to an existing D3 visualization. Run-time performance is not important for this assignment. The task
consists of the following steps.
1. Take the provided code and make sure that it works. Easiest thing (which also helps in the next steps) is
to create a new WebStorm project and add all three files to the project root.
2. Using WebStorm (or your preferred programming environment), explore the code in index.html.
3. Try to understand how countries are identified in the data files and in the produced SVG output.
4. Consider the type of interaction you want to provide for selecting elements in the scatterplot and in the
map, and how you want the elements of the visualization to change based on selection. Remember to
consider how to deselect elements as well as what happens in this case.
5. Sketch 3 interaction alternatives, including the steps of the interaction, and describe them. Your designs
should include solutions for selecting and updating elements in the scatterplot and in the map.
6. Implement a way for selecting one or more elements in the scatterplot.
Use console.log() to see the results of your selection.
7. Implement a way to update the map based on the selection in step 6.
8. Implement a way for selecting one or more elements in the map.
Use console.log() to see the results of your selection.
9. Implement a way to update the scatterplot based on the selection in step 8.
NOW IT IS TIME FOR REFLECTION
The next steps are reflective and should be included in your hand-in.
10. First, describe what you did (sketching, design, implementation) and how it works (implementation).
Both from a technical point of view and how a person might use it. Take screenshots from the visualization and illustrate the steps of the interaction by annotating it. Include sketches from your work.
11. Did you produce what you aimed for? Did you get something else that worked? Are you happy with the
result? Write down your thoughts.
SUBMISSION
You submit three things:
• A report hand-in as a pdf file. The title/subtitle of your report should include “CPSC 583 Programming
Assignment 3” and “[Student name] | [student id] | [date]”. Since you will include more figures, you can
use up to four pages of content. You are welcome to add an appendix, but we might not look at it.
• A zip file with all the contents of your project code to enable us to execute it by opening index.html in a
browser.
• A URL for running your index.html. This might be from Github, pages.cpsc.ucalgary.ca, or elsewhere.
DEADLINE
Wednesday April 7, 11:59pm Calgary time.
NEXT STEPS
You will receive marking on your assignment in D2L.
