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 5 - Multidimensional Visualization in D3 - (100 points)



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

    For this assignment, choose a dataset and make the following charts in D3.

    Create a separate Vizhub for every visualization and post the links on your website. Submit a link to your website. Make sure to name your Vizhub appropriately (Bubble chart in D3, Line chart in D3, Scatter plot matrix in D3, etc.)

    Here are the specifications for this assignment:

    To get a C (75):

    • Implement a bubble chart with color to visualize four dimensions represented using the x-axis, the y-axis, the size of the circle, and the color of the circle.
    • The chart must have a x- and a y-axis with axis labels
    • The chart must have a descriptive title
    • The data must be loaded from a CSV file

    To get a B (85):

    • Complete the requirements for a C and
    • Implement a line chart with time on the x-axis
    • The axes in the chart must have the appropriate number of ticks and axis labels
    • The data must be loaded from a CSV file

    To get an A(95):

    • Complete the requirements for a B and
    • Implement a scatterplot matrix for multiple variables.
    • Display at least a 3x3 matrix in the scatterplot matrix
    • The data must be loaded from a CSV file

    To get an A+ (100):

    • Complete the requirements for an A and
    • For the bubble chart, allow a viewer to learn about a specific data element by showing them a tooltip on mouse hover
    • For the line chart, display at least 3 or more lines in the same chart

    Extra credit:

    • Add a color and shape legend to the bubble chart using d3-legend(2 points)
    • Implement tooltips for the line chart on hover for individual points in the chart (2 points)
    • Highlight the matrix cell based on mouse position for the scatterplot matrix (2 points)
    • For categorical variables, allow filtering by clicking on the value of the variable (For example, if there are three regions of origin for cars - Japan, USA, Europe, then clicking on Europe, should only show the data for cars manufactured in Europe). (3 points)

    Notes:

    • There are many d3 examples online. If you use parts of an example or refer to one for your assignment, please make sure to mention that in the code very clearly. You will get a 0 on the entire assignment, if you do not cite your references.
    • Points will be deducted for bad/wrong chart design. Refer to Chapter 1 and/or check with us if you have any questions about your design.
    • You will get a zero (0) if you do not read data from a CSV file.

    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.