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 4 - Introduction to D3 - (100 points)



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

    For this assignment, choose one of datasets that you have already used in the previous assignments and make the following charts in D3. D3js is a very powerful visualization library that is used for many interactive visualizations online. The D3 examples gallery is a great starting point to learn.

    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 (Bar chart in D3, Heatmap in D3, etc.)

    Here are the specifications for this assignment:

    To get a C (75):

    • Create a bar chart with axes and uniformly placed marks on the x- and y-axes, and data labels on each bar for a single variable
    • The x- and y-axes must have 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
    • Create a scatter plot with axes, marks for two variables, and labels for the x- and y-axis
    • The chart must have a descriptive title
    • Load the data from a CSV file

    To get an A(95):

    • Complete the requirements for a B and
    • Create a heatmap or a boxplot for a single variable.
    • Display at least 5 cities if you choose to implement the heatmap.
    • Hint: Use built-in d3 functions for aggregation.
    • Load the data from a CSV file

    To get an A+ (100):

    • Complete the requirements for an A and
    • Create a histogram for an attribute that displays the distribution of that variable
    • Load the data from a CSV file
    • Incorporate interaction in the form of tooltips for any one of the visualizations

    Extra credit:

    • Create a bar chart (from a CSV file) that uses the log scale (2 points)
    • Incorporate interaction in the form of tooltips for all the visualizations (5 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 lose points 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.