Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

GUI > Midterm 2 > Flashcards

Midterm 2 Flashcards

1
Q

What is computer graphics?

A

The science and art of communicating visually via a computer’s display and its interaction devices

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What are the combining models to to produce a representation of a particular view of the scene: (4)

A

Model of objects
Model of the light
Geometric model
Mathematical model

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Why Computer Graphics?

A
  • better set of tools for plotting curves and presenting data they encounter in studies or work.
  • to write computer-animated games, new medium for artistic expression.
  • to be more productive, communicate ideas better, and computer graphics can be a great help.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Types of Visualization

A

*Scientific Visualization: the use of interactive visual representations of scientific data, typically physically based, to amplify cognition.
*Information Visualization: the use of interactive visual representations of abstract, non-physically based data to amplify cognition.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

how do we use visualization? (FICGU)

A

*Form a mental image or vision
*Imagine or remember as if actually seeing
*Construct a visual image in the mind
*Graphical representation of data or concepts
*Use computer supported, interactive, visual representations of data to amplify cognition

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

draw the stages of visualization

A

slide 7

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

the stages of visualization (CPMH)

A

*collection and storage of data
*Preprocessing / transforming the data into something that is easier to manipulate
*Mapping from the selected data to a visual representation
*human perceptual and cognitive system (the perceiver)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Information Visualization User Tasks (OZFDRHE)

A

*Overview: provide an overview of the entire collection of data.
*Zoom: drill down from the abstract view to the detail view (items of interest).
*Filter: eliminate unnecessary or unimportant details.
*Details on Demand: select of an item or group and retrieve, as needed,
additional information.
*Relate: view relationships among items.
*History: maintain a history of actions to support undo, replay and refinement.
*Extract: extraction of sub-collections and query parameters.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

The four basic dataset types

A

tables, networks, fields, and geometry

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

the five data types

A

items, attributes, links, positions, and grids.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

types of an attribute

A

categorical or ordered, with a further split into
ordinal and quantitative.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

ordering direction of attributes

A

can be sequential, diverging, or cyclic.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

GUI component (widget)

A

element that displays an information
arrangement changeable by the user
provides a single interaction point for a given kind of data.
*basic visual building blocks which, combined in an application, hold all the data processed by the application and the available interactions on this data.
*To appear onscreen, must be part of a containment
hierarchy, a tree of components that has a top-level
container as its root.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

layout manager

A

determines the size and position of the components within a
container.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

GUI framework

A

uses computer graphics to display individual GUI components
and the overall GUI.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

support classes for graphics

A

§Canvas: provides a rectangular area where drawing takes place.
§Graphics context: maintains the state (attributes) for drawing:
o The attribute values are implicitly used for drawing operations.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

how is support for graphics provided?

A

§Wrapper classes for an existing graphics library (e.g., OpenGL).
§Custom framework classes and services.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

what do support classes usually include?

A

§Canvas: provides a rectangular area where drawing takes place.
§Graphics context: maintains the state (attributes) for drawing:
o The attribute values are implicitly used for drawing operations.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Low level graphics libraries

A

(OpenGL) the basic drawing shapes are
points, lines, and triangles.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Evolution of 2D Graphics Platform (FDSP)

A

from immediate mode to retained mode
Drawing primitives instead of individual pixels.
State information.
Physical and abstract coordinate systems.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

draw the evolution of 2d graphics

A

slide 13
integer pixel coordinates -> GUI PLATFORMS ( floating point coordinates -> templates and reusability ->layout managers and smart controls )

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

draw the graphics pipeline

A

slide 14

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

color

A

the sensation that arises when our eyes are presented with different
spectral mixes of light
Color is a perceptual phenomenon; spectral distributions are physical
phenomena.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

how is the eye logarithmic?

A

Each time you double the light energy
(without altering the spectral distribution) arriving at your eye, the brightness that
you perceive will increase by the same amount.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Three-color Theory

A

*Human visual system has two types of sensors.
* Rods: monochromatic, night vision.
* Cones:
Color sensitive.
Three types of cones.
Only three values (the tristimulus values) are sent to the brain.
Need only match these three values:
Need only three primary colors.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

color space

A

an abstract mathematical model describing the
range of colors as tuple of numbers, or color components

examples:
§RGB: red, green, and blue.
§HSL: hue, saturation, and lightness.
§HSV: hue, saturation, and value.
§CMYK: cyan, magenta, yellow, and black.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Additive color

A

§Form a color by adding amounts of three primaries.
§LCDs, projection systems, positive film.
§Primaries are Red (R), Green (G), Blue (B).
§Transparency could be added as the fourth component.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

Subtractive color

A

§Form a color by filtering white light with cyan (C), Magenta (M), and Yellow (Y) filters
o Light-material interactions.
o Printing.
o Negative film.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

Commonly Used Types of Data Visualizations (ADPXGU)

A

*Amounts
*Distributions
*Proportions
*x-y relationships
*Geospatial data
*Uncertainty

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

Amounts

A

*The most common approach to visualizing amounts (i.e., numerical values shown for some set of categories) is using bars, either vertically or horizontally
arranged.
*We can also use dots at the location where the corresponding bar would end.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

Distributions

A

*Histograms (binning the data) and density plots (data probability distribution)
provide the most intuitive visualizations of a distribution, but both require arbitrary parameter choices and can be misleading.
*Cumulative densities and quantile-quantile (q-q) plots always represent the data faithfully but can be more difficult to interpret.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

Proportions

A

*Pie chart: emphasizes that the individual parts add up to a whole and highlight
simple fractions.
*Bars: easily compared in side-by-side bars.
*Stacked bars: useful when comparing multiple sets of proportions.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

x-yRelationships

A

*Scatterplot: shows one quantitative variable relative to another.
*Bubble chart: dot size represents the third variable.
*Paired scatterplot: the variables along the xand yaxes are measured in the
same units.
*Slopegraph: paired points connected by straight lines.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

Geospatial Data

A

*Map: takes coordinates on the globe and projects them onto a flat surface.
*Choropleth: coloring regions in the map according to the data.
*Cartogram: distort the regions according to data.
*Cartogram Heatmap: simplify each region in a cartogram into a square.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

Uncertainty

A

*Error bars: indicate the range of likely values for some estimate or measurement
(horizontally and/or vertically).
*Graded error bars: multiple ranges at the same time, where each range
corresponds to a different degree of confidence.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

Coordinated Multiple Views

A

*The analysis and assessment of complex, multi-dimensional data is a challenge:
§We need multiple perspectives/views of the same data.
*The views/plots/charts can be coordinated or articulated within a
Coordinated Multiple Views (CMV) tool.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

Linking

A

helps us show how a point, or set of points, behaves in each of the views.
*This is accomplished by selecting/highlighting/emphasizing these points:
§For example, the selected points could be drawn as a filled circle while the remaining
points could be drawn as unfilled circles.
§A typical application of this would be to show how an outlier shows up in each of the
individual pairwise plots.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

Brushing

A

selecting a subset of the data points with an input device
(interactions technique).
*Brushing extends the concept of linking a bit further.
*The points to be highlighted are interactively selected (e.g., by a mouse) and all
views are dynamically updated (ideally in real time):
*Selecting a region of points in one view results in those points reflected in the
other views.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

Right-handed coordinate system

A

§The positive x-axis is to right.
§The positive y-axis is up.
§The positive z-axis is backwards.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

Transformations

A

*Transformations are used to scale, translate, rotate, reflect and shear shapes
and objects.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

Homogenous Coordinates

A

Homogenous coordinates define a point in a plane using three coordinates
instead of two.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

Windows and Viewports

A

*We use natural coordinates for what we are drawing (the world window).
*A graphics library converts our coordinates to screen coordinates when we set
up a screen window and a viewport.
*The viewport may be smaller than the screen window.
*The default viewport is the entire screen window.
*The conversion requires scaling and shifting: mapping the world window to the
screen window and the viewport.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

Scalable Vector Graphics (SVG)

A

*SVG is an image that is text-based.
*Provides high quality, scalable, graphics on the web.
*Has a similar structure to HTML.
*Is a DOM object.
*Properties can be specified as attributes.
*Uses absolute positions.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

Scalable

A

supports different display resolutions, so that for example printed
output uses the full resolution of the printer and can be displayed on screens of
different resolutions.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

Vector

A

contains geometric objects, such as lines and curves, providing greater
flexibility compared to raster-only formats (such as PNG and JPEG) which have
to store information for every pixel of the graphic.

46
Q

Graphics

A

provides a rich, structured description of vector and mixed
vector/raster graphics; it can be used stand-alone, or with other standards.

47
Q

3 fundamental types of graphics elements supported by SVG

A

§Shapes, which represent some combination of straight line and curves.
§Text, which represents some combination of character glyphs.
§Raster images, which represent an array of values that specify the paint color and
opacity (often termed alpha) at a series of points on a rectangular grid.

48
Q

Drawing Order

A

*There are no “layers” and no real concept of depth.
*No support for CSS’s z-index property, so shapes can
be arranged only within the two-dimensional x, y plane.
*The order in which elements are coded determines their
depth order.

49
Q

g element

A

used to group several basic shapes
together.

50
Q

svg element

A

contains several basic shapes that build a graphic together
a drawing canvas for SVG drawings
Visual elements are included within the svg element.

51
Q

viewBox

A

attribute that allows you to specify that a given set of graphics stretch
to fit a particular container element.
The value is a list of four numbers min-x, min-y, width and height,
separated by whitespace and/or a comma, which specify a rectangle in user
space which should be mapped to the bounds of the viewport established by the
given element, taking into account aspect ratio.

52
Q

Paths

A

*Create complex shapes by combining multiple straight lines or curved lines.
*The shape of a path element is defined by one attribute, d.
§The d attribute contains a series of commands and parameters used by those
commands.

53
Q

OpenGL

A

stands for Open Graphics Library: a specification of an API for
rendering graphics, usually in 3D.
a low-level graphics API that provides direct access to graphics
hardware features.
not platform-specific
only deals with rendering graphics.

54
Q

OpenGL Pipeline

A

*Application sends vertex and image data, configuration and state changes, and
rendering commands to OpenGL.
§Vertices are processed, assembled into primitives, and rasterized into fragments.
§Each fragment is calculated and merged into the frame buffer.
*The pipeline model is useful for identifying exactly what work application must perform
to generate the results.
§OpenGL allows customization of each stage of the graphics pipeline through
customized shader programs.
*Usually, each pipeline stage can act in parallel with the others.
§If any one pipeline stage performs too much work, then the other stages sit idle
waiting for it to complete.
§Design should balance the work performed in each pipeline stage to the capabilities
of the renderer.

55
Q

draw the webgl pipeline

A

slide 50

56
Q

Vertex Shader

A

implements a general-purpose programmable method for
operating on vertices

57
Q

Fragment Shader

A

implements a general-purpose programmable method for
operating on fragments (pixels)

58
Q

Normalized Device Coordinates (NDC)

A

OpenGL expects all the visible vertices to be in normalized device coordinates.
§The x, y and z coordinates of each vertex should be between -1.0 and 1.0 when
processed by a vertex shader.
§Coordinates outside this range will not be visible.

59
Q

five coordinate systems (LWVCS)

A

§Local space (or object/model space)
§World space
§View space (or eye/camera space)
§Clip space
§Screen space

60
Q

D3

A

*D3: Data-Driven Documents
*Created by Mike Bostock in 2011
*D3.js is an open source, lightweight JavaScript library for manipulating web
documents and creating custom interactive data based web visualizations,
without predefined forms or specific visualization features:

61
Q

features of d3

A

*Data driven
*Based on web standards
*Support for DOM manipulation
*Dynamic properties
*Dynamic, data driven, element creation and manipulation
*Custom visualizations, no pre-defined formats
*Interactions, animations, and transitions

62
Q

Data Binding Functions

A

*data: binds elements to data.
*join: enters/updates/exits elements based on data.
*enter: gets the enter selection (data missing elements).
*exit: gets the exit selection (elements missing data).
*datum: gets or set element data (without joining).

63
Q

what does calling data do

A

Calling data creates three arrays:
§enter(data without corresponding DOM elements).
§update(DOM elements mapped to data).
§exit(DOM elements now missing data).

64
Q

Functions for converting associative arrays (objects) to arrays:

A

§keys: list the keys of an associative array.
§values: list the values of an associated array.
§entries: list the key-value entries of an associative array.

65
Q

Scatter plot

A

a graph in which the values of two variables are plotted along two
axes, the pattern of the resulting points revealing any correlation present

66
Q

MVC of a scatter plot

A

*Data (model):
§An array of 2D points (x, y coordinates).
§A point is represented as a JavaScript object with two properties, x and y.
*Data processing (controller):
§Preprocess data, as needed, to passed to the view.
*Visualization (view):
§Draw and label the x- and y-axes
§Draw scatter points on the graph.

67
Q

Chart

A

efers to any flat layout of data in a graphical manner
*The datapoints, which can be individual values or objects in arrays, may contain
categorical, quantitative, topological, or unstructured data.
*All charts consist of several graphical elements that are drawn or derived from
the dataset being represented.
*These graphical elements may be:
§Graphical primitives, like circles or rectangles.
§More complex, multipart, graphical objects like the boxplot.
§Supplemental pieces like axes and labels.

68
Q

chart creation process

A

*Creating and formatting axis components.
*Creating legends.
*Using line and area generators for charts.
*Creating complex shapes consisting of multiple types of SVG elements.

69
Q

Generators

A

take data and return the SVG drawing code to create a graphical
object based on that data

70
Q

Components

A

create an entire set of graphical objects necessary for a particular
chart component.

71
Q

Layouts

A

take in one or more arrays of data, and sometimes generators, and
append attributes to the data necessary to draw it in certain positions or sizes,
either statically or dynamically.

72
Q

Data Layouts

A

When a dataset is associated with a layout, each of the objects in the dataset
has attributes that allow for drawing the data.

73
Q

Layout

A

a function that modifies a dataset for graphical representation.
§A layout encapsulates a strategy for laying out data elements visually, relative to
each other.
§Examples: histogram, pie chart, stack, Sankey, word cloud.

74
Q

stages of creating layouts

A

*Design: default arrangement, user defined parameters, resizing and size
definition.
*Implementation: initialization, getter/setter functions, data processing, elements
positioning.
*Testing: using data sets of various sizes to check visual appearances.
*Extending: providing additional functionality and customization.

75
Q

how can you make your code more reusable?

A

layouts and components.
§Components create graphical elements, like the axis component.
§Layouts decorate data for the purpose of drawing, like the pie chart layout.

76
Q

how do we bind a listener to a DOM element (D3)

A

on(type, listener, capture);
§The first parameter is an event type as string such as “click”, “mouseover” etc.
§The second parameter is a callback function which will be executed when an event
occurs.
§The third optional parameter capture flag may be specified.

77
Q

approaches to using react components as a wrapper for d3 code

A

§React centric: Use D3 code in render method.
§D3 centric: Create a container element in React and put D3 code in
componentDidMount and componentDidUpdate.
§Hybrid: React for specifying the DOM structure, and D3 for updating style:
o Use D3 code in render method to create DOM elements.
o Use D3 code in componentDidMount and componentDidUpdate to update style.

78
Q

Hierarchical Visualization

A

*Understanding hierarchical data principles.
*Learning about circle packs.
*Using dendrograms.
*Working with treemaps.
*Employing partitions.

79
Q

best use for circle packing

A

when leaf nodes
map well to individual things of
the same type and that we don’t
think of as varying in size.

80
Q

best use for dendrogram

A

Should be used when each parent and child is
of the same type and the focus is on paths and
forks in the path.

81
Q

circle packing

A

*Nodes sized by value.
*Circle packs don’t use space efficiently.
*Encoding numerical value with radius is not
efficient.

82
Q

dendrogram

A

*The dendrogram, unlike circle pack, shows
each node using the same symbology.
*The use of lines to demonstrate connections
between the nodes places gives more visual
structure to the lineage rather than the links or
the nodes separately.

83
Q

Partition

A

*No space is wasted on links, and the value of each node is encoded in the
length of the node.
*Easier to evaluate the numerical difference between the nodes.
*Useful to quickly and effectively measure the values encoded in the nodes.

84
Q

Treemaps

A

*It is difficult to evaluate the area of rectangles
and understanding the value mapped to that
area.
*Good for:
§Numerical hierarchical data and comparison of
rough value and aggregated value across
categories.
§Demographic data, where each leaf node
represents items that vary numerically (e.g.,
counties), and for which to show breakdown by
demographics aggregated by their hierarchical
parents.

85
Q

Network Visualization

A

*Creating adjacency matrices and arc diagrams.
*Using the force-directed layout
*Using constrained forces.
*Representing directionality.
*Adding and removing network nodes and edges.

86
Q

Matrices

A

*Adjacency highlighting of the column and
row of the grid square.
*In many adjacency matrices that the
square indicating the connection from a
node to itself is always filled.
*In this context, those squares should not
be filled.

87
Q

Arc Diagram

A

An arc diagram arranges the nodes along a line and draws the links as arcs
above and/or below that line.

88
Q

Mixed Mode Rendering

A

*Using built-in canvas rendering for D3 shapes.
*Creating large random datasets of multiple types.
*Using canvas drawing in conjunction with SVG to draw large datasets.
*Optimizing geospatial, network, and traditional data visualization.
*Working with quadtrees to enhance spatial search performance.

89
Q

Canvas

A

An HTML element used to draw graphics using scripting.
*Creates a fixed size drawing surface that exposes one or more rendering
contexts, which are used to create and manipulate the content shown.
*It is initially blank, and to display something a script first needs to access the
rendering context and draw on it.
*The canvas element has a DOM getContext function, used to obtain the
rendering context and its drawing functions:

90
Q

Hybrid approach

A

draw interactive elements with SVG and large datasets with
canvas.

91
Q

Canvas versus SVG

A

*Unlike SVG, canvas does not include a hierarchy of objects (retained mode).
§Instead, it uses an immediate mode:
o Starts by clearing the context and redrawing everything.
*Drawing with canvas produces higher performance, but slightly less crisp
graphics.
*There are no elements (e.g., <path>) to attach mouse events, too.
§Instead, they are attached to the canvas itself:
o The canvas coordinates of the mouse event (pixel) must be mapped to the corresponding
drawn element.</path>

92
Q

The two mechanisms within Web Storage are

A

§sessionStorage maintains a separate storage area for each given origin that’s
available for the duration of the page session (as long as the browser is open,
including page reloads and restores).
§localStorage does the same thing but persists even when the browser is closed
and reopened.
o Stores data with no expiration date, and gets cleared only through JavaScript, or clearing
the Browser cache / Locally Stored Data.

93
Q

GUI framework does not require computer graphics to display individual GUI components.

A

FALSE

94
Q

What type of visualization is used to display abstract, non-physically based data?

A

Information visualization

95
Q

Immediate mode graphics:

A

Provides efficient (direct) access to graphics output devices

96
Q

Most graphics APIs support only a limited set of primitives.

A

TRUE

97
Q

Color is a perceptual phenomenon.

A

TRUE

98
Q

One of the primary colors is:

A

Blue

99
Q

In a graphics pipeline, vertices must be processed before fragments.

A

TRUE

100
Q

What is used to maintain the state (attributes) for drawing?

A

Graphics Context

101
Q

The number of dimensions of a homogeneous coordinate system for 2D graphics is?

A

3

102
Q

The overall modelling for computer graphics is done in the following coordinate system

A

World

103
Q

OpenGL primitives do not include:

A

Circle

104
Q

OpenGL allows customization of each stage of the graphics pipeline through customized shader programs.

A

TRUE

105
Q

One of the main features of Coordinated Multiple Views is:

A

All views show the same data set, although in different ways

106
Q

In mixed mode rendering the interaction is handled by:

A

svg

107
Q

Hierarchical data is any data that maps the parent to child relationships.

A

TRUE

108
Q

Usually, the Model-View-Controller design pattern is used for Coordinated Multiple Views

A

TRUE

109
Q

What is not SVG characteristics?

A

Has fixed resolution

110
Q

The primary function of D3 is to generate graphics

A

FALSE

111
Q

D3 statements are usually in a form of chained functions

A

TRUE

112
Q

D3 data arrays cannot contain JavaScript objects.

A

FALSE

GUI (3 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions