Retrospective, Wrap-Up, Whats Next CSC444 - - PowerPoint PPT Presentation

▶
retrospective wrap up what s next
SMART_READER_LITE
LIVE PREVIEW

Retrospective, Wrap-Up, Whats Next CSC444 - - PowerPoint PPT Presentation

Aug 29, 2023 251 likes •819 views

Retrospective, Wrap-Up, Whats Next CSC444 http://en.wikipedia.org/wiki/Anscombe%27s_quartet We do visualization not because its pretty (although it can certainly be!), but because it works better Mechanics

slide-1
SLIDE 1

Retrospective, Wrap-Up, What’s Next

CSC444

slide-2
SLIDE 2

http://en.wikipedia.org/wiki/Anscombe%27s_quartet

slide-3
SLIDE 3
slide-4
SLIDE 4

We do visualization not because it’s pretty (although it can certainly be!), but because it works better

slide-5
SLIDE 5

Mechanics

slide-6
SLIDE 6

http://www.reddit.com/r/ProgrammerHumor/comments/2d62n3/javascript/

slide-7
SLIDE 7
slide-8
SLIDE 8

Why did we bother?

  • It’s the state of the art
  • (I know, right?! If you care, come help me fix it!)
  • It’s what actually gets used in the real world
  • What you learned in this class is exactly what the

New York Times pros use

slide-9
SLIDE 9

What did we leave out?

  • We learned how to use d3, and we learned how to

write a part of it

  • But we didn’t go into a lot of detail of how d3 is

implemented

  • If we want to improve things, we must first

understand them

  • API design for visualization is important!
slide-10
SLIDE 10

What did we leave out?

  • Web technologies for more complex graphics
  • Canvas, WebGL
  • Non-web technologies
  • Raw OpenGL, for when all else fails
slide-11
SLIDE 11

http://bl.ocks.org/mbostock/3681006 http://bl.ocks.org/mbostock/3680957

SVG: ~1K points Canvas: ~50K points

slide-12
SLIDE 12

WebGL: ~1M points

slide-13
SLIDE 13

CUDA/OpenGL: 32M points

https://www.youtube.com/watch?v=NDLPoJsqqoA

slide-14
SLIDE 14

Principles

slide-15
SLIDE 15

Color Vision

slide-16
SLIDE 16

How does your eye work?

slide-17
SLIDE 17

OPPONENT PROCESS MODEL

slide-18
SLIDE 18

Polar Lab (or HCL)

  • “Perceptually uniform”, like Lab
  • Transform ab to polar coordinates: radius is

Chroma, Angle is Hue

  • Like HSV, but device-independent. All else being

equal, think HCL first http://cscheid.net/static/20120216/hcl_frame.html

slide-19
SLIDE 19

If you’re going to use the rainbow colormap, use an isoluminant version, quantize it, or both

Bad Better

slide-20
SLIDE 20

COLORBREWER

slide-21
SLIDE 21

COLORGORICAL

slide-22
SLIDE 22

SIMULTANEOUS CONTRAST

slide-23
SLIDE 23

http://www.handprint.com/HP/WCL/tech13.html

SIMULTANEOUS CONTRAST

slide-24
SLIDE 24
slide-25
SLIDE 25
slide-26
SLIDE 26

PREATTENTIVENESS, OR “VISUAL POP-OUT”

slide-27
SLIDE 27
slide-28
SLIDE 28

Mixing is not always pre- attentive

slide-29
SLIDE 29

Preattentiveness, only

  • ne-channel-at-a-

time.

slide-30
SLIDE 30
slide-31
SLIDE 31

Cleveland/McGill perception papers

slide-32
SLIDE 32

Cleveland/McGill perception papers

Better to worse:

slide-33
SLIDE 33

Pie Chart Bad, Scatterplot Good

slide-34
SLIDE 34
  • Notice the “elementary

perceptual tasks”

  • What about higher-level

tasks?

Cleveland/McGill perception papers

slide-35
SLIDE 35

Integral vs. Separable Channels

color x location color x motion color x shape size x orientation x-size x y-size r-g x y-b

Colin Ware, 2004, p180 Separable Integral

slide-36
SLIDE 36

Trivariate (!) Color Map (terrible, terrible idea)

http://magazine.good.is/infographics/america-s-richest-counties-and-best-educated-counties#open

slide-37
SLIDE 37

The best bivariate colormap I know

http://www.nytimes.com/interactive/2014/11/04/upshot/senate-maps.html

slide-38
SLIDE 38

Bivariate Color Maps are Possible, but Hard

pay attention to the behavior of the variables you’re mapping from, and the behavior of the channels you’re mapping to.

slide-39
SLIDE 39

Interaction

  • Interpret the state of elements in the UI as a clause

in a query. As UI changes, update data Willett et al., TVCG 2007 (*)

slide-40
SLIDE 40

Linked Brushing

slide-41
SLIDE 41

Shneiderman’s “Visual information seeking mantra”

Overview first, zoom and filter, then details-on-demand

slide-42
SLIDE 42

Techniques

slide-43
SLIDE 43

Regular Scatterplots

  • Every data point is a vector:
  • Every scatterplot is produced

by a very simple matrix:

    v0 v1 v2 v3      1 1

  •  1

1

slide-44
SLIDE 44

What about other matrices?

slide-45
SLIDE 45

Dimensionality Reduction

slide-46
SLIDE 46

Principal Component Analysis

slide-47
SLIDE 47

http://jsfiddle.net/VividD/WDCpq/8/

Hierarchies

slide-48
SLIDE 48

http://www.cs.rug.nl/svcg/SoftVis/ViewFusion Hierarchies

slide-49
SLIDE 49

Node-link diagrams

http://christophermanning.org/gists/1703449/#/%5B10%5D50/1/0

slide-50
SLIDE 50

Matrix Diagrams

http://bost.ocks.org/mike/miserables/

slide-51
SLIDE 51

http://ryanhill1.blogspot.com/2011/07/isoline-map.html

Spatial Data

slide-52
SLIDE 52

Contouring: isolines

http://ryanhill1.blogspot.com/2011/07/isoline-map.html

Approach to Contouring in 2D

  • Contour must cross every grid line connecting two

grid points of opposite sign

530 - Introduction to Scientific Visualization Oct 7, 2014,

Interpolate along grid lines

+

  • x

x

Get cell Identify grid lines w/cross Find crossings Primitives naturally chain together

slide-53
SLIDE 53

3D Contouring

slide-54
SLIDE 54

Vector Field Visualization

Spatial Data: Vector Fields

slide-55
SLIDE 55

CS444: Data Visualization

  • Now you know why, how and how not to create

visualizations for your data!