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

▶
retrospective wrap up what s next
SMART_READER_LITE
LIVE PREVIEW

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

May 13, 2023 195 likes •814 views

Retrospective, Wrap-Up, Whats Next CS444 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

CS444

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

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-10
SLIDE 10

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-11
SLIDE 11

What did we leave out?

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

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

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

slide-13
SLIDE 13

WebGL: ~1M points

slide-14
SLIDE 14

CUDA/OpenGL: 32M points

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

slide-15
SLIDE 15

Principles

slide-16
SLIDE 16

Color Vision

slide-17
SLIDE 17

How does your eye work?

slide-18
SLIDE 18

OPPONENT PROCESS MODEL

slide-19
SLIDE 19

RGB

  • Device-centric
  • What programs want,

not what humans want

slide-20
SLIDE 20

Polar LUV (or HCL)

  • “Perceptually uniform”, like LUV
  • Transform UV 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-21
SLIDE 21

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

Bad Better

slide-22
SLIDE 22

COLORBREWER

slide-23
SLIDE 23

SIMULTANEOUS CONTRAST

slide-24
SLIDE 24

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

SIMULTANEOUS CONTRAST

slide-25
SLIDE 25
slide-26
SLIDE 26
slide-27
SLIDE 27

PREATTENTIVENESS, OR “VISUAL POP-OUT”

slide-28
SLIDE 28
slide-29
SLIDE 29

Mixing is not always pre- attentive

slide-30
SLIDE 30

Preattentiveness, only

  • ne-channel-at-a-

time.

slide-31
SLIDE 31
slide-32
SLIDE 32

Cleveland/McGill perception papers

slide-33
SLIDE 33

Cleveland/McGill perception papers

Better to worse:

slide-34
SLIDE 34

Pie Chart Bad, Scatterplot Good

slide-35
SLIDE 35
  • Notice the “elementary

perceptual tasks”

  • What about higher-level

tasks?

Cleveland/McGill perception papers

slide-36
SLIDE 36

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-37
SLIDE 37

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

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

slide-38
SLIDE 38

The best bivariate colormap I know

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

slide-39
SLIDE 39

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-40
SLIDE 40

Algebraic Design Process

slide-41
SLIDE 41

Algebraic Design Process

slide-42
SLIDE 42

Algebraic Design Process

slide-43
SLIDE 43

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-44
SLIDE 44

Linked Brushing

slide-45
SLIDE 45

Shneiderman’s “Visual information seeking mantra”

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

slide-46
SLIDE 46

Techniques

slide-47
SLIDE 47

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-48
SLIDE 48

What about other matrices?

slide-49
SLIDE 49

Dimensionality Reduction

slide-50
SLIDE 50

Principal Component Analysis

slide-51
SLIDE 51

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

Hierarchies

slide-52
SLIDE 52

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

slide-53
SLIDE 53

Node-link diagrams

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

slide-54
SLIDE 54

Matrix Diagrams

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

slide-55
SLIDE 55

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

Spatial Data

slide-56
SLIDE 56

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-57
SLIDE 57

3D Contouring

slide-58
SLIDE 58

Vector Field Visualization

Spatial Data: Vector Fields

slide-59
SLIDE 59

Large Data

slide-60
SLIDE 60

Large Data: Open Problems

  • Can we do exploratory visual analysis, cleaning,
  • etc. on large data?
  • What are the necessary data structures?
slide-61
SLIDE 61

CS444: Data Visualization

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

visualizations for your data!