Scalable Visualization Systems for Broad Audiences Large Diverse - - PowerPoint PPT Presentation

▶
scalable visualization systems for broad audiences
SMART_READER_LITE
LIVE PREVIEW

Scalable Visualization Systems for Broad Audiences Large Diverse - - PowerPoint PPT Presentation

Feb 25, 2023 252 likes •1.58k views

Scalable Visualization Systems for Broad Audiences Large Diverse VISUALIZATION Data Users Recent Trends Data grow in size and complexity across problem domains traditional visualizations are not scalable need to

slide-1
SLIDE 1

Scalable Visualization Systems for Broad Audiences

刘志成 刘志成

VISUALIZATION Large Data Diverse Users

slide-2
SLIDE 2

Recent Trends

Data grow in size and complexity across problem domains

traditional visualizations are not scalable need to devise novel and generalizable techniques

Diverse users need to analyze data & communicate findings

scientists, analysts, journalists and designers lower barrier of entry without sacrificing power

14

slide-3
SLIDE 3

My Research Goal: Scalable Visualization Systems for Broad Audiences

Scalable Interaction Techniques Visualization Process Models Human-Centered Approach

15

VISUALIZATION Large Data Diverse Users

slide-4
SLIDE 4

Overview

Scalable Interaction Techniques

Multivariate linked analysis Event sequence data analysis

EuroVis ‘13, InfoVis ’14, CHI ‘15, VAST ‘16, EuroVis ’17, VAST ‘18 UIST ‘15, InfoVis ’16, CHI’18, InfoVis ’19, CHI’20

Visualization Process Models

Natural language interaction Graphical authoring tools

16

slide-5
SLIDE 5

Overview

Scalable Interaction Techniques

Multivariate linked analysis Event sequence data analysis

EuroVis ‘13, InfoVis ’14, CHI ‘15, VAST ‘16, EuroVis ’17, VAST ‘18 UIST ‘15, InfoVis ’16, CHI’18, InfoVis ’19, CHI’20

Visualization Process Models

Natural language interaction Graphical authoring tools

17

slide-6
SLIDE 6

Scalable Visualization Systems: Goals

Perceptual Scalability Interactive Scalability

  • Large number of data cases leads to over-plotting and cluttering
  • Need to carefully choose data reduction methods for representation
  • +500ms leads to reduced user engagement & insight generation *
  • Scalable interaction needs to reduce latency

* InfoVis ‘14

18

slide-7
SLIDE 7

Data: 10K Points Binned Aggregation Modeling Sampling

19

slide-8
SLIDE 8

Example: Location-based Mobile Check-ins

4.5 million records (2008-2010) Date, Time, Lat, Lon, User ID Analysis Goal: Understand geographic distribution of check-ins Find correlation between geographic and temporal dimensions

20

slide-9
SLIDE 9

Sampling: Google Fusion Tables

21

slide-10
SLIDE 10

Binned Aggregation: Our Approach

imMens EuroVis ‘13

slide-11
SLIDE 11

Interactive Brushing & Linking

23

slide-12
SLIDE 12

A Naïve Approach

X Y 256 … 767 512 1023 …

Day Hour Month

23 … 0 1 … 30 …11 1 23 … … 11 0 1 … 30 0 1 … 30 23 … 11 1 … 1

12 x 31 x 24 x 512 x 512 = 2 billion+ cells

24

imMens EuroVis ‘13 X, Y coordinates are derived from lat, lon and zoom level

slide-13
SLIDE 13

Brushing over January

X Y 256 … 767 512 1023 …

Day Hour Month

23 … 0 1 … 30 …11 1 23 … … 11 0 1 … 30 0 1 … 30 23 … 11 1 … 1

31 x 24 x 512 x 512 = 195 million+ cells

25

imMens EuroVis ‘13

slide-14
SLIDE 14

Sum-up along Day

X Y 256 … 767 512 1023 …

[ 0 – 30 ]

Day Hour Month

23 … …11 1 23 … … 11 [ 0 – 30 ] [ 0 - 30 ] 23 … 11 1 … 1

24 x 512 x 512 = 6 million+ cells

26

imMens EuroVis ‘13

slide-15
SLIDE 15

Sum-up along Hour

X Y 256 … 767 512 1023 …

[ 0 – 30 ]

Day Hour Month

[ 0 – 23 ] …11 … 11 [ 0 – 30 ] [ 0 - 30 ] [ 0 – 23 ] 11 … [ 0 – 23 ]

512 x 512 cells

27

imMens EuroVis ‘13

slide-16
SLIDE 16

Full Data Cube: Limitations

Unwieldy size (product of bin counts across all dimensions) Inefficient query processing

slide-17
SLIDE 17

For any pair of plots

  • nly 3 dimensions are involved

in brushing & linking.

29

slide-18
SLIDE 18
  • 1. reduce number of dimensions

full 5-D cube

Day Hour Month

0 1 … 30

… 11

Y Hour X

512 513 … 1023

256 … 767

Y Day X

512 513 … 1023

256 … 767

Y Month X

512 513… 1023

256 … 767

3-D cubes

23 … 1 23 … 1 30 … 1 11 … 1

Σ Σ Σ Σ

30

imMens EuroVis ‘13

slide-19
SLIDE 19

31

imMens EuroVis ‘13

At low zoom levels, we still have potentially millions of bins

slide-20
SLIDE 20

32

  • 2. divide select dimension into ranges

imMens EuroVis ‘13

slide-21
SLIDE 21

X : 2 5 6

  • 7

6 7 Y: 512 - 1023 day: 0 - 31

512 513 … 767

256 … 511 30 … 1

512 513 … 767

512 … 767 30 … 1

768 769 … 1023

256 … 511 30 … 1

768 769 … 1023

512 … 767 30 … 1

33

  • 2. divide select dimension into ranges

imMens EuroVis ‘13

slide-22
SLIDE 22

Data Tiles: Only Load what Users are Looking at

Multivariate data projections Not pre-rendered images

34

imMens EuroVis ‘13

slide-23
SLIDE 23

Data Tiles

35

slide-24
SLIDE 24

x1-y1-month

36

slide-25
SLIDE 25

x1-y1-day

37

slide-26
SLIDE 26

x1-y1-hour

38

slide-27
SLIDE 27

x1-y2-month

39

slide-28
SLIDE 28

x1-y2-day

40

slide-29
SLIDE 29

x1-y2-hour

41

slide-30
SLIDE 30

x2-y1-month

42

slide-31
SLIDE 31

x2-y1-day

43

slide-32
SLIDE 32

x2-y1-hour

44

slide-33
SLIDE 33

x2-y2-month

45

slide-34
SLIDE 34

x2-y2-day

46

slide-35
SLIDE 35

x2-y2-hour

47

slide-36
SLIDE 36

month-day-hour

48

slide-37
SLIDE 37

Two-Pass Parallel Processing

1 … 1 1

768 769 … 1023

512 513 … 767

R G B A R G B A … … … … R G B A

data tiles

query fragment shader

Y [768-1023]

{

X [512-767]

{

1 … 11

Pass 1

projections

  • ff-screen FBO

render fragment shader Pass 2

canvas

Pack data tiles as images (352KB for 13 data tiles) Bind to WebGL context as textures

49

imMens EuroVis ‘13

slide-38
SLIDE 38

Performance Benchmarks

Simulate brush & linking across plots in a scatter plot matrix Our approach vs. full data cube Parameters bin count per dimension (10 - 50) number of records (10K - 1B) number of dimensions (4,5)

50

slide-39
SLIDE 39

Google Chrome v.23.0.1271.95 on a quad-core 2.3 GHz MacBook Pro (OS X 10.8.2) with per-core 256K L2 caches, shared 6MB L3 cache and 8GB RAM. PCI Express NVIDIA GeForce GT 650M graphics card with 1024MB video RAM. 51.9 52.3 51.6 52.0 53.2 52.1 5.5 3.0 2.2 51

imMens EuroVis ‘13 full data cube

slide-40
SLIDE 40

Google Chrome v.23.0.1271.95 on a quad-core 2.3 GHz MacBook Pro (OS X 10.8.2) with per-core 256K L2 caches, shared 6MB L3 cache and 8GB RAM. PCI Express NVIDIA GeForce GT 650M graphics card with 1024MB video RAM. 51.9 52.3 51.6 52.0 53.2 52.1 5.5 3.0 2.2

~50fps querying and rendering

  • f 1B data points

52

imMens EuroVis ‘13 full data cube imMens (our approach)

slide-41
SLIDE 41

Timestamp Page Name 06/29/2016 16:01:20 adobe.com 06/29/2016 16:03:04 06/29/2016 16:03:29 adobe.com/creativecloud/photography.html creative.adobe.com/products/download/ccpp

53

slide-42
SLIDE 42

Timestamp Page Name 06/29/2016 16:01:20 adobe.com 06/29/2016 16:03:04 06/29/2016 16:03:29 adobe.com/creativecloud/photography.html creative.adobe.com/products/download/ccpp 06/29/2016 16:04:12 06/29/2016 16:06:23 06/29/2016 16:07:34 06/29/2016 16:07:58 06/29/2016 16:08:24 06/29/2016 16:08:51 06/29/2016 16:09:06 06/29/2016 16:09:21 06/29/2016 16:11:32 06/29/2016 16:15:07 06/29/2016 16:16:00 06/29/2016 16:17:52 06/29/2016 16:19:03 06/29/2016 16:19:44 06/29/2016 16:20:05 06/29/2016 16:21:37 .... creative.adobe.com:Authenticated creative.adobe.com:Photography:Join:1:AdobeIDForm:Page creative.adobe.com:Photography:Join:2:ReviewMembershipDetails:Page creative:AnywareCheckout:checkoutLoaded creative.adobe.com:Photography:Join:3:PaymentInfo:Page creative:AnywareCheckout:validateOrder creative.adobe.com:Join:Checkout:Order:Validated creative:AnywareCheckout:orderValidated creative.adobe.com:Photography:Join:4:ConfirmOrder:Page creative.adobe.com:Photography:Join:2:ReviewMembershipDetails:Page Account:IMS:onLoad_SignInForm Account:IMS:SignIn:Error_EmptyEmail Account:IMS:SignIn:Error_EmptyEmail Account:IMS:SignIn:Error_EmptyEmail Account:IMS:SignIn:Error_EmptyEmail Account:IMS:onLoad_ReturningUserSignedInSuccessfully:Remember_Me_Checked …

54

slide-43
SLIDE 43

Event Sequence Data: Web Clickstreams

Analysis Goals:

What are the most common paths taken by visitors? What did people do before reaching page Y? For those people who have done A and B, what do they do next?

slide-44
SLIDE 44

Sankey Diagram

56

slide-45
SLIDE 45

57

slide-46
SLIDE 46

Perceptual Scalability: Choosing Data Resolution

Motif Extraction Sequential Pattern Mining Sequence Clustering

Patterns & Sequences VAST ‘16

slide-47
SLIDE 47

What to Show?

06/29/2016 16:04:12 06/29/2016 16:06:23 06/29/2016 16:07:34 06/29/2016 16:07:58 06/29/2016 16:08:24 06/29/2016 16:08:51 06/29/2016 16:09:06 06/29/2016 16:09:21 06/29/2016 16:11:32 06/29/2016 16:15:07 06/29/2016 16:16:00 06/29/2016 16:17:52 06/29/2016 16:19:03 06/29/2016 16:19:44 06/29/2016 16:20:05 06/29/2016 16:21:37 .... creative.adobe.com:Authenticated creative.adobe.com:Photography:Join:1:AdobeIDForm:Page creative.adobe.com:Photography:Join:2:ReviewMembershipDetails:Page creative:AnywareCheckout:checkoutLoaded creative.adobe.com:Photography:Join:3:PaymentInfo:Page creative:AnywareCheckout:validateOrder creative.adobe.com:Join:Checkout:Order:Validated creative:AnywareCheckout:orderValidated creative.adobe.com:Photography:Join:4:ConfirmOrder:Page creative.adobe.com:Photography:Join:2:ReviewMembershipDetails:Page Account:IMS:onLoad_SignInForm Account:IMS:SignIn:Error_EmptyEmail Account:IMS:SignIn:Error_EmptyEmail Account:IMS:SignIn:Error_EmptyEmail Account:IMS:SignIn:Error_EmptyEmail Account:IMS:onLoad_ReturningUserSignedInSuccessfully:Remember_Me_Checked … 06/29/2016 16:01:20 06/29/2016 16:03:04 06/29/2016 16:03:29 adobe.com adobe.com/creativecloud/photography.html creative.adobe.com/products/download/ccpp

slide-48
SLIDE 48

creative.adobe.com:Authenticated creative.adobe.com:Photography:Join:1:AdobeIDForm:Page creative.adobe.com:Photography:Join:2:ReviewMembershipDetails:Page creative:AnywareCheckout:checkoutLoaded creative.adobe.com:Photography:Join:3:PaymentInfo:Page creative:AnywareCheckout:validateOrder creative.adobe.com:Join:Checkout:Order:Validated creative:AnywareCheckout:orderValidated creative.adobe.com:Photography:Join:4:ConfirmOrder:Page creative.adobe.com:Photography:Join:2:ReviewMembershipDetails:Page Account:IMS:onLoad_SignInForm Account:IMS:SignIn:Error_EmptyEmail Account:IMS:SignIn:Error_EmptyEmail Account:IMS:SignIn:Error_EmptyEmail Account:IMS:SignIn:Error_EmptyEmail Account:IMS:onLoad_ReturningUserSignedInSuccessfully:Remember_Me_Checked … adobe.com adobe.com/creativecloud/photography.html creative.adobe.com/products/download/ccpp

What to Show?

Patterns & Sequences VAST ‘16

slide-49
SLIDE 49

creative.adobe.com:Authenticated creative.adobe.com:Photography:Join:1:AdobeIDForm:Page creative.adobe.com:Photography:Join:2:ReviewMembershipDetails:Page creative:AnywareCheckout:checkoutLoaded creative.adobe.com:Photography:Join:3:PaymentInfo:Page creative:AnywareCheckout:validateOrder creative.adobe.com:Join:Checkout:Order:Validated creative:AnywareCheckout:orderValidated creative.adobe.com:Photography:Join:4:ConfirmOrder:Page creative.adobe.com:Photography:Join:2:ReviewMembershipDetails:Page Account:IMS:onLoad_SignInForm Account:IMS:SignIn:Error_EmptyEmail Account:IMS:SignIn:Error_EmptyEmail Account:IMS:SignIn:Error_EmptyEmail Account:IMS:SignIn:Error_EmptyEmail Account:IMS:onLoad_ReturningUserSignedInSuccessfully:Remember_Me_Checked … adobe.com adobe.com/creativecloud/photography.html creative.adobe.com/products/download/ccpp e4 e5 e6 e7 e8 e9 e10 e11 e12 e13 e14 e15 e15 e15 e15 e16 … e1 e2 e3

What to Show?

Patterns & Sequences VAST ‘16

slide-50
SLIDE 50

e1 e2 e3 e4 e5 e6 e7 e8 e9 e10 e11 e12 e13 e14 e15 e15 e15 e15 e16 … e7 e1 e5 e11 e2 e6 e3 e8 e4 e10 e11 e12 e13 e9 e15 e20 e6 e6 e10 … e1 e1 e1 e11 e12 e13 e15 e3 e6 e2 e2 e3 e4 e9 e5 e4 e4 e2 e7 … e7 e6 e7 e6 e1 e2 e3 e8 e10 e2 e5 e4 e6 e4 e6 e9 e6 e11 e15 … e10 e11 e15 e1 e2 e6 e6 e18 e24 e12 e2 e3 e9 e8 e4 e1 e2 e9 e3 …

What to Show?

Patterns & Sequences VAST ‘16

slide-51
SLIDE 51

e1 e2 e3 e4 e5 e6 e7 e8 e9 e10 e11 e12 e13 e14 e15 e15 e15 e15 e16 … e7 e1 e5 e11 e2 e6 e3 e8 e4 e10 e11 e12 e13 e9 e15 e20 e6 e6 e10 … e1 e1 e1 e11 e12 e13 e15 e3 e6 e2 e2 e3 e4 e9 e5 e4 e4 e2 e7 … e7 e6 e7 e6 e1 e2 e3 e8 e10 e2 e5 e4 e6 e4 e6 e9 e6 e11 e15 … e10 e11 e15 e1 e2 e6 e6 e18 e24 e12 e2 e3 e9 e8 e4 e1 e2 e9 e3 …

e1 e2 e3 e4 e9 (100%) à

What to Show?

à à à

Patterns & Sequences VAST ‘16

slide-52
SLIDE 52

e1 e2 e3 e4 e5 e6 e7 e8 e9 e10 e11 e12 e13 e14 e15 e15 e15 e15 e16 … e7 e1 e5 e11 e2 e6 e3 e8 e4 e10 e11 e12 e13 e9 e15 e20 e6 e6 e10 … e1 e1 e1 e11 e12 e13 e15 e3 e6 e2 e2 e3 e4 e9 e5 e4 e4 e2 e7 … e7 e6 e7 e6 e1 e2 e3 e8 e10 e2 e5 e4 e6 e4 e6 e9 e6 e11 e15 … e10 e11 e15 e1 e2 e6 e6 e18 e24 e12 e2 e3 e9 e8 e4 e1 e2 e9 e3 …

e5 e11 e15 (60%)

What to Show?

e1 e2 e3 e4 e9 (100%) à à à à à à

Patterns & Sequences VAST ‘16

slide-53
SLIDE 53

e1 e2 e3 e4 e5 e6 e7 e8 e9 e10 e11 e12 e13 e14 e15 e15 e15 e15 e16 … e7 e1 e5 e11 e2 e6 e3 e8 e4 e10 e11 e12 e13 e9 e15 e20 e6 e6 e10 … e1 e1 e1 e11 e12 e13 e15 e3 e6 e2 e2 e3 e4 e9 e5 e4 e4 e2 e7 … e7 e6 e7 e6 e1 e2 e3 e8 e10 e2 e5 e4 e6 e4 e6 e9 e6 e11 e15 … e10 e11 e15 e1 e2 e6 e6 e18 e24 e12 e2 e3 e9 e8 e4 e1 e2 e9 e3 …

e12 e6 (40%)

What to Show?

e5 e11 e15 (60%) e1 e2 e3 e4 e9 (100%) à à à à à à à

Patterns & Sequences VAST ‘16

slide-54
SLIDE 54

How to Show?

Patterns & Sequences VAST ‘16

Patterns Sequences

slide-55
SLIDE 55

How to Show?

Patterns & Sequences VAST ‘16

Patterns Sequences

slide-56
SLIDE 56

Align Sequences by Event

How to Show?

slide-57
SLIDE 57

Follow-up Work (1)

Beyond disjoint, overlapping sequential patterns

slide-58
SLIDE 58

Follow-up Work (1)

Beyond disjoint, overlapping sequential patterns

slide-59
SLIDE 59

72

CoreFlow EuroVis ‘17

slide-60
SLIDE 60

73

CoreFlow EuroVis ‘17

slide-61
SLIDE 61

74

CoreFlow EuroVis ‘17

slide-62
SLIDE 62

75

CoreFlow EuroVis ‘17

slide-63
SLIDE 63

76

CoreFlow EuroVis ‘17

slide-64
SLIDE 64

Follow-up Work (2)

Help analysts incorporate their own knowledge Automatically mined patterns may not be interesting / useful Combine ad hoc querying with pattern mining

MAQUI VAST ‘18

slide-65
SLIDE 65

Interactive Scalability for Event Sequence Analysis

Construct Event Dictionary

Map each event to a Unicode symbol More frequent events are assigned smaller code point (fewer bytes) variable-length coding

Represent Sequences as Strings

More efficient pattern mining Ad hoc queries through regular expression and substring functions

79

slide-66
SLIDE 66

Scalable Visualization System: Lessons Learned

Perceptual Scalability: Choose data reduction and summarization methods that reduce visual clutter & preserve salient structures Interactive Scalability: Choose data representation & computational techniques based on vis design to optimize user experience

80

slide-67
SLIDE 67

Overview

Scalable Interaction Techniques

Multivariate linked analysis Event sequence data analysis

EuroVis ‘13, InfoVis ’14, CHI ‘15, VAST ‘16, EuroVis ’17, VAST ‘18 UIST ‘15, InfoVis ’16, CHI’18, InfoVis ’19, CHI’20

Visualization Process Models

Natural language interaction Graphical authoring tools

81

slide-68
SLIDE 68

The Importance of Iteration

Finding an effective visualization requires iterations on data configuration and visualization design Current way to do such iteration: programming

82

slide-69
SLIDE 69
slide-70
SLIDE 70

scientists designers data analysts

  • ffice workers

artists journalists

84

computer scientists

How we enable the masses to create expressive visualizations without having to program?

slide-71
SLIDE 71

Natural Language Interaction

85

“Show me the medal counts by country”

slide-72
SLIDE 72

87

Natural Language Question Visualizations n-grams

“show me revenue by marketing channel for the winter campaign”

“show”, “me”, “revenue”, “by”, “marketing”, “channel”, … “show me”, “me revenue”, “revenue by”, “by marketing”, …

…

1-grams: 2-grams: n-grams:

DataTone, UIST ‘15

slide-73
SLIDE 73

88

Natural Language Question Visualizations n-grams Tagged Tokens

{n-grams} classifier

data attributes data cell values numbers time expressions data operators and functions visualization key phrases conjunction & disjunction terms direct manipulation terms pairwise similarity between n-gram i and lexicon entry j: Sim(i, j) = max {Simwordnet , Simspelling}

DataTone, UIST ‘15

slide-74
SLIDE 74

89

Natural Language Question Visualizations n-grams Tagged Tokens Tagged Tokens & Relationships

{tagged n-grams} dependency parser constituency parse tree & the typed dependencies

DataTone, UIST ‘15

slide-75
SLIDE 75

90

Natural Language Question Visualizations n-grams Tagged Tokens Tagged Tokens & Relationships

“show me the states that had total sales greater than 20000” noun phrase adjective phrase

“total” “sales” data operator and function data attribute “greater than” “20000” data operator and function number DataTone, UIST ‘15

slide-76
SLIDE 76

91

Natural Language Question Visualizations n-grams Tagged Tokens Tagged Tokens & Relationships Formal Specifications

noun phrase adjective phrase

“total” “sales” data operator and function data attribute “greater than” “20000” data operator and function number

sum(sales) > 20000 sum(sales) > 20000

DataTone, UIST ‘15

slide-77
SLIDE 77

Ambiguities

Question will likely be underspecified

  • does “product” mean product category or product name?

92

slide-78
SLIDE 78

Ambiguities

Question will likely be underspecified

  • does “product” mean product category or product name?

Many possible answers to the user’s question

  • show revenue for New York City and Washington DC in 2012

93

slide-79
SLIDE 79

Ambiguities

Question will likely be underspecified

  • does “product” mean product category or product name?

Many possible answers to the user’s question

  • show revenue for New York City and Washington DC in 2012

Inference mistakes in natural language processing

94

DataTone, UIST ‘15

slide-80
SLIDE 80

Sources of Ambiguity

Data

  • 1. Recognition of data attributes and text values
  • 2. Recognition of filters, sorting and aggregates
  • 3. Dimension and measure selection

Design Decision

  • 4. Choose visualization parameters
  • 5. Facet data for small multiples
  • 6. Choose encoding methods

95

slide-81
SLIDE 81

Sources of Ambiguity

Data

  • 1. Recognition of data attributes and text values
  • 2. Recognition of filters, sorting and aggregates
  • 3. Dimension and measure selection

Visualization Design

  • 4. Choose visualization parameters
  • 5. Facet data for small multiples
  • 6. Choose encoding methods

96

slide-82
SLIDE 82

97

slide-83
SLIDE 83

Expressivity

The range of visualizations that can be created in a tool

98

slide-84
SLIDE 84

99

“Genomic Classification of Cutaneous Melanoma” Cell 161:1681-96 (2015)

slide-85
SLIDE 85

How about other types of visualizations?

100

slide-86
SLIDE 86

Visual Marks: Simpler, more precise control Data: Multi-dimensional

101

slide-87
SLIDE 87

Visualization Process Models

102

slide-88
SLIDE 88

The InfoVis Reference Model

[Card, Mackinlay & Shneiderman, 1999]

103

Raw Data Data Tables Visual Abstraction Views transform data map data to visual transform view

slide-89
SLIDE 89

The Grammar of Graphics [Wilkinson 1999]

104 Variables

Renderer

Algebra Scales Statistics Geometry

Coordinates Aesthetics Data

The Grammar of Graphics

[Wilkinson, 1999]

slide-90
SLIDE 90

105 Variables

Renderer

Algebra Scales Statistics Geometry

Coordinates Aesthetics Data response = Response gender = Gender

The Grammar of Graphics

[Wilkinson, 1999]

slide-91
SLIDE 91

106 Variables

Renderer

Algebra Scales Statistics Geometry

Coordinates Aesthetics Data response = Response gender = Gender cross(response, gender)

The Grammar of Graphics

[Wilkinson, 1999]

slide-92
SLIDE 92

107 Variables

Renderer

Algebra Scales Statistics Geometry

Coordinates Aesthetics Data response = Response gender = Gender cross(response, gender) cat(dim(1), values("Rarely","Infrequently",
 "Occasionally","Frequently","Not Sure”)) cat(dim(2), values(“Female","Male"))

The Grammar of Graphics

[Wilkinson, 1999]

slide-93
SLIDE 93

108 Variables

Renderer

Algebra Scales Statistics Geometry

Coordinates Aesthetics Data response = Response gender = Gender cross(response, gender) cat(dim(1), values("Rarely","Infrequently",
 "Occasionally","Frequently","Not Sure”)) cat(dim(2), values(“Female”,"Male")) summary.proportion(Response*Gender)

The Grammar of Graphics

[Wilkinson, 1999]

slide-94
SLIDE 94

109 Variables

Renderer

Algebra Scales Statistics Geometry

Coordinates Aesthetics Data response = Response gender = Gender cross(response, gender) cat(dim(1), values("Rarely","Infrequently",
 "Occasionally","Frequently","Not Sure”)) cat(dim(2), values(“Female”,"Male")) summary.proportion(Response*Gender) interval.stack(summary.proportion(response*gender))

The Grammar of Graphics

[Wilkinson, 1999]

slide-95
SLIDE 95

110 Variables

Renderer

Algebra Scales Statistics Geometry

Coordinates Aesthetics Data response = Response gender = Gender cross(response, gender) cat(dim(1), values("Rarely","Infrequently",
 "Occasionally","Frequently","Not Sure”)) cat(dim(2), values(“Female”,"Male")) summary.proportion(Response*Gender) rect(dim(2), polar.theta(dim(1))) interval.stack(position(summary.proportion(response*gender)))

The Grammar of Graphics

[Wilkinson, 1999]

slide-96
SLIDE 96

111 Variables

Renderer

Algebra Scales Statistics Geometry

Coordinates Aesthetics Data response = Response gender = Gender cross(response, gender) cat(dim(1), values("Rarely","Infrequently",
 "Occasionally","Frequently","Not Sure”)) cat(dim(2), values(“Female”,"Male")) summary.proportion(Response*Gender) rect(dim(2), polar.theta(dim(1))) interval.stack(position(summary.proportion(response*gender)), label(response), color(response))

The Grammar of Graphics

[Wilkinson, 1999]

slide-97
SLIDE 97

112

The Grammar of Graphics

Variables Renderer Algebra Scales Statistics Geometry

Coordinates Aesthetics Data

[Wilkinson, 1999]

slide-98
SLIDE 98

Data-to-Display Process Models

start with data, visualization rendered in the end

start with drawing, apply data binding when necessary

intermediate abstraction such as specifications

direct interaction with visual items on canvas

slide-99
SLIDE 99

114

Quoted from https://www.behance.net/gallery/14159439/Nobel-no-degrees Nobels, no degrees

Giorgia Lupi, Gabriele Rossi, Federica Fragapane, Francesco Majno.

“For this visualization, we took a lot

  • f inspiration from musical scores

and their elegant aesthetics. Particularly, John Cage, a famous contemporary composer, was a true source of fascination.”

slide-100
SLIDE 100

115

Source: https://www.behance.net/gallery/14159439/Nobel-no-degrees

Giorgia Lupi, Gabriele Rossi, Federica Fragapane, Francesco Majno.

slide-101
SLIDE 101

Limited time & technical resources Data may not be available Use mature tools (e.g. Adobe Illustrator) to do mock-ups

Structuring Visualization Mock-ups at the Graphical Level by Dividing the Display Space Vuillemont and Boy, 2017

slide-102
SLIDE 102

Data-to-Display Process Models

start with data, visualization rendered in the end

start with drawing, apply data binding when necessary

intermediate abstraction such as specifications

direct interaction with visual items on canvas

slide-103
SLIDE 103

Lazy Data Binding

start with data, visualization rendered in the end

start with drawing, apply data as constraints when necessary

intermediate abstraction such as specifications

direct interaction with visual items on canvas

slide-104
SLIDE 104

Lazy Data Binding

start with data, visualization rendered in the end

start with drawing, apply data as constraints when necessary

intermediate abstraction such as specifications

direct interaction with visual items on canvas

slide-105
SLIDE 105

Inspirations: Rulers, Guides, Grids

120

Data-Driven Guides InfoVis ‘16

slide-106
SLIDE 106

Inspirations: Rulers, Guides, Grids

121

Data-Driven Guides InfoVis ‘16

slide-107
SLIDE 107

Length guide

a

Area guide

d = area d = length

Data-Driven Guides as Constraints

122

Data-Driven Guides InfoVis ‘16

slide-108
SLIDE 108

123

slide-109
SLIDE 109

124

slide-110
SLIDE 110

Linear blend skinning

Related Work Bounded biharmonic weights for real-time deformation. Jacobson, Alec, et al. ACM Trans. Graph., 2011 Skinning cubic Bézier splines and Catmull-Clark subdivision surfaces. Liu, Songrun, et al. ACM Trans. Graph., 2014.

Deforms

Linking a guide and a shape

125

slide-111
SLIDE 111

126

Data-Driven Guides InfoVis ‘16

slide-112
SLIDE 112

Rising Star BRONZE: Nam Wook Kim

2017

127

slide-113
SLIDE 113

Lazy data binding: A process model for 2D visualizations

128

slide-114
SLIDE 114

Data Tables Vector Graphics Glyph Collection Visual Encodings Views Raw Data transform data edit graphics map variable to channel transform view join data with graphics Anchor Points & Segments bezier curves, masks, ... data -> planar, retinal rotate, scale, ... aggregate, transpose, pivot, ...

??

129

slide-115
SLIDE 115

Consistent with existing design applications Interpretable by non-programmers Composable to create novel visualizations

130

slide-116
SLIDE 116

131

CHI ‘18

Formative Study

slide-117
SLIDE 117

132

slide-118
SLIDE 118

Generative Operator: Repeat by Data

data scope of circle 1 data scope of circle 2 data scope of circle 3

Data Illustrator CHI ‘18

slide-119
SLIDE 119

Generative Operator: Partition by Data

data scope of rect 1 data scope of rect2 data scope of rect 3

Data Illustrator CHI ‘18

slide-120
SLIDE 120

Repeat(grid)

Repeat + Repeat

Repeat(path) Partition(rect) Repeat(rect)

Repeat + Partition

135

Data Illustrator CHI ‘18

slide-121
SLIDE 121
slide-122
SLIDE 122
slide-123
SLIDE 123
slide-124
SLIDE 124
slide-125
SLIDE 125
slide-126
SLIDE 126

142

slide-127
SLIDE 127
slide-128
SLIDE 128

147

CHI 2018 Released app with tutorials & gallery http://www.data-illustrator.com/ Used in graduate visualization classes More than 35,000 users so far

slide-129
SLIDE 129

Frédérik Ruys

Information designer @Vizualism, lecturer visual storytelling Dutch Infographic Conference & Dataviz Festival

“The original infographic was published in 2017 in Vrij Nederland and took me several hours to complete in Illustrator. Using Data Illustrator it would have taken me just a few minutes.”

http://data-illustrator.com/app/

@fruys

148

Data Illustrator CHI ‘18

slide-130
SLIDE 130

Scalable Interaction Techniques

Multivariate linked analysis Event sequence data analysis

Visualization Process Models

Natural language interaction Graphical authoring tools

Thank you. Questions?

http://www.zcliu.org