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 8 - Graph Visualization in D3 - (100 points)



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

For this assignment you will create network visualizations using the force-directed layout for node-link diagrams and the adjacency matrix.

Here are the specifications for the assignment.

To get a C (75) do the following:

  • Download any dataset from http://networkrepository.com/soc.php. Hint:Start with a small dataset.
  • Convert it to a CSV file. Note: Process the data in whatever format using any tools you like. Feel free to split up the file if necessary.
  • Use D3 to display a node-link diagram with force-directed layout for the dataset.

To get a B (85) do the following:

  • Complete the requirements to get a C and
  • Implement basic hovering for the node-link diagram such that the node shows the value for that node on hover.
  • Generate an adjacency matrix representation of the same data using d3. Implement basic interaction such as hover for the adjacency matrix.

To get an A (95) do the following:

To get an A+ (100) do the following:

  • Complete the requirements to get an A and
  • Allow the user to modulate the amount/tension of edge bundling with a slider.
  • Create a node-link diagram (force-directed) and an adjacency matrix for another dataset from the Stanford Large Network dataset collection

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.