This assignment is a series of practice questions that you can use to help practice prepare for the final exam. It is optional and worth extra credit that will be added to your grade.

Please click here to create your repository

Instructions

Create a plain-text ASCII file, named answers.txt, and place it in the top-level directory of your git-repository. Do not submit PDF files, word documents, etc., we will not grade those.

After completing any questions you choose, commit and push this file, with answers formatted roughly like this:

CSC444 Data Visualization
Assignment 13
YOUR_NAME_HERE

1. This is the answer to the first question

2. This is the answer to the second question.

...

Questions

Questions will cover material for the entire course, as will the final exam as it is cumulative.

Mechanics

  1. HTML / CSS selections
    • Write a CSS selector for all elements of class node.
    • Write a CSS selector for all circle elements.
    • Write a CSS selector the element with ID main.
  2. SVG / Javascript
    • Write a JavaScript object with property names country and GDP, and property values "US" and 16.77.
    • Write an SVG line element that goes from point \((0, 0)\) to \((200, 200)\) and is drawn in blue.
    • Without using d3, write a JavaScript snippet to create a div element, store it in the global variable element, set its CSS class to title, and its content to "This is a title".
  3. d3 practice
    • Write a d3 expression that selects the element with id main, appends an svg element, and sets its width and height to 300.
    • Write a single d3 expression that appends a rect element for each value in the global variable data (which holds a JavaScript array), and binds each rect element to each item of data.
  4. Scales
    • You have a variable scale that was initialized as follows: 
      scale = d3.scaleLinear().domain([0, 10]).range([200, 300])

      What’s the result of scale(3), scale(5), scale(10), and scale(15)?

    • You have a variable scale that was initialized as follows: 
      scale = d3.scaleLinear()
 .domain([0, 10])
 .range(["translate(0, 200)", "translate(200, 0)"])

      What’s the result of scale(5), scale(-5), and scale(20)?

Principles

  1. Which of the following color spaces is more appropriate for designing a color picker user-interface widget in a visualization, and why? (a) RGB (b) CMYK (c) HSV (d) Lab

  2. If you had to choose a single color channel to use in a colormap for categorical data, which is the best one, and why? (a) Hue (b) Saturation (c) Luminance

  3. What’s the difference between separable and integral visual channel pairs?

  4. Explain both the expressiveness and effectiveness principle.

  5. Shneiderman’s “Visual information seeking mantra” is “Overview first, zoom and filter, then details-on-demand”. Explain each of the three components.

Techniques

  1. The typical practice in visualization is to fix the width and height of the plot ahead of time. When plotting time series, describe why fixing the widths and heights of the plot might be ineffective.

  2. Explain what a “small multiples” view is. Describe an example visualization that makes use of small multiples.

  3. Give one advantage and one disadvantages for choosing scatterplot matrices instead of parallel coordinates plots.

  4. What is a streamgraph? Explain the type of data it might be appropriate for. Compare streamgraphs to stacked bar charts.

  5. Given graph data, describe an example task that is harder to complete on an adjacency matrix based visualization as opposed to a node-link diagram.

  6. Describe the main forces in the standard force-directed layout of undirected graphs.

  7. Describe the case table for Marching Triangles, a two-dimensional variant of Marching Cubes for triangulated data. Explain any ambiguous cases, if they exist, and if they do not exist explain why.

  8. Explain what a transfer function is and how it is used by a volume renderer

  9. Give one reason to prefer a glyph-based visualization of a vector field over a geometry (streamline/pathline) based. Give one reason to prefer the geometry-based method.

Submission

You should use git to submit all source code files. The expectation for this and future assignments is any code you submit will be graded by cloning your repo and then executing it within a modern browser (Chrome, Firefox, etc.)

All that is necessary for this assignment is a single file within the repository, answers.txt

Grading

Deductions

None. There are no wrong answers. This assignment is not eligible to submit late.

Point Breakdown

We will grade this based on how many questions you complete rather than if they are correct or incorrect. Completing all questions is worth a maximum of 2% extra credit.

Cumulative Relationship to Final Grade

Worth 0% of your final grade, this assignment is purely extra credit on top of the other graded components in the course.