CS 416: Data Viz - Final Exam

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? 50, 50 100, 200 150, 250 250, 150

150, 250 Correct! The center of the circle is at the sum of its x,y attributes plus the transformation amount (100,200).

What is a predicate function? A Boolean (true/false) function A function used to build a more complex function A function that halts execution if a variable is zero A function that begins with a verb

A Boolean (true/false) function Correct! A predicate is a Boolean function often used to classify items as possessing an attribute or belonging to a set.

Which of the following best demonstrates the principle of affordance in user interface design? A button is colored yellow to draw attention to it. A button calls a JavaScript function when pressed. A button is large to make it easier to mouse over. A button appears raised to show it can be pressed.

A button appears raised to show it can be pressed. Correct! 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 streams would satisfy the following event grammar? [click, click] > mousemove A doubleclick while the mouse is in motion Two clicks, then a mousemove A mousemove followed by two clicks A click, a mousemove, and then another click

A click, a mousemove, and then another click Correct! The ">" symbol indicates prefiltering of the mousemove events, that they have to happen between the bracketed events preceding the ">" symbol.

Which is returned by the following D3 code? d3.select('rect').attr('height',42)? A reference to the rectangle element A reference to the number 42 A reference to the selection A reference to the height attribute

A reference to the selection Correct! 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 of these scenarios best characterizes a drill-down story structure? A single scene with displayed annotations that highlight key data points. A single scene with the ability to initiate a slide show from select points in the scene. A slide show followed by free-form exploration. A slide show with the ability to drill down into the details in each slide.

A single scene with the ability to initiate a slide show from select points in the scene. Correct! These slide shows provide the ability to drill down into the details of the narrative visualization.

Which of these scenarios best characterizes a martini glass structure? A single scene with the ability to initiate a slide show from select points in the scene. A slide show followed by free-form exploration. A single scene with displayed annotations that highlight key data points. A slide show with the ability to drill down into the details in each slide.

A slide show followed by free-form exploration. Correct! 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 single scene with the ability to initiate a slide show from select points in the scene. A slide show followed by free-form exploration. A single scene with displayed annotations that highlight key data points. A slide show with the ability to drill down into the details in each slide.

A slide show with the ability to drill down into the details in each slide. Correct! 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.

The data method of D3 is designed to associate each data item with: A unique CSS style in the web page A unique section of JavaScript code in the web page A unique SVG canvas in the web page. A unique element in the web page

A unique element in the web page Correct! D3 joins data items with the SVG elements used to display them.

Narrative data visualization is: Fun Complicated Scenes + Annotations + Parameters + Triggers All of the above

All of the above

Which is NOT a recommendation on using annotations for narrative visualization? Annotations should follow a template to promote a consistent visual structure. Annotations should be cleared when moving to a new scene. Annotations should be used to highlight interesting data points in a scene. Annotations should be used to convey an author's message.

Annotations should be cleared when moving to a new scene. Correct! Annotations can be built up in a sequence toward a conclusion.

What are "backing points" used for in Vega-Lite? As a complete listing of every user selected data item As a compact description of user selected data items As the screen positions of the selected marks in a chart As redundant copies of selected data items to support an undo command

As a compact description of user selected data items Correct! 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.

Which of these is the most fundamental contribution of D3? D3 allows a web page to include vector graphics. D3 allows a web page to display a data visualization chart. D3 allows a web page to be interactive. D3 allows a web page to be accessed as a database.

D3 allows a web page to be accessed as a database. Correct! 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? The previous library was named D2 Data-Driven Documents - adding data to HTML elements Desire, Decision, Determination - the formula for successful visualization D3 is the opposite of 3D - because D3 focuses on 2-D visualization

Data-Driven Documents - adding data to HTML elements

Which of the following is the first step of dialog design? Determine whether the user or computer initiates interaction. Decompose the task into individual user steps. Study the way a person performs the task. Decide what user interface elements should be used.

Determine whether the user or computer initiates interaction.

Which is NOT a recommendation on using scenes in a narrative visualization? Scenes should follow a template to keep the viewer oriented through transitions. You should think of scenes as slides in a presentation. Scenes should follow a template to promote a consistent visual structure. Each scene should contain a different kind of chart.

Each scene should contain a different kind of chart. Correct! 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.

Which narrative layout relies on arrows for viewer navigation? Comic strip Magazine Partitioned poster Flow chart

Flow chart Correct! 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.

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? Narrative Visualization Interactive Visualization Interactive Storytelling Presentation Visualization

Interactive Visualization 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 is NOT a domain specific language? Ellipsis JavaScript Vega-Lite Vega

JavaScript Correct! JavaScript is a general purpose language, though usually deployed in a web browser (or web server).

In a force-directed graph layout, edges are represented by which physical simulation? Node-to-node gravitation Node-to-node springs Node-to-node electrostatics None of the above.

Node-to-node springs Correct! The rest length of the spring is set to the ideal edge length.

Which elements of narrative visualization do Vega signals support? Parameters and triggers Slides and slide templates Scenes and scene transitions Annotations and annotation templates

Parameters and triggers Correct! 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.

Which narrative layout is the most reader driven? Flow chart Partitioned poster Magazine Comic strip

Partitioned poster Correct! A partitioned poster creates a structure that allows the viewer to work through its frames in an order determined by the viewer.

Which of the following is the first step of a task analysis? Determine whether the user or computer initiates interaction. Decompose the task into individual user steps. Decide what user interface elements should be used. Study the way a person performs the task.

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? Dialog design is performed independent of task analysis. Task analysis is performed concurrently with dialog design. Dialog design is performed before task analysis. Task analysis is performed before dialog design.

Task analysis is performed before dialog design.

Events come from which element of the Model-View-Controller (MVC)? The controller The view The DOM The model

The controller

In a force-directed graph layout, which force keeps nodes from overlapping? The spring force The electrostatic force The force of gravity The centering force

The electrostatic force Correct! The electrostatic force repels nodes away from each other.

Given the SVG code <circle x=100, y=100, r=10></circle><circle x=100, y=200, r=20></circle> Which is true? The radius 20 circle appears above the radius 10 circle. The radius 10 circle appears above the radius 20 circle.

The radius 10 circle appears above the radius 20 circle. Correct! In SVG, the origin is the upper left corner of the canvas, and positive y coordinates extend downward from the top of the canvas.

Which of these does Vega NOT treat as a database? The runtime that translates the specification into a web page The data to be visualized The specification of the visualization The web page showing the visualization

The runtime that translates the specification into a web page Correct! The runtime is a JavaScript program that Vega uses to parse the specification and generate the web page of the visualization it describes.

In a collection of data points, which of the following best describe the Voronoi cell of a data point? The set of points equidistant to the data point and a second nearby data point The set of points closer to the data point than to any other data point The set of points on a line segment between the data point and a second nearby data point The set of points in the convex hull of the other data points nearby the data point

The set of points closer to the data point than to any other data point

What is the primary goal of the visual structure of a scene? To encourage the viewer to interact with the data. To make the scene informative, To make the scene attractive to the viewer. To help the viewer navigate the scene.

To help the viewer navigate the scene. Correct! The visual structure is designed to lead the viewer through the elements of the scene in a particular order.

Which is the goal of a transition between scenes? To hold the viewer's interest. To keep the viewer from becoming disoriented. To build drama. To show as many scenes as possible.

To keep the viewer from becoming disoriented. Correct! Transitions help users retain a sense of context as data or charts change from scene to scene in a narrative visualization.

Which is the most declarative way to compute the sum of an array? Using a sum method for the array Writing a for loop to add the numbers together Writing a while loop to add the numbers together Using a foreach method of an array, passed with a function that adds the numbers

Using a sum method for the array Correct! This is declarative because we are telling the computer what we want (the sum) and not how to compute it.

Which of these best describes reactive programming? Values change only in response to discrete events Programming that describes what happens instead of how it happens Every programming instruction creates a reaction Programming where the computer initiates all interaction with the user

Values change only in response to discrete events Correct! 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."

Which of these narrative layouts is the most linear, allowing the least viewer deviation from an author led path? Partitioned poster Video Magazine Comic strip

Video Correct! Video provides very little opportunity for reader-driven re-ordering of the content, just play, pause, and rewind.

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()? functon init() { data = d3.csv("https://some.domain.io/file.csv"); display(data); } The functions d3.csv() and display() are run simultaneously as parallel threads, so the variable data passed to display() won't have been loaded with the contents of file.csv at the time display is called. d3.csv() initiates the process of loading file.csv but returns before the data is loaded. The function display(data) may be called before data contains the contents of file.csv. The function d3.csv() initiates the load of file.csv and sets an event to be run upon completion of that load. That way other events can be processed while waiting for file.csv to be loaded. Once file.csv is loaded, then its contents are stored in the variable data and the next command, display(data), is executed. The function d3.csv returns a Promise which prevents display() from running until the promise has been fulfilled and the data has been loaded from file.csv, returned and stored in the variable data.

d3.csv() initiates the process of loading file.csv but returns before the data is loaded. The function display(data) may be called before data contains the contents of file.csv. In order for this to work, we would have needed to insert "async" before "function init()" and "await" before "d3.csv" to ensure the data was loaded before display() was executed.

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 < 1000000000; i++); console.log("next statement"); Unknown, because of a race condition next statement timed out timed out next statement Unknown, becuase it depends on processor speed.

next statement timed out Even though the call to timedout() 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 be output.

Which event grammar describes a click on a rectangle whose associated data value X = 1? [rect]click:X == 1 rect:click[X == 1] [X == 1] > rect:click rect[X == 1]: click

rect:click[X == 1] Correct! The "rect:" predecessor requires the click event to occur on a rectangle, and the bracketed condition successor requires that X equals 1.

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? triangle blue circle red

red Correct! The antijoin would be specifically (red,null).

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? sel sel.update() sel.exit() sel.enter()

sel.enter()

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? sel.exit() sel.enter() sel.update() sel

sel.exit() Correct! 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.