Final - Week 7-10

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

150,250 Start at (100, 200), center at cx=50, cy=50 with radius = 50, so 150 +/-50 and 250 +/- 50 are in the circle, but not inclusive, so not 100, 200.

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

A Boolean (true/false) function. 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? O A button is large to make it easier to mouse over. O A button calls a JavaScript function when pressed. O A button is colored yellow to draw attention to it. O A button appears raised to show it can be pressed.

A button appears raised to show it can be pressed.

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

A reference to the selection. Not a reference to THE rect element because this could be the first of many. 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? O A single scene with displayed annotations that highlight key data points. O A slide show with the ability to drill down into the details in each slide. O A slide show followed by free-form exploration. O A single scene with the ability to initiate a slide show from select points in the scene.

A single scene with the ability to initiate a slide show from select points in the scene.

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

A slide show followed by free-form exploration.

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

A slide show with the ability to drill down into the details in each slide.

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

A unique element in the web page

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

Annotations should be cleared when moving to a new scene.

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

As a compact description of user selected data items

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

D3 allows a web page to be accessed as a database.

"Which of these best explains the name of the "D3" library? O Data-Driven Documents - adding data to HTML elements O Desire, Decision, Determination - the formula for successful visualization O D3 is the opposite of 3D - because D3 focuses on 2-D visualization O The previous library was named D2

Data-Driven Documents - adding data to HTML elements

Which of the following is the first step of dialog design? O Decompose the task into individual user steps. O Study the way a person performs the task. O Determine whether the user or computer initiates interaction. O 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? O You should think of scenes as slides in a presentation. O Scenes should follow a template to keep the viewer oriented through transitions. O Scenes should follow a template to promote a consistent visual structure. O Each scene should contain a different kind of chart.

Each scene should contain a different kind of chart.

9. Which narrative layout relies on arrows for viewer navigation? O Partitioned poster O Flow chart O comic strip O Magazine

Flow chart

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

Here you can thing of inequalities as meaning to subtract the smaller from the larger. Here that is B - A, meaning everything in B except what is also in A, so 2, 3, 4 - 1, 2, 3 = 4 triangle, specifically (null, triangle). Why?

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

Interactive Visualization

Which is NOT a domain specific language? O Ellipsis O Vega O JavaScript O Vega-lite

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

"Which of the following streams would satisfy the following event grammar? [click, click] = mousemove O A double-click while the mouse is in motion O Two clicks, then a mousemove O A mouse move followed by two clicks O Aclick, a mouse move, and then another click "

O Aclick, a mouse move, 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.

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

O Node-to-node springs Week 8

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

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

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

O 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. (Week 8)

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

Parameters and triggers

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

Partitioned poster 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? O Study the way a person performs the task. O Decide what user interface elements should be used. O Determine whether the user or computer initiates interaction. O Decompose the task into individual user steps.

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

Task analysis is performed before dialog design.

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

The controller

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

The electrostatic force (Week 8)

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()? 1 function init() { 2 data = d3.csv("https://some.domain.io/file.csv"); 3 display(data); 4 } O 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. O The function d3.csv initiates the load of file.csv and sets an event to run on completion of that load. That way other events can be processed while waiting for the file to load. Once file.csv is loaded, then its contents are stored in the variable data and the next command, display(data), is executed. O d3.csv() initiates the process of loading file.csv but returns before the data is loaded. The function display O 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

The function keyword is not sandwiched between asyc and await so 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. If it were sandwiched this way, d3.csv would initiates the load of file.csv and sets an event to run on completion of that load so other events could be processed while waiting for the file to load. Once file.csv were loaded, its contents would be stored in the variable data and the next command, display(data), would be executed.

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

The radius 10 circle appears above the radius 20 circle. (x, y) = (0, 0) is at the upper left.

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

The runtime that translates the specification into a web page

In a collection of data points, which of the following best describe the Voronoi cell of a data point? O The set of points equidistant to the data point and a second nearby data point O The set of points on a line segment between the data point and a second nearby data point O The set of points closer to the data point than to any other data point O 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. Week 8

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

To help the viewer navigate the scene.

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

To keep the viewer from becoming disoriented.

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

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

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

Video

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

rect:click[X==1]

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

sel.enter() General Update Pattern: SDEA Select Data Enter Attr

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

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