Raising the Bar (Chart)

Transcription

1 Raising the Bar (Chart) THE NEXT GENERATION OF VISUALIZATION TOOLS Jeffrey Univ. of Washington + Trifacta

2

3 ?

4 Visualizing Big Data!

5 Stratified Sampling

6 Binned Aggregation

7 immens: Real-Time Visual Querying of Big Data with Z. Liu & B. Jiang

8

9 immens - Real-time Querying of Big Data Full Data Cube Σ Σ Σ Σ SERVER with Z. Liu, B. Jiang [EuroVis 13]

10 immens - Real-time Querying of Big Data Full Data Cube Σ Σ Σ Σ SERVER σ WEB BROWSER Σ with Z. Liu, B. Jiang [EuroVis 13]

11 immens - Real-time Querying of Big Data Full Data Cube Σ Σ Σ Σ SERVER σ WEB BROWSER Σ 50 fps interactive querying of summary visualizations of billions of data points. with Z. Liu, B. Jiang [EuroVis 13]

12 WebGL!

13

14 Perception!

15 Position 1 Position 2 Position 3 Length 1 Length 2 Angle Area (Circular) Area (Rect 1) Area (Rect 2) Log Absolute Estimation Error Graphical Perception [CHI 09, CHI 10, InfoVis 10 ] Experiments to assess the effectiveness of visual encodings.

16 Cognitive Color Models [CHI 12, EuroVis 13] Novel measures informing color-concept maps & palette design.

17

18 ???

19

20

21 Visualization Tools

22

23 Raising the Bar (Chart) THE NEXT GENERATION OF VISUALIZATION TOOLS Jeffrey Univ. of Washington + Trifacta

24 How might we create visualizations?

25

26

27

28 ggplot(diamonds, aes(x=price, fill=cut)) + geom_bar(position="dodge")

29 ggplot(diamonds, aes(x=price, fill=cut)) + geom_bar(position="dodge")

30

31

32

33 Graphics APIs Processing, OpenGL, Java2D

34 Component Architectures Prefuse, Flare, Improvise, VTK Graphics APIs Processing, OpenGL, Java2D

35 Chart Typologies Excel, Many Eyes, Google Charts Component Architectures Prefuse, Flare, Improvise, VTK Graphics APIs Processing, OpenGL, Java2D

36 Chart Typologies Excel, Many Eyes, Google Charts Visual Analysis Grammars VizQL, ggplot2 Component Architectures Prefuse, Flare, Improvise, VTK Graphics APIs Processing, OpenGL, Java2D

37 Ease-of-Use Chart Typologies Excel, Many Eyes, Google Charts Visual Analysis Grammars VizQL, ggplot2 Component Architectures Prefuse, Flare, Improvise, VTK Graphics APIs Processing, OpenGL, Java2D Expressiveness

38 Ease-of-Use Chart Typologies Excel, Many Eyes, Google Charts Visual Analysis Grammars VizQL, ggplot2 Visualization Grammars Protovis, D3.js Component Architectures Prefuse, Flare, Improvise, VTK Graphics APIs Processing, OpenGL, Java2D Expressiveness

39 Chart Typologies Excel, Many Eyes, Google Charts Visual Analysis Grammars VizQL, ggplot2 Visualization Grammars Protovis, D3.js Component Architectures Prefuse, Flare, Improvise, VTK Charting Tools Declarative Languages Programming Toolkits Graphics APIs Processing, OpenGL, Java2D

41 What is a Declarative Language?

42 What is a Declarative Language? Programming by describing what, not how

43 What is a Declarative Language? Programming by describing what, not how Separate specification (what you want) from execution (how it should be computed)

44 What is a Declarative Language? Programming by describing what, not how Separate specification (what you want) from execution (how it should be computed) In contrast to imperative programming, where you must give explicit steps.

45 What is a Declarative Language? Programming by describing what, not how Separate specification (what you want) from execution (how it should be computed) In contrast to imperative programming, where you must give explicit steps. d3.selectall("rect").data(my_data).enter().append("rect").attr("x", function(d) { return xscale(d.foo); }).attr("y", function(d) { return yscale(d.bar); })

46 Table SELECT customer_id, customer_name, COUNT(order_id) as total FROM customers INNER JOIN orders ON customers.customer_id = orders.customer_id GROUP BY customer_id, customer_nam HAVING COUNT(order_id) > 5 ORDER BY COUNT(order_id) DESC HTML / CSS SQL

48 Chart Typologies Excel, Many Eyes, Google Charts Visual Analysis Grammars VizQL, ggplot2, Vegalite Visualization Grammars Protovis, D3.js, Vega Component Architectures Prefuse, Flare, Improvise, VTK Charting Tools Declarative Languages Programming Toolkits Graphics APIs Processing, OpenGL, Java2D

49 Why Declarative Languages?

50 Why Declarative Languages? Faster iteration. Less code. Larger user base.

51 Why Declarative Languages? Faster iteration. Less code. Larger user base. Better visualization. Smart defaults.

52 Why Declarative Languages? Faster iteration. Less code. Larger user base. Better visualization. Smart defaults. Reuse. Write-once, then re-apply.

53 Why Declarative Languages? Faster iteration. Less code. Larger user base. Better visualization. Smart defaults. Reuse. Write-once, then re-apply. Performance. Optimization, scalability.

54 Why Declarative Languages? Faster iteration. Less code. Larger user base. Better visualization. Smart defaults. Reuse. Write-once, then re-apply. Performance. Optimization, scalability. Portability. Multiple devices, renderers, inputs.

55 Why Declarative Languages? Faster iteration. Less code. Larger user base. Better visualization. Smart defaults. Reuse. Write-once, then re-apply. Performance. Optimization, scalability. Portability. Multiple devices, renderers, inputs. Programmatic generation. Write programs which output visualizations. Automated search & recommendation.

56 Chart Typologies Excel, Many Eyes, Google Charts Visual Analysis Grammars VizQL, ggplot2, Vegalite Visualization Grammars Protovis, D3.js, Vega Component Architectures Prefuse, Flare, Improvise, VTK Charting Tools Declarative Languages Programming Toolkits Graphics APIs Processing, OpenGL, Java2D

57 Chart Typologies Excel, Many Eyes, Google Charts?! Charting Tools Visual Analysis Grammars VizQL, ggplot2, Vegalite Visualization Grammars Protovis, D3.js, Vega Component Architectures Prefuse, Flare, Improvise, VTK Declarative Languages Programming Toolkits Graphics APIs Processing, OpenGL, Java2D

58 Visual Analysis Grammars VizQL, ggplot2, Vegalite Visualization Grammars Protovis, D3.js, Vega Component Architectures Prefuse, Flare, Improvise, VTK Declarative Languages Programming Toolkits Graphics APIs Processing, OpenGL, Java2D

59 Interactive Data Exploration Tableau, Lyra, Polestar, Voyager Visual Analysis Grammars VizQL, ggplot2, Vegalite Visualization Grammars Protovis, D3.js, Vega Component Architectures Prefuse, Flare, Improvise, VTK Graphical Interfaces Declarative Languages Programming Toolkits Graphics APIs Processing, OpenGL, Java2D

60

61 Voyager Polestar Lyra Vegalite Vega D3.js JavaScript SVG Canvas

64 Visualization Grammar

65 Visualization Grammar Data Input data to visualize

66 Visualization Grammar Data Transforms Input data to visualize Grouping, stats, projection, layout

67 Visualization Grammar Data Transforms Scales Input data to visualize Grouping, stats, projection, layout Map data values to visual values

68 Visualization Grammar Data Transforms Scales Guides Input data to visualize Grouping, stats, projection, layout Map data values to visual values Axes & legends visualize scales

69 Visualization Grammar Data Transforms Scales Guides Marks Input data to visualize Grouping, stats, projection, layout Map data values to visual values Axes & legends visualize scales Data-representative graphics Area Rect Symbol Image Line Text Rule Arc

70 Area Rect Symbol Image Line Text Rule Arc MARKS: Graphical Primitives

71

72

73 { } "width": 400, "height": 200, "data": [ {"name": "table", "url": "/data/sample.json"} ], "scales": [ { "name": "x","type": "ordinal", "range": "width", "domain": {"data": "table", "field": "x"} }, { "name": "y", "range": height", "nice": true, "domain": {"data": "table", "field": "y"} } ], "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [{ "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "x"}, "width": {"scale": "x", "band": true, "offset": -1}, "y": {"scale": "y", "field": "y"}, "y2": {"scale": "y", "value": 0}, "fill": {"value": "steelblue"} } } }]

74 { } "width": 400, "height": 200, "data": [ {"name": "table", "url": "/data/sample.json"} ], "scales": [ { "name": "x","type": "ordinal", "range": "width", "domain": {"data": "table", "field": "x"} }, { "name": "y", "range": height", "nice": true, "domain": {"data": "table", "field": "y"} } ], "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [{ "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "x"}, "width": {"scale": "x", "band": true, "offset": -1}, "y": {"scale": "y", "field": "y"}, "y2": {"scale": "y", "value": 0}, "fill": {"value": "steelblue"} } } }] Data + Transforms

75 { } "width": 400, "height": 200, "data": [ {"name": "table", "url": "/data/sample.json"} ], "scales": [ { "name": "x","type": "ordinal", "range": "width", "domain": {"data": "table", "field": "x"} }, { "name": "y", "range": height", "nice": true, "domain": {"data": "table", "field": "y"} } ], "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [{ "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "x"}, "width": {"scale": "x", "band": true, "offset": -1}, "y": {"scale": "y", "field": "y"}, "y2": {"scale": "y", "value": 0}, "fill": {"value": "steelblue"} } } }] Data + Transforms Scales

76 { } "width": 400, "height": 200, "data": [ {"name": "table", "url": "/data/sample.json"} ], "scales": [ { "name": "x","type": "ordinal", "range": "width", "domain": {"data": "table", "field": "x"} }, { "name": "y", "range": height", "nice": true, "domain": {"data": "table", "field": "y"} } ], "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [{ "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "x"}, "width": {"scale": "x", "band": true, "offset": -1}, "y": {"scale": "y", "field": "y"}, "y2": {"scale": "y", "value": 0}, "fill": {"value": "steelblue"} } } }] Data + Transforms Scales Guides

77 { } "width": 400, "height": 200, "data": [ {"name": "table", "url": "/data/sample.json"} ], "scales": [ { "name": "x","type": "ordinal", "range": "width", "domain": {"data": "table", "field": "x"} }, { "name": "y", "range": height", "nice": true, "domain": {"data": "table", "field": "y"} } ], "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [{ } }] "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "x"}, } (Data + Transforms) "width": {"scale": "x", "band": true, "offset": -1}, "y": {"scale": "y", "field": "y"}, "y2": {"scale": "y", "value": 0}, "fill": {"value": "steelblue"} Data + Transforms Scales Guides Marks

78

80 Lyra Vega D3.js JavaScript SVG Canvas

81 idl.cs.washington.edu/projects/lyra

82 Lyra A Visualization Design Environment Driving Shifts into Reverse by Hannah Fairfield, NYTimes

83 Lyra A Visualization Design Environment by William Playfair

84 Lyra A Visualization Design Environment based on the Railway Timetable by E. J. Marey

85 Lyra Vega D3.js JavaScript SVG Canvas

86 Lyra Vegalite Vega D3.js JavaScript SVG Canvas

87 Vegalite A formal model for statistical graphics Inspired by Grammar of Graphics & Tableau Includes data transformation & encoding

88 Vegalite A formal model for statistical graphics Inspired by Grammar of Graphics & Tableau Includes data transformation & encoding Uses a simple, concise JSON format that compiles to full-blown Vega specifications Easy programmatic generation!

89 { } "marktype": "point", "enc": { "x": {"name":"horse_power", "type":"q"}, "y": {"name":"miles_per_gallon", "type":"q"} }

90 { } "marktype": "point", "enc": { "x": {"name":"horse_power", "type":"q"}, "y": {"name":"miles_per_gallon", "type":"q"}, "color": {"name":"cylinders", "type":"o"} }

91 { } "marktype": "point", "enc": { "x": {"name":"horse_power", "type":"q"}, "y": {"name":"miles_per_gallon", "type":"q"}, "col": {"name":"cylinders", "type":"o"} }

92 { } "marktype": "point", "enc": { "x": {"name":"horse_power", "type":"q"}, "y": {"name":"miles_per_gallon", "type":"q"} }

93 { } "marktype": "point", "enc": { "x": {"name":"horse_power", "type":"q", "bin":{"maxbins":15}}, "y": {"name":"miles_per_gallon", "type":"q", "bin":{"maxbins":15}}, "size": {"name":"*", "type":"q", "aggr":"count"} }

94 Lyra Vegalite Vega D3.js JavaScript SVG Canvas

95 Polestar Lyra Vegalite Vega D3.js JavaScript SVG Canvas

96 Polestar A graphical interface for Vegalite Rapid visualization via drag-and-drop Named in honor of Polaris, the research project that led to Tableau.

97

98 Polestar Lyra Vegalite Vega D3.js JavaScript SVG Canvas

100 Voyager Reduce tedious manual specification

101 Voyager Reduce tedious manual specification Support early-stage data exploration Encourage data coverage Discourage premature fixation

102 Voyager Reduce tedious manual specification Support early-stage data exploration Encourage data coverage Discourage premature fixation Approach: browse a gallery of visualizations

103 Voyager Reduce tedious manual specification Support early-stage data exploration Encourage data coverage Discourage premature fixation Approach: browse a gallery of visualizations Challenge - combinatorial explosion!

104 Voyager Reduce tedious manual specification Support early-stage data exploration Encourage data coverage Discourage premature fixation Approach: browse a gallery of visualizations Challenge - combinatorial explosion! Automatic recommendation of useful views + end-user steering to focus exploration

105

106

107 User

108 Data Set Voyager Visualization Browser User

109 Compass Recommendation Engine Data Schema & Statistics Voyager Visualization Browser User

110 1. Select data variables 2. Apply transformations 3. Pick visual encodings Compass Recommendation Engine Data Schema & Statistics Voyager Visualization Browser User

111 Constrain & rank choices by data type, statistics & perceptual principles. Compass Recommendation Engine Data Schema & Statistics Voyager Visualization Browser User

112 Compass Recommendation Engine Data Schema & Statistics Ranked and Clustered Vegalite Specifications Voyager Visualization Browser User

113 Compass Recommendation Engine Data Schema & Statistics Ranked and Clustered Vegalite Specifications Voyager Visualization Browser User Vegalite Specifications Vegalite Compiler

114 Compass Recommendation Engine Data Schema & Statistics Ranked and Clustered Vegalite Specifications Voyager Visualization Browser User Vegalite Specifications Vega Renderer Vega Specifications Vegalite Compiler

115 Compass Recommendation Engine Data Schema & Statistics Ranked and Clustered Vegalite Specifications Voyager Visualization Browser User Interactive Visualizations Vegalite Specifications Vega Renderer Vega Specifications Vegalite Compiler

116 Compass Recommendation Engine Data Schema & Statistics Ranked and Clustered Vegalite Specifications User Interactive Visualizations Voyager Visualization Browser Interactive Visualizations Vegalite Specifications Vega Renderer Vega Specifications Vegalite Compiler

117 Compass Recommendation Engine User User Selection Interactive Visualizations User Selection, Data Schema & Statistics Voyager Visualization Browser Interactive Visualizations Ranked and Clustered Vegalite Specifications Vegalite Specifications Vega Renderer Vega Specifications Vegalite Compiler

118 Improves data coverage! +3x variable sets shown +1.5x more interacted with Compass Recommendation Engine User User Selection Interactive Visualizations User Selection, Data Schema & Statistics Voyager Visualization Browser Interactive Visualizations Ranked and Clustered Vegalite Specifications Vegalite Specifications Vega Renderer Vega Specifications Vegalite Compiler

121 One last thing

122 What about interaction?

125 Event Streams mousedown mouseup,... Signals brush_start brush_end Scale Inversions -x -y -x -y Predicates inside_brush Circle Mark rule fill red green blue inside_brush fill grey Reactive Vega Satyanarayan et al. [UIST 14]

126 Event Streams mousedown mouseup,... Signals brush_start brush_end Scale Inversions -x -y -x -y Predicates inside_brush Circle Mark rule fill red green blue inside_brush fill grey Key Insight: Treat user input as first-class streaming data Adapt methods from functional reactive programming

127 Vega 2.0 ( Reactive Vega ) Single declarative model for specifying visual encodings + interaction techniques

128 Vega 2.0 ( Reactive Vega ) Single declarative model for specifying visual encodings + interaction techniques JSON > Reactive Dataflow Graph Designed ground-up for streaming data Performance matches or exceeds D3

129 Vega 2.0 ( Reactive Vega ) Single declarative model for specifying visual encodings + interaction techniques JSON > Reactive Dataflow Graph Designed ground-up for streaming data Performance matches or exceeds D3 Portable Client (browser) or server-side (node.js) Pick your renderer: Canvas, SVG, Pick your input: mouse, touch,

130 DimpVis Kondo et al. [InfoVis 14]

132 Open Challenges Designing interactions interactively How to convey + depict interactions? Enhancing the gallery experience Rapid assessment of multiple graphics Embedding large views in small spaces? Improving visualization recommenders Learning from users, domain adaptation

133 Open Challenges Designing interactions interactively How to convey + depict interactions? Enhancing the gallery experience Rapid assessment of multiple graphics Embedding large views in small spaces? Improving visualization recommenders Learning from users, domain adaptation Debugging, debugging, debugging

134 All Open Source

135 vega.github.io

136

137

138 Raising the Bar (Chart) THE NEXT GENERATION OF VISUALIZATION TOOLS Jeffrey