Reactive Building Blocks

Transcription

1 Reactive Building Blocks Interactive Visualizations with Vega Arvind Stanford University Jane Hoffswell Dominik Kanit "Ham" Jeffrey University of Washington 1

2 Three Little Circles * Visual Design var circle = svg.selectall('circle').data([32, 57, 293]); circle.enter().append('circle').attr('fill', 'steelblue').attr('cy', 60).attr('cx', function(d, i) { return i * ; }).attr('r', function(d) { return Math.sqrt(d); }); Map data values to visual properties. Declarative design: specify what we want, rather than how it should be computed. Interaction Design var dragging = null; circle.on('mousedown', function() { dragging = d3.select(this).attr('fill', 'goldenrod'); }); d3.select(window).on('mouseup', function() { dragging.attr('fill', 'steelblue'); dragging = null; }).on('', function() { if (!dragging) return; dragging.attr('cy', d3.event.pagey); d3.event.stoppropagation(); }); Imperative design: define explicit steps of how it should be computed. * Mike Bostock,

3 The Trouble with Imperative Interaction var dragging = null; circle.on('mousedown', function() { dragging = d3.select(this).attr('fill', 'goldenrod'); }); d3.select(window).on('mouseup', function() { dragging.attr('fill', 'steelblue'); dragging = null; }).on('', function() { if (!dragging) return; dragging.attr('cy', d3.event.pagey); d3.event.stoppropagation(); }); 1. Manually maintain state. 2. Re-define visual appearance in multiple locations. 3. Low-level idiosyncrasies. 4. Callback Hell: unpredictable and interleaved execution. 7

4 1. Manually maintain state. 2. Re-define visual appearance in multiple locations. 3. Low-level idiosyncrasies. 4. Callback Hell: unpredictable and interleaved execution. 8

5 1. Manually maintain state. 2. Re-define visual appearance in multiple locations. 3. Low-level idiosyncrasies. 4. Callback Hell: unpredictable and interleaved execution. 9

6 Reactive Programming 10

7 Reactive Programming Events are streaming data. Dynamic variables (signals) automatically update. 10

8 Data + Transforms Scales Guides Marks {... "width": 650, "height": 300, "data": [... {"name": "iris", "url": "data/iris.json"}, {"name": "fields", "values": ["sepalwidth",...] ], "scales": [... {... "name": "color", "type": "ordinal", "domain": {"data": "iris", "field": "species"} "range": "category20" },... ], "legends": [... {"fill": "x", "scale": "color"} ], "marks": [{... "type": "group", "from": {... "data": "fields", "transform": [{"type": "cross"}]... }, "marks": [{... "type": "symbol", "from": {"data": "iris"}, "properties": { "enter": {... "x": {"scale": "sx", "field": "date"}, "y": {"scale": "sy", "field": "price"}, "stroke": {"scale": "sc", "field": "symbol"} }} }], "scales": [{... "name": "sx", "type": "linear", "domain": {"data": "iris", "field": {"parent": "a.data"}, 15

9 Data + Transforms Scales Guides Marks Event Streams + Signals Scale Inversions Predicates Production Rules [mousedown, mouseup] > minx = min(width, event.x) minval = xscale.invert(minx) p(t) = minval t.value maxval fill = p(t)! colorscale(t.category)! gray 16

10 Example Brushing & Linking 17

11 Events are a form of streaming data. A stream of events that occur on rect marks. rect: 19

12 *:mousedown, *:mouseup a single stream merges mousedown and mouseup streams [*:mousedown, *:mouseup] > *: A stream of events that occur between a mousedown and a mouseup (aka drag) stream of events that occur between and mousedown mousedown mousedown mouseup mousedown mouseup mousedown mouseup *:click[event.pagey >= 300] [data.price < 500] filtered stream of click events click click click click click *:{3ms,5ms} stream of events that occur at least 3ms, and at most 5ms, apart (debouncing/throttling) price = 300 pagey = 500 price = 750 pagey = 310 price = 425 pagey = 170 price = 115 pagey = 333 price = 500 pagey = 55 mouseup click click 0ms 2ms 4ms 6ms 8ms 10ms 20

13 mousedown [mousedown, mouseup] > 21

14 mousedown Signal [mousedown, mouseup] > Signal 21

15 mousedown Signal Start [mousedown, mouseup] > Signal End 21

16 mousedown Signal Start Rect Mark [mousedown, mouseup] > Signal End 22

17 mousedown Signal Start Rect Mark [mousedown, mouseup] > Signal End 22

18 mousedown Signal Start Predicate [mousedown, mouseup] > Signal End 23

19 mousedown Signal Start Predicate Selection xstart xpt xend && ystart ypt yend [mousedown, mouseup] > Signal End 23

20 mousedown Signal Start Selection xstart xpt xend && ystart ypt yend [mousedown, mouseup] > Signal End 24

21 mousedown Signal Start Circle Mark Fill Rule Selection xstart xpt xend && ystart ypt yend [mousedown, mouseup] > Signal End 24

22 mousedown Signal Start Circle Mark Fill Rule if (Scaled species) blue orange green Selection xstart xpt xend && ystart ypt yend [mousedown, mouseup] > Signal End 24

23 mousedown Signal Start Circle Mark Fill Rule if else gray (Scaled species) blue orange green Selection xstart xpt xend && ystart ypt yend [mousedown, mouseup] > Signal End 24

24

25 mousedown Signal Start Selection xstart xpt xend && ystart ypt yend [mousedown, mouseup] > Signal End 26

26 mousedown Signal Start event.target Scatterplot Selection xstart xpt xend && ystart ypt yend [mousedown, mouseup] > Signal End 26

27 mousedown Signal Start Scale Inversion event.target Scatterplot Selection xstart xpt xend && ystart ypt yend [mousedown, mouseup] > Signal End Scale Inversion 27

28 mousedown Signal Start Scale Inversion event.target Scatterplot Query sepalstart sepalpt sepalend && petalstart petalpt petalend [mousedown, mouseup] > Signal End Scale Inversion 28

29 mousedown Signal Start Scale Inversion Circle Mark Fill Rule if else gray (Scaled species) blue orange green event.target Scatterplot Query sepalstart sepalpt sepalend && petalstart petalpt petalend [mousedown, mouseup] > Signal End Scale Inversion 28

30 mousedown Signal Start Scale Inversion Circle Mark Fill Rule if else gray (Scaled species) blue orange green event.target Scatterplot [mousedown, mouseup] > Signal End Scale Inversion 29

31 mousedown Start Scale Inversion Scatterplot [mousedown, mouseup] > End Scale Inversion Circle Mark Fill Rule if else gray (Scaled species) blue orange green 30

32 mousedown Start Declarative Interaction Design Scale Inversion Scatterplot [mousedown, mouseup] > Scale Inversion End Circle Mark Fill Rule if else gray (Scaled species) blue orange green 30

33 mousedown Start Scale Inversion Declarative Interaction Design Faster iteration + accessible to a larger audience. Scatterplot [mousedown, mouseup] > Scale Inversion End Circle Mark Fill Rule if else gray (Scaled species) blue orange green 30

34 mousedown Start Scale Inversion Declarative Interaction Design Faster iteration + accessible to a larger audience. Scatterplot Performance + scalability. At least 2x faster than D3 + callbacks. [mousedown, mouseup] > Scale Inversion End Circle Mark Fill Rule if else gray (Scaled species) blue orange green 30

35 mousedown Start Scale Inversion Declarative Interaction Design Faster iteration + accessible to a larger audience. Scatterplot Performance + scalability. At least 2x faster than D3 + callbacks. [mousedown, mouseup] > End Scale Inversion Reuse + portability. Write once. Re-apply with different input data. Re-target to multiple devices, renderers, or modalities. Circle Mark Fill Rule if else gray (Scaled species) blue orange green 30

36 Start Scatterplot Scale Inversion Declarative Interaction Design Faster iteration + accessible to a larger audience. Performance + scalability. At least 2x faster than D3 + callbacks. End Scale Inversion Reuse + portability. Write once. Re-apply with different input data. Re-target to multiple devices, renderers, or modalities. Circle Mark Fill Rule if else gray (Scaled species) blue orange green 31

37 touchstart Start Scale Inversion Declarative Interaction Design Faster iteration + accessible to a larger audience. Scatterplot Performance + scalability. At least 2x faster than D3 + callbacks. [touchstart, touchend] > touchmove End Scale Inversion Reuse + portability. Write once. Re-apply with different input data. Re-target to multiple devices, renderers, or modalities. Circle Mark Fill Rule if else gray (Scaled species) blue orange green 32

38 Demo 33

39 vega.github.io/vega/ 34

40 One more thing... 35

41 Interactive Vega-Lite 36

42 Interactive Vega-Lite (A Sneak Peak) 36

43 can be initialized { } "repeat": {"column": ["hour", "delay", "distance"]}, {... "data": {"url": "data/flights.json"}, Data "mark": "bar", Mark "encoding": {... }... }... "x": {"field": "hour", "bin": true, "type": "quantitative",}, "y": {"field": "*", "aggregate": "count", "type": "quantitative"} Transforms + Scales & Guides (not shown) 41

44 can be initialized {... "repeat": {"column": ["hour", "delay", "distance"]}, "spec": { "data": {"url": "data/flights.json"}, "mark": "bar", "encoding": { "x": {"field": {"repeat": "column"}, "bin": true, "type": "quantitative"}, "y": {"field": "*", "aggregate": "count", "type": "quantitative"} }... }... }... 43

45 { } can be initialized "repeat": {"column": ["hour", "delay", "distance"]}, "spec": { "layers": [{ "data": {"url": "data/flights.json"}, "mark": "bar", "encoding": { "x": {"field": {"repeat": "column"}, "bin": true, "type": "quantitative"}, "y": {"field": "*", "aggregate": "count", "type": "quantitative"} } }, {..., "encoding": {..., "color": {"value": "goldenrod"} } }] } 45

46 { can be initialized "repeat": {"column": ["hour", "delay", "distance"]}, "spec": { "layers": [{..., "mark": "bar", "encoding": { "x": {"field": {"repeat": "column"}, "type": "Q", "bin": true}, "y": {"aggregate": "count", "field": "*", "type": "Q"} } }, {..., } } }] 46

47 { can be initialized "repeat": {"column": ["hour", "delay", "distance"]}, "spec": { "layers": [{..., "select": { "region": { "type": "interval", "project": {"channels": ["x"]},... } } }, {..., } } }] 47

48 { } can be initialized "repeat": {"column": ["hour", "delay", "distance"]}, "spec": { "layers": [{..., "select": { "region": { "type": "interval", "project": {"channels": ["x"]},... } } }, {..., "transform": {"filterwith": "region"} }] } 48

49 { } can be initialized "repeat": {"column": ["hour", "delay", "distance"]}, "spec": { "layers": [{..., "select": { "region": { "type": "interval", "project": {"channels": ["x"]},... } } }, {..., "transform": {"filterwith": "region"} }] } 35 Lines of JSON! 48

50 can be initialized 49

51 Vega: A Platform for Visualization Voyager PoleStar Altair Vega-Lite Lyra Wikipedia Vega D3 JavaScript SVG Canvas 50

52 Vega: A Platform for Visualization Voyager PoleStar Altair Vega-Lite Lyra Wikipedia Vega D3 JavaScript SVG Canvas 50

53 Vega: A Platform for Visualization Voyager PoleStar Altair Vega-Lite Lyra Wikipedia Vega D3 JavaScript SVG Canvas 50

54 Vega: A Platform for Visualization Voyager PoleStar Altair Vega-Lite Lyra Wikipedia? Vega D3 JavaScript SVG Canvas 50

55 vega.github.io 51