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 3 - Introduction to Visualizing Distributions using P5 - (100 points)



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

For this assignment, pick one of the variables/attributes from a CSV file from one of data repos from assignment 1 to create the following charts in P5:

Here are the specifications for grading: 

To get a C (75)

  • It must include an implementation of a histogram for any one variable in the data that displays the distribution of that variable.
  • The histogram must have labeled axes (x- and y-).
  • The histogram must have a faint background grid to help the viewer read the chart.
  • The data must be loaded in from a CSV file and it must work on Vizhub. Note: The CSV file must be less than 1MB in size. Edit it to remove all the columns that you do not need for your sketch.

To get a B (85)

  • Complete the requirements to get a C and 
  • Implement a box plot for a different variable from the same CSV file
  • The box plot must display the min, 1st quartile, median, 3rd quartile, and maximum value
  • The data must be loaded in from a CSV file and it must work on Vizhub.

To get an A (95) 

  • Complete the requirements to get a B and 
  • Implement a strip chart of another variable from the CSV file to display the distribution along the y-axis
  • The strip chart must contain jittering to reduce overlap. Hint: Consider using the random() function in P5 for this.

To get an A+ (100)

  • Complete the requirement to get an A and
  • Identify and highlight all outliers for the box plot
  • Implement interactive tooltips for the histogram. Provide tooltips to the user, so they can examine the values under the mouse pointer.Look at the interaction and input categories on the P5 examples page.

Extra Credit:

  • Implement interactive tooltips for all the three charts. Provide tooltips to the user, so they can examine the values under the mouse pointer. Look at the interaction and input categories on the P5 examples page. (5 points)
  • Implement an Empirical cumulative distribution function. Pick a variable attribute from the data and create an ECDF chart for it. (5 points)

Similar to Assignment 3, please submit a link to your webpage that has links to the individual charts (one Vizhub per visualization).

Submitting the assignment



  • For this assignment, post links to all your visualizations on your website.
  • Submit a link to your website on Canvas.