CS444/CS544 Operating Systems Scheduling 1/31/2007 Prof. Searleman [email protected].
CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array:...
Transcript of CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array:...
![Page 1: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/1.jpg)
CS444/544: Midterm Review
Carlos Scheidegger
![Page 2: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/2.jpg)
D3: DATA-DRIVEN DOCUMENTS
![Page 3: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/3.jpg)
The essential idea
• D3 creates a two-way association between elements of your dataset and entries in the DOM
• D3 operates on selections
• methods apply to all elements in the selection
![Page 4: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/4.jpg)
Data Joins
• d3 associates data to a selection with the data method
d3.select(“svg”).selectAll(“circle”).data(inputData).enter().append(“circle”).attr(“r”, function(d) { return d.age;
});
![Page 5: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/5.jpg)
Join Selections
http://bost.ocks.org/mike/join/
d3.select(“svg”).selectAll(“circle”).data(inputData).enter().append(“circle”).attr(“r”, function(d) { return d.age;
});
![Page 6: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/6.jpg)
Selection methods• selection.method(accessor)
• selection: which elements to change
• method: what to change about elements
• accessor: which aspect of the data
d3.select(“svg”).selectAll(“circle”).data(inputData).enter().append(“circle”).attr(“r”, function(d) { return d.age;
});
![Page 7: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/7.jpg)
Selection methods• selection.method(accessor)
• selection: which elements to change
• method: what to change about elements
• accessor: which aspect of the data
d3.select(“svg”).selectAll(“circle”).data(inputData).enter().append(“circle”).attr(“r”, function(d) { return d.age;
});
![Page 8: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/8.jpg)
Selection methods• selection.method(accessor)
• selection: which elements to change
• method: what to change about elements
• accessor: which aspect of the data
d3.select(“svg”).selectAll(“circle”).data(inputData).enter().append(“circle”).attr(“r”, function(d) { return d.age;
});
![Page 9: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/9.jpg)
• Write a d3 statement to select all circles in this DOM
<svgid=“svg”><g><circlecx=300cy=400r=30fill=red/><circlecx=200cy=30r=50fill=blue/><circlecx=40cy=20r=60fill=black/></g></svg>
d3.select(“#svg”).selectAll(“circle”)
![Page 10: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/10.jpg)
• Write a d3 statement to set the radius of all red circles to 40 <svgid=“svg”><gid=“group1”><circlecx=300cy=400r=30fill=blue/><circlecx=200cy=30r=50fill=blue/><circlecx=40cy=20r=60fill=blue/></g><gid=“group2”><circlecx=300cy=400r=30fill=red/><circlecx=200cy=30r=50fill=red/><circlecx=40cy=20r=60fill=red/></g></svg>
![Page 11: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/11.jpg)
• You have data stored in an array:
• Create a list of rectangles inside the svg element, each bound to an element of data
<svgid=“svg”></svg>
vardata=[{age:5,height:3},{age:12,height:30},{age:15,height:40}];
![Page 12: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/12.jpg)
• You have data stored in an array:
• The variable sel currently holds a selection of three rectangles, each bound to an element of data. Write a d3 statement that sets to red the fill color of all rectangles bound to values with age greater than 10.
vardata=[{age:5,height:3},{age:12,height:30},{age:15,height:40}];
![Page 13: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/13.jpg)
d3 scales• scales encode transformations between different spaces
• var scale = d3.scaleLinear();
• scale.domain([d1, d2]): where the transformation comes from
• scale.range([t1, t2]): where the transformation goes to
• scale(x): send x through transformation
![Page 14: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/14.jpg)
d3 scalesvar scale = d3.scaleLinear().domain([10, 30]).range([100, 200]);
What’s the result of
scale(20)? scale(50)?
![Page 15: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/15.jpg)
PRINCIPLES
![Page 16: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/16.jpg)
Color Vision
http://www.retinalmicroscopy.com/mosaics.html
![Page 17: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/17.jpg)
Color Vision DeficienciesNever use red-green as primary color discriminator!
![Page 18: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/18.jpg)
SPATIAL ADAPTATION
![Page 19: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/19.jpg)
SPATIAL ADAPTATION
![Page 20: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/20.jpg)
![Page 21: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/21.jpg)
![Page 22: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/22.jpg)
http://axismaps.github.io/thematic-cartography/
![Page 23: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/23.jpg)
![Page 24: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/24.jpg)
![Page 25: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/25.jpg)
http://axismaps.github.io/thematic-cartography/
![Page 26: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/26.jpg)
TEMPORAL ADAPTATION
http://www.moillusions.com/black-and-white-in-colour-again.html/13191556xteeocm7
![Page 27: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/27.jpg)
Color Spaces
• RGB, CMYK, HSL: Device dependent. Good for computers, bad for humans
• Lab, Polar Lab (“HCL”): Perceptually-driven, better
• distances in coordinates are meaningful
• coordinates are perceptually meaningful
![Page 28: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/28.jpg)
Do not rely only on hue boundaries to depict shape
![Page 29: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/29.jpg)
Do not rely only on hue boundaries to depict shape
![Page 30: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/30.jpg)
Area affects saturation perception
![Page 31: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/31.jpg)
Area affects saturation perception
![Page 32: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/32.jpg)
Saturation affects area perception
![Page 33: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/33.jpg)
Area affects saturation perception
Saturation affects area perception
Do not change saturation if task involves area judgement
Do not change area if task involves saturation judgement
![Page 34: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/34.jpg)
Consider implied ordering in color channels
Hue
Saturation
Luminance
![Page 35: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/35.jpg)
If you’re going to use the rainbow colormap, use an isoluminant version, quantize it, or both
Bad
Better
![Page 36: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/36.jpg)
Be aware of implied and perceptually forced color
relationships
For categorical data, use color only when you have few categories (less than 10)
![Page 37: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/37.jpg)
Q: You’re given this color scale for a map of temperatures. What’s wrong?
http://bl.ocks.org/aaizemberg/78bd3dade9593896a59d
12345678910
![Page 38: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/38.jpg)
Q: You’re given this color scale for a map of rainfall variation (from much less than normal, to normal,
to much more than normal). What’s wrong?
http://bl.ocks.org/aaizemberg/78bd3dade9593896a59d
Much more than normal
Much less than normalnormal
![Page 39: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/39.jpg)
Q: You’re given this color scale for a map of locally popular religious views across a
country. What’s wrong?
http://bl.ocks.org/aaizemberg/78bd3dade9593896a59d
Catholicism Unitarianism Judaism
![Page 40: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/40.jpg)
THE STANDARD VISUAL CHANNELS
![Page 41: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/41.jpg)
![Page 42: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/42.jpg)
Cleveland/McGill perception papers
![Page 43: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/43.jpg)
PREATTENTIVENESS,
OR “VISUAL POP-OUT”
![Page 44: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/44.jpg)
![Page 45: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/45.jpg)
function(d){if(d.row>4)return“blue”;elsereturn“red”;}
function(d){if(d.column>4){if(d.shape===“square”)return“red”;elsereturn“blue”;}else{if(d.shape===“square”)return“blue”;elsereturn“square”;}}
![Page 46: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/46.jpg)
Preattentiveness (mostly) works one-channel-at-a-time.
![Page 47: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/47.jpg)
Integral vs. Separable Channels
• Do humans perceive values “as a whole”, or “as things that can be split”?
• Use separable channels for multi-variate encodings
![Page 48: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/48.jpg)
Integral vs. Separable Channels
color x locationcolor x motion
color x shapesize x orientation
x-size x y-sizer-g x y-b
Colin Ware, 2004, p180
Separable Integral
![Page 49: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/49.jpg)
Bivariate Color Maps (This one is bad)
Baraba and Finkner, via Tufte (VDQI)
![Page 50: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/50.jpg)
Bivariate Color Maps (This one is pretty good)
http://www.nytimes.com/interactive/2014/11/04/upshot/senate-maps.html
![Page 51: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/51.jpg)
Q: Why?
![Page 52: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/52.jpg)
To get (some) separability in colors,
use Luminance, Contrast, and Hue
![Page 53: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/53.jpg)
INTERACTION, FILTERING, AGGREGATION
![Page 54: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/54.jpg)
Q: Your data has five different attributes. How to show all relationships?
• “use five different channels in a single plot”
• wrong answer: we lose preattentiveness, and there aren’t that many good channels
![Page 55: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/55.jpg)
What if there’s too much data?
• Sometimes you can’t present all the data in a single plot
• Show multiple good plots and linked views
• Interaction
![Page 56: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/56.jpg)
What if there’s too much data?
• Sometimes you can’t present all the data in a single plot
• Interaction: let the user drive what aspect of the data is being displayed
• Filtering: Selectively hide some of the data points
• Aggregation: Show visual representations of subsets of the data
![Page 57: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/57.jpg)
Shneiderman’s “Visual information seeking mantra”
Overview first, zoom and filter,
then details-on-demand
![Page 58: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/58.jpg)
Overview first:
Before all else, show a “high-level” view, possibly through
appropriate aggregation
![Page 59: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/59.jpg)
Zoom and Filter:
Use interaction to create user-specified views
![Page 60: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/60.jpg)
Details on Demand:
Individual points or attributes should be available, but only
as requested
![Page 61: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/61.jpg)
TECHNIQUES: SPATIAL ARRANGEMENTS
![Page 62: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/62.jpg)
Transformations
![Page 63: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/63.jpg)
Transformations
![Page 64: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/64.jpg)
Transformations
![Page 65: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/65.jpg)
Line Charts
![Page 66: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/66.jpg)
Bank to 45 degrees
![Page 67: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/67.jpg)
Many dimensions
![Page 68: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/68.jpg)
Parallel Coordinates
http://bl.ocks.org/jasondavies/1341281
![Page 69: CS444/544: Midterm Review - Carlos Scheidegger review.pdf · •You have data stored in an array: • The variable sel currently holds a selection of three rectangles, each bound](https://reader034.fdocuments.in/reader034/viewer/2022050502/5f9466a3f8276d258c13e833/html5/thumbnails/69.jpg)
Principal Component Analysis
Sepal.LengthSepal.Width
Petal.LengthPetal.Width
−0.2
−0.1
0.0
0.1
0.2
−0.10 −0.05 0.00 0.05 0.10 0.15PC1
PC2
Species
setosa
versicolor
virginica