Fundamentals of visualization including data sources, representations, and graphical integrity. Visualization of scalars, vectors, and high-dimensional data. Visual perception and color theory. Applications from medical imaging, social media, sports, security and surveillance domains. PREREQ: CS 245.

Assignment 7: Interaction in D3 - (100 points)



Due date: 10/11/2022 at 11:59pm

For this assignment, you will modify the Multi-Series Line Chart example provided here. Please read Chapter 10 from the Interactive Data Visualization for the Web book before starting this assignment. Note: Remember to sign in with your usfca.edu email account to oreilly.com before you access the link for the book.

Here are the specifications for the assignment.

To get a C (75), your assignment must include:

  • Filtering: Add the ability to click on the city text to filter (remove) that line. Specifically, clicking on a city name should remove (or make invisible) the line for that city. Clicking the text again should add (or make visible) the line for that city.

To get a B (85), your assignment must include:

  • The requirements to get a C and
  • Brushing: In addition to the previous functionality, add the ability to hover on the city text to brush that line. Specifically, hovering on a city name should bring that line to the front, and color all other lines in a light gray color. Un-hovering the text should restore the lines to their original colors. Note: Think about how hovering and filtering should work together! When you hover over a line that is filtered out, should it do anything?

To get an A (95), your assignment must include:

  • The requirements to get a B and
  • Zoom and Pan: Add the ability to pan and zoom using the mouse. You only need to zoom in the x-direction, and do not need to reposition the city names. See this example and the d3-zoom API documentation.

To get an A+ (100), your assignment must include:

  • The requirements to get an A and
  • Create another visualization with a different time-series dataset and all the above-mentioned interaction

Hint: It will be easier to do certain operations if you give your lines an ID. However, IDs may not contain spaces and should be unique. One way to do this is to use the first three letters of the city name. Try the following in the JavaScript console:

"San Francisco".substring(0, 3).toUpperCase();

Whatever you do, make sure it is consistent, so you can always figure out the appropriate ID from the city name.

Extra credit (5 points):

  • Details on Demand : Use a Voronoi tessellation to show the point and temperature label closed to the mouse. You will need to add these elements to the visualization first, before you can selectively hide and show these elements. Note: This is advanced functionality. See this example and the d3-voronoi API documentation.

Submitting the assignment



  • For every visualization, post a link to your Vizhub sketch (mark it private, invite the TA and me as collaborators) and test it out before posting a link to it on your own website.
  • Submit a link to your website on Canvas.