CS 416 Final Exam Study Guide
Dialog Analysis
1. Determine how the user and computer will communicate 2. Choose display elements 3. Choose user interface widgets 4. Connect the actions to the widgets
Interactive Storytelling - Key Components
1. Presentations via interactive webpages 2. Narrative, using data to tell a story 3. Invites viewers to explore further 4. A medium for data journalism
Task Analysis
1. Study the way a person (not necessarily one using a computer) best competes a task 2, Decompose the task into individual user steps - actions 3. Results in a set of basic actions that may be shared among multiple tasks
Presentation Visualization - Key Components
1. Used for communication 2. Intended for large groups or mass audience 3. Does not support user input 4. Highly polished
Interactive Visualization - Key Components
1. Used for discovery 2. Intended for a single investigator or collaborators 3. Re-renders based on input 4. Prototype Quality
The code below uses setTimeout(function, time) which waits for time milliseconds and then adds a call to function to the event queue. So the statement setTimeout(timedout,0) instantly adds an event to the event queue to call timedout(). Given what you know about JavaScript execution, what will the following code output? function timedout() { console.log("timed out"); } setTimeout(timedout,0); for (i = 0; i < 10000000; i++); console.log("next statement"); A) next statement timed out B) timed out next statement C) Unknown because of a race condition D) Unknown because it depends on processor speed
A) next statement timed out Explanation: Even though the call to timeout() is instantly added to the event queue, the current code is run to completion, so "next statement" is output and then once the current code has completed, the next event in the queue will be processed and "timed out" will output
What is a predicate function? A) A Boolean (true/false) function B) A function used to build a more complex function C) A function that begins with a verb D) A function that halts execution if a variable is zero
A) A Boolean (true/false) function Explanation: A predicate is a Boolean function often used to classify items as possessing an attribute or belonging to a set
What is returned by the following D3 code? d3.select('rect').attr('height',42) A) A reference to the selection B) A reference to the rectangle elements C) A reference to the number 42 D) A reference to the height attribute
A) A reference to the selection Explanation: D3's attr() method returns a reference to the selection so that subsequent attr() methods can be added to further modify the selection, even if the selection is a single element
Which is NOT a recommendation on using annotations for narrative visualization? A) Annotations should be used to convey an author's message. B) Annotations should be used to highlight interesting data points in a scene. C) Annotations should be cleared when moving to a new scene. D) Annotations should follow a template to promote a consistent visual structure.
A) Annotations should be cleared when moving to a new scene. Explanation: Annotations can be built up in a sequence toward a conclusion.
What are "backing points" used for in Vega-Lite? A) As a compact description of user-selected data items B) As redundant copies of selected data items to support an undo command C) As a complete listing of every user-selected data item D) As the screen positions of the selected marks in a chart
A) As a compact description of user-selected data items Explanation: The backing points are used to describe user selected data items. They are compact, so that if a range of data items are selected, the backing points can just be the first and last data items of the selected range
Consider a web page that displays the fields of a database on the left, and allows the user to drag these fields onto a canvas to add them to a visualization. The web page starts with a blank canvas and gives no further instructions. Which mode of visualization best describes this web page? A) Interactive Visualization B) Interactive Storytelling C) Narrative Visualization D) Presentation Visualization
A) Interactive Visualization Explanation: This visualization does not contain a narrative component, so it would be used to investigate data to answer a user's question, but does not tell a specific story.
Which of these does Vega NOT treat as a database? A) The runtime that translates the specification into a web page B) The specification of the visualization C) The data to be visualized D) The web page showing the visualization
A) The runtime that translates the specification into a web page Explanation: The runtime in a JavaScript program that Vega uses to parse the specification and generate the web page of the visualization it describes
Which is the goal of a transition between scenes? A) To keep the viewer from becoming disoriented. B) To show as many scenes as possible. C) To hold the viewer's interest. D) To build drama.
A) To keep the viewer from becoming disoriented. Explanation: Transitions help users retain a sense of context as data or charts change from scene to scene in a narrative visualization
If the (key,value) pairs of database A are (1,red), (2,green), (3,blue) and database B are (2,circle), (3,rectangle), (4,triangle), then which value is in the antijoin A<B? A) Triangle B) Circle C) Red D) Blue
A) Triangle Explanation: The antijoin would be specifically (null,triangle).
Let sel = d3.selectAll('rect').data(1,2,3,4) If the web page was initialized with five rectangles, then which of the following is empty? A) sel.enter() B) sel.update() C) sel,exit() D) sel
A) sel.enter() Explanation: The Enter section would not have a corresponding element, since there are fewer data items than elements
Which of the following streams would satisfy the following event grammar? [click, click] > mousemove A) A doubleclick while the mouse is in motion B) A click, a mousemove, and then another click C) Two clicks, then a mousemove D) A mousemove followed by two clicks
B) A click, a mousemove, and then another click Explanation: The ">" symbol indicates prefiltering of the mousemove events, that they have to happen between the bracketed events preceding the ">" symbol.
Which of these scenarios best characterizes a martini glass structure? A) A slide show with the ability to drill down into the details in each slide. B) A slide show followed by free-form exploration. C) A single scene with displayed annotations that highlight key data points. D) A single scene with the ability to initiate a slide show from select points in the scene.
B) A slide show followed by free-form exploration. Explanation: The slide show is author-led content, corresponding to the stem, that leads to a more free-form exploration, which corresponds to the widening bowl
Which of these scenarios best characterizes an interactive slideshow structure? A) A slide show followed by free-form exploration. B) A slide show with the ability to drill down into the details in each slide. C) A single scene with displayed annotations that highlight key data points. D) A single scene with the ability to initiate a slide show from select points in the scene.
B) A slide show with the ability to drill down into the details in each slide. Explanation: An interactive slide show consists of a main author-led pathway, but allows the viewer to explore some side paths that can drill down into details in a slide, though these side paths are often also author-led.
Which is NOT a recommendation on using scenes in a narrative visualization? A) You should think of scenes as slides in a presentation. B) Each scene should contain a different kind of chart. C) Scenes should follow a template to keep the viewer oriented through transitions. D) Scenes should follow a template to promote a consistent visual structure.
B) Each scene should contain a different kind of chart. Explanation: A scene in a narrative visualization can consist of one or more charts, and these charts can be the same kind of chart, highlighting different aspects of the data.
In a force-directed graph layout, edges are represented by which physical simulation? A) Node-to-node gravitation B) Node-to-node springs C) Node-to-node electrostatics D) None of the above.
B) Node-to-node springs Explanation: The rest length of the spring is set to the ideal edge length
Which narrative layout is the most reader driven? A) Comic strip B) Partitioned poster C) Magazine D) Flow chart
B) Partitioned poster Explanation: A partitioned poster creates a structure that allows the viewer to work through its frames in an order determined by the viewer.
Events come from which element of the Model-View-Controller (MVC)? A) The view B) The controller C) The model D) The DOM
B) The controller Explanation: The controller is responsible for user input
Given the SVG code <circle x=100, y=100, r=10></circle><circle x=100,y=200,r=20></circle> Which is true? A) The radius 20 circle appears above the radius 10 circle B) The radius 10 circle appears above the radius 20 circle
B) The radius 10 circle appears above the radius 20 circle Explanation: In SVG, the origin js the upper left corner of the canvas, and positive y coordinates extend downward from the top of the canvas
Let sel = d3.selectAll('rect').data(1,2,3,4) If the web page was initialized with no rectangles, then the general update pattern states that the code should focus on which part of the selection? A) sel.update() B) sel.enter() C) sel,exit() D) sel
B) sel.enter() Explanation: The Enter section would contain (null,1), (null,2), (null,3), (null,4), and the general update pattern would add .append("rect") to associate a new rectangle element with each data item
Given the SVG code <g transform="translate(100,200)"><circle x=50, y=50, r=50></circle></g> Which point in the SVG canvas is in the circle? A) 50, 50 B) 100,200 C) 150, 250 D) 250, 150
C) 150, 250 Explanation: The center of the circle is at the sum of its x,y attributes plus the transformation amount (100, 200)
Which of the following best demonstrates the principle of affordance in user interface design? A) A button is large to make it easier to mouse over. B) A button calls a JavaScript function when pressed. C) A button appears raised to show it can be pressed. D) A button is colored yellow to draw attention to it.
C) A button appears raised to show it can be pressed. Explanation: An affordance is a hint in the appearance of an object to its function, and for a button, the fact that it appears raised implies that it can be depressed.
Which of the following is the first step of dialog design? A) Study the way a person performs the task. B) Decompose the task into individual user steps. C) Determine whether the user or computer initiates interaction. D) Decide what user interface elements should be used.
C) Determine whether the user or computer initiates interaction.
Which narrative layout relies on arrows for viewer navigation? A) Partitioned poster B) Magazine C) Flow chart D) Comic strip
C) Flow chart Explanation: A flow chart consists of elements (e.g., stages of a process), usually connected by arrows to establish a well-defined ordering of the elements.
Which is not a domain specific language? A) Vega B) Ellipsis C) JavaScript D) Vega-Lite
C) JavaScript Explanation: JavaScript is a general purpose language, though usually deployed in a web browser (or web server)
Which elements of narrative visualization do Vega signals support? A) Scenes and scene transitions B) Annotations and annotation templates C) Parameters and triggers D) Slides and slide templates
C) Parameters and triggers Explanation: Signals are variables and so are the parameters of a narrative visualization. These signal variables change their value due to events, which matches the definition of a trigger for narrative visualization
In a collection of data points, which of the following best describe the Voronoi cell of a data point? A) The set of points on a line segment between the data point and a second nearby data point B) The set of points in the convex hull of the other data points nearby the data point C) The set of points closer to the data point than to any other data point D) The set of points equidistant to the data point and a second nearby data point
C) The set of points closer to the data point than to any other data point
Which is the most declarative way to compute the sum of an array? A) Using a foreach method of an array, passed with a function that adds the numbers B) Writing a for loop to add the numbers together C) Using a sum method for the array D) Writing a while loop to add the numbers together
C) Using a sum method for the array Explanation: This is declarative because we are telling the computer what we want (the sum) and how to compute it
Which of these narrative layouts is the most linear, allowing the least viewer deviation from an author led path? A) Comic strip B) Magazine C) Video D) Partitioned poster
C) Video Explanation: Video provides very little opportunity for reader-driven re-ordering of the content, just play, pause, and rewind.
Which event grammar describes a click on a rectangle whose associated data value X = 1? A) rect[X == 1]: click B) [rect]click:X == 1 C) rect:click[X == 1] D) [X == 1] > rect:click
C) rect:click[X == 1] Explanation: The "rect:" predecessor requires the click event to occur on a rectangle, and the bracketed condition successor requires that X equals 1.
Let sel = d3.selectAll('rect').data(1,2,3,4) If the web page was initialized with three rectangles, then which of the following is empty? A) sel.enter() B) sel.update() C) sel,exit() D) sel
C) sel.exit() Explanation: The Exit section in this case would not contain any elements that did not have a corresponding data item, since there are more data items than elements
Which of these scenarios best characterizes a drill-down story structure? A) A slide show followed by free-form exploration. B) A slide show with the ability to drill down into the details in each slide. C) A single scene with displayed annotations that highlight key data points. D) A single scene with the ability to initiate a slide show from select points in the scene.
D) A single scene with the ability to initiate a slide show from select points in the scene. Explanation: These slide shows provide the ability to drill down into the details of the narrative visualization
The data method of D3 is designed to associate each data item with: A) A unique SVG canvas in the web page B) A unique section of JavaScript code in the web page C) A unique CSS style in the web page D) A unique element in the web page
D) A unique element in the web page Explanation: D3 joins data items with the SVG elements used to display them
Narrative data visualization is: A) Fun B) Complicated C) Scenes + Annotations + Parameters + Triggers D) All of the above
D) All of the above
Which of these is the most fundamental contribution of D3? A) D3 allows a web page to include vector graphics B) D3 allows a web page to display data visualization chart C) D3 allows a web page to be interactive D) D3 allows a web page to be accessed as a database
D) D3 allows a web page to be accessed as a database Explanation: D3's fundamental contribution is its select methods that query the elements of an HTML web page and join them with data
Which of these best explains the name of the "D3" library? A) The previous library was named D2 B) D3 is the opposite of 3D - because D3 focuses on 2-D visualization C) Desire, Decision, Determination - the formula for successful visualization D) Data-Driven Documents - adding data to HTML elements
D) Data-Driven-Documents adding data to HTML elements Explanation: D3 adds data to HTML
Which of the following is the first step of a task analysis? A) Decide what user interface elements should be used. B) Determine whether the user or computer initiates interaction. C) Decompose the task into individual user steps. D) Study the way a person performs the task.
D) Study the way a person performs the task
Which of the following is more correct about the processes of dialog design and task analysis in user interface design? A) Task analysis is performed concurrently with dialog design. B) Dialog design is performed independent of task analysis. C) Dialog design is performed before task analysis. D) Task analysis is performed before dialog design.
D) Task analysis is performed before dialog design
In a force-directed graph layout, which force keeps nodes from overlapping? A) The spring force B) The centering force C) The force of gravity D) The electrostatic force
D) The electrostatic force Explanation: The electrostatic force repels nodes away from each other
What is the primary goal of the visual structure of a scene? A) To make the scene attractive to the viewer. B) To encourage the viewer to interact with the data. C) To make the scene informative, D) To help the viewer navigate the scene.
D) To help the viewer navigate the scene. Explanation: The visual structure is designed to lead the viewer through the elements of the scene in a particular order.
Which of these best describes reactive programming? A) Programming that describes what happens instead of how it happens B) Programming where the computer initiates all interaction with the user C) Every programming instruction creates a reaction D) Values change only in response to discrete events
D) Values change only in response to discrete events Explanation: Reactive programming is programming in response to events, such that everything is implemented as a callback responding to an event, though the events are not always user-initiated, and can include clock ticks or "onload"
A) Key | Name 1 | apple 2 | pear 3 | banana B) Key | Name 2 | $4 3 | $3 4 | $2 5 | $1 What is A > B (anti join)
Name | Price apple | null
A) Key | Name 1 | apple 2 | pear 3 | banana B) Key | Name 2 | $4 3 | $3 4 | $2 5 | $1 What is B > A (anti join)
Name | Price null | $2 null | $1
A) Key | Name 1 | apple 2 | pear 3 | banana B) Key | Name 2 | $4 3 | $3 4 | $2 5 | $1 What is A >< B (natural join)
Name | Price pear | $4 banana | $3
Using D3 version 5, suppose we set up a web page with the html: <body onload="init()">...</body" and we have some previously declared function display(data) that renders a chart of the data. Which of the following best characterizes how a standard web browser executes the JavaScript code in the function init()? function init() { data = d3.csv("https://some.domain.io/file.csv"); display(data); }
d3.csv() initiates the process of loading file.csv but return before the data is loaded. The function display(data) may be called before data contains the contents of file.csv Explanation: In order for this to work, we would have needed to insert "async" before the "function init()" and "await" before "d3.csv" to ensure the data was loaded before display() was executed