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 2 : Introduction to Visualizing Amounts using P5 - (100 points)



Due date: 9/6/2022 at 11:59pm

For this assignment, choose the same dataset that you used for Assignment 1 and create representations in P5js that display one variable/attribute.

We will use Specifications Grading for subsequent assignments. Specifications grading is a form of grading where you choose what grade you want to get and do all the work necessary to complete the specifications for that assignment. For example, you may have to implement a single feature to get a C (75), two features to get a B (85), and three features to get an A (95).

To get a C (75) in this assignment, you must do the following:

  • Create a bar chart with axes, uniformly placed marks on the x- and y-axes, and labels for a single variable.
  • The data must be loaded in from a CSV file

To get a B (85) in this assignment, you must do the following:

  • Complete the requirements to get a C and
  • Create a dot plot for a single variable
  • The data must be loaded in from a CSV file

To get an A (95) in this assignment, you must do the following:

  • Complete the requirements to get a B and
  • Create a heatmap with a variable that allows aggregating data (such as rainfall for a single city across the entire year.) Display at least 7 rows in the heatmap. (See Figure 2.4 in the Fundamentals of Data Visualization (FDV) book for an example of a heatmap)

To get an A+ (100):

  • Complete all the requirements to get an A and
  • Use the log scale in one of your examples
  • Incorporate interaction in the form of tooltips for at least one of the visualizations

Extra credit



  • Add Annotations to draw the viewer's attention to a specific region of the chart (2 points per sketch)
  • Incorporate interaction in the form of tooltips for all the visualizations (3 points)

Submitting the assignment



  • For this assignment, create a personal website using GitHub Pages and post links to all your visualizations on it. You can use plain HTML, Jekyll-based themes, or a template for your website.
  • For every visualization sketch, you must:
    • add a link to the Vizhub project on your website
    • Add add our TA (bhumikasrc) and me (alark) as collaborators.
    • Mark your project as private till the grading is done. You can change the visibility of your project, but click on the Settings gear at the top right and then setting the "Visibility" to private.

Notes:

  • You will get no points for the assignment if your assignment does not meet the specifications for the visualization that you choose to implement. There is no partial credit.
  • Refer to Chapter 1 from FDV and check with the TA or me if you have any questions about your design.
  • You will get no points if the assignment is not hosted online