Tax Advisors and Conflicted Citizens - Georgetown University
VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs...
Transcript of VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs...
![Page 1: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/1.jpg)
Arvind Satyanarayan @arvindsatya1 Stanford University
1
Dominik Moritz @domoritz Kanit "Ham" Wongsuphasawat @kanitw Jeffrey Heer @jeffrey_heer University of Washington
Vega-Lite A Grammar of Interactive Graphics
![Page 2: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/2.jpg)
2
Vega Declarative Interactive Data Visualization
![Page 3: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/3.jpg)
4
Vega:describes what the visualization should look like vs. how it should be computed.
Declarative Interactive Data Visualization
![Page 4: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/4.jpg)
5
Vega:describes what the visualization should look like vs. how it should be computed.
Declarative Interactive Data Visualization
Data
Transforms
Scales
Guides
Marks
Event Streams
Signals
Scale Inversions
Predicates
Production Rules
[mousedown, mouseup] > mousemove
minX := min(downX, event.x)
minVal := xScale.invert(minX)
p(t) := t.value ∈ [minVal, maxVal]
fill := p(t) ! colorScale(t.category) ∅ ! gray
Declarative Interaction Design. Satyanarayan, Wongsuphasawat, Heer. UIST 2014. Reactive Vega. Satyanarayan, et al. InfoVis 2015.
![Page 5: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/5.jpg)
6
Interactive performance
~2x faster than D3.
Vega: Maximize Expressivity and Performance
![Page 6: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/6.jpg)
7
![Page 7: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/7.jpg)
8
![Page 8: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/8.jpg)
9
Expressivity & performance are important.
But so is concise specification.
Rapid authoring critical for exploratory visualization.
Small language vocabulary promotes alternative designs and systematic enumeration for higher-level applications.
![Page 9: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/9.jpg)
Arvind Satyanarayan @arvindsatya1 Stanford University
10
Dominik Moritz @domoritz Kanit "Ham" Wongsuphasawat @kanitw Jeffrey Heer @jeffrey_heer University of Washington
Vega-Lite A Grammar of Interactive Graphics
![Page 10: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/10.jpg)
Arvind Satyanarayan @arvindsatya1 Stanford University
11
Dominik Moritz @domoritz Kanit "Ham" Wongsuphasawat @kanitw Jeffrey Heer @jeffrey_heer University of Washington
Vega-Lite Grammar of Graphics + Grammar of Interaction Concise, high-level Vega-Lite specifications Complete, low-level Vega specifications
compiled to
![Page 11: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/11.jpg)
Arvind Satyanarayan @arvindsatya1 Stanford University
12
Dominik Moritz @domoritz Kanit "Ham" Wongsuphasawat @kanitw Jeffrey Heer @jeffrey_heer University of Washington
Vega-Lite Grammar of Graphics + Grammar of Interaction Concise, high-level Vega-Lite specifications Complete, low-level Vega specifications
compiled to
![Page 12: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/12.jpg)
13
Single View: Unit Specification{ "data": {"url": "data/weather.csv"}, "mark": "circle", "encoding": { "x": { "field": "wind", "type": "quantitative" }, "y": { "field": "temp_max", "type": "quantitative" } } }
![Page 13: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/13.jpg)
14
Single View: Unit Specification{ "data": {"url": "data/weather.csv"}, "mark": "circle", "encoding": { "x": { "field": "wind", "type": "quantitative" }, "y": { "field": "temp_max", "type": "quantitative" } } }
Data +
![Page 14: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/14.jpg)
15
Single View: Unit Specification{ "data": {"url": "data/weather.csv"}, "mark": "circle", "encoding": { "x": { "field": "wind", "type": "quantitative" }, "y": { "field": "temp_max", "type": "quantitative" } } }
Data +
Marks
![Page 15: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/15.jpg)
16
Single View: Unit Specification{ "data": {"url": "data/weather.csv"}, "mark": "circle", "encoding": { "x": { "field": "wind", "type": "quantitative" }, "y": { "field": "temp_max", "type": "quantitative" } } }
Data +
Marks
Encoding
![Page 16: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/16.jpg)
{... "data": {"url": "data/cars.json"}, "mark": "circle", "encoding": {... "x": {... "field": "Horsepower", "type": "quantitative", "bin": true }, "y": {... "field": "Miles_per_Gallon", "type": "quantitative", "bin": true }, "size": {... "field": "*", "type": "quantitative", "aggregate": "count", "scale": {"zero": true}, "legend": {"title": "# Cars"} }, }... }...
{... "data": {"url": "data/cars.json"}, "mark": "circle", "encoding": {... "x": {... "field": "Horsepower", "type": "quantitative", "bin": true }, "y": {... "field": "Miles_per_Gallon", "type": "quantitative", "bin": true }, "size": {... "field": "*", "type": "quantitative", "aggregate": "count", "scale": {"zero": true}, "legend": {"title": "# Cars"} }, }... }...
17
Single View: Unit Specification{ "data": {"url": "data/weather.csv"}, "transform": { "filter": "datum.location === 'Seattle'" }, "mark": "circle", "encoding": { "x": { "field": "wind", "type": "quantitative" }, "y": { "field": "temp_max", "type": "quantitative" } } }
Data +
Marks
Transforms
Encoding
![Page 17: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/17.jpg)
{... "data": {"url": "data/cars.json"}, "mark": "circle", "encoding": {... "x": {... "field": "Horsepower", "type": "quantitative", "bin": true }, "y": {... "field": "Miles_per_Gallon", "type": "quantitative", "bin": true }, "size": {... "field": "*", "type": "quantitative", "aggregate": "count", "scale": {"zero": true}, "legend": {"title": "# Cars"} }, }... }...
{... "data": {"url": "data/cars.json"}, "mark": "circle", "encoding": {... "x": {... "field": "Horsepower", "type": "quantitative", "bin": true }, "y": {... "field": "Miles_per_Gallon", "type": "quantitative", "bin": true }, "size": {... "field": "*", "type": "quantitative", "aggregate": "count", "scale": {"zero": true}, "legend": {"title": "# Cars"} }, }... }...
18
Single View: Unit Specification{ "data": {"url": “data/weather.csv"}, "transform": { "filter": "datum.location === 'Seattle'" }, "mark": "circle", "encoding": { "x": { "field": "wind", "type": "quantitative", "bin": true }, "y": { "field": "temp_max", "type": "quantitative", "bin": true }, "size": { "field": "*", "aggregate": "count", "type": "quantitative" } } }
Data +
Marks
Transforms
Encoding
![Page 18: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/18.jpg)
{... "data": {"url": "data/cars.json"}, "mark": "circle", "encoding": {... "x": {... "field": "Horsepower", "type": "quantitative", "bin": true }, "y": {... "field": "Miles_per_Gallon", "type": "quantitative", "bin": true }, "size": {... "field": "*", "type": "quantitative", "aggregate": "count", "scale": {"zero": true}, "legend": {"title": "# Cars"} }, }... }...
{... "data": {"url": "data/cars.json"}, "mark": "circle", "encoding": {... "x": {... "field": "Horsepower", "type": "quantitative", "bin": true }, "y": {... "field": "Miles_per_Gallon", "type": "quantitative", "bin": true }, "size": {... "field": "*", "type": "quantitative", "aggregate": "count", "scale": {"zero": true}, "legend": {"title": "# Cars"} }, }... }...
19
Single View: Unit Specification{ "data": {"url": “data/weather.csv"}, "transform": { "filter": "datum.location === 'Seattle'" }, "mark": "circle", "encoding": { "x": { "field": "wind", "type": "quantitative", "bin": true }, "y": { "field": "temp_max", "type": "quantitative", "bin": true }, "size": { "field": "*", "aggregate": "count", "type": "quantitative" } } }
Data +
Marks
Transforms
Encoding
(Scales + Guides)
![Page 19: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/19.jpg)
{... "data": {"url": "data/cars.json"}, "mark": "circle", "encoding": {... "x": {... "field": "Horsepower", "type": "quantitative", "bin": true }, "y": {... "field": "Miles_per_Gallon", "type": "quantitative", "bin": true }, "size": {... "field": "*", "type": "quantitative", "aggregate": "count", "scale": {"zero": true}, "legend": {"title": "# Cars"} }, }... }...
{... "data": {"url": "data/cars.json"}, "mark": "circle", "encoding": {... "x": {... "field": "Horsepower", "type": "quantitative", "bin": true }, "y": {... "field": "Miles_per_Gallon", "type": "quantitative", "bin": true }, "size": {... "field": "*", "type": "quantitative", "aggregate": "count", "scale": {"zero": true}, "legend": {"title": "# Cars"} }, }... }...
20
Data +
Marks
{ ...
"encoding": { "x": { "field": "wind", "type": "quantitative", "bin": true }, "y": { "field": "temp_max", "type": "quantitative", "bin": true }, "size": { "field": "*", "aggregate": "count", "type": "quantitative", "scale": {"zero": true}, "legend": {"title": "# of days"} } } }
Transforms
Encoding
(Scales + Guides)
Single View: Unit Specification
![Page 20: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/20.jpg)
https://vega.github.io/vega-lite/docs/
![Page 21: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/21.jpg)
View Composition
22
![Page 22: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/22.jpg)
View Composition
23
layer: [ ] =,
![Page 23: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/23.jpg)
View Composition
24
layer: [ ] =, vconcat: [ ] =,
![Page 24: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/24.jpg)
View Composition
25
layer: [ ] =,
repeat row: [A,B]
A
B
=
vconcat: [ ] =,
![Page 25: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/25.jpg)
View Composition
26
layer: [ ] =,
repeat row: [A,B]
A
B
=facet row: C
=c1
c2
vconcat: [ ] =,
![Page 26: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/26.jpg)
27
View Composition
Single View Single View
Layer
Concat
Single View
![Page 27: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/27.jpg)
Layering
28
{ "data": {"url": "data/weather-sea.csv"}, "mark": "bar", "encoding": { "x": { "timeUnit": "month", "field": "date", "type": "T" }, "y": { "aggregate": "mean", "field": "precipitation", "type": "Q" }, "color": {"value": "#77b2c7"} } }
![Page 28: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/28.jpg)
Layering
29
{ "layer": [
{
}, { "data": {"url": "data/weather-sea.csv"}, "mark": "line", "encoding": { "x": { "timeUnit": "month", "field": "date", "type": "T" }, "y": { "aggregate": "mean", "field": "temp_max", "type": "Q" } } }] }
MEA
N(p
reci
pita
tion)
, MEA
N(te
mpe
ratu
re)
![Page 29: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/29.jpg)
Layering
30
{ "layer": [ {
}, {
} ], "resolve": { "y": { "scale": "independent" } } }
![Page 30: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/30.jpg)
Arvind Satyanarayan @arvindsatya1 Stanford University
31
Dominik Moritz @domoritz Kanit "Ham" Wongsuphasawat @kanitw Jeffrey Heer @jeffrey_heer University of Washington
Vega-Lite Grammar of Graphics + Grammar of Interaction Concise, high-level Vega-Lite specifications Complete, low-level Vega specifications
compiled to
![Page 31: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/31.jpg)
Arvind Satyanarayan @arvindsatya1 Stanford University
32
Dominik Moritz @domoritz Kanit "Ham" Wongsuphasawat @kanitw Jeffrey Heer @jeffrey_heer University of Washington
Vega-Lite Grammar of Graphics + Grammar of Interaction Concise, high-level Vega-Lite specifications Complete, low-level Vega specifications
compiled to
![Page 32: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/32.jpg)
33
Selection
![Page 33: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/33.jpg)
points of interest,
34
an abstraction that defines event processing, and a predicate function for inclusion testing.
Selection
![Page 34: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/34.jpg)
35
Vega-Lite Selections
{... "data": {"url": "data/cars.json"}, "mark": "circle", "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": {"field": "Origin", "type": "N"} }... }...
Selections define backing data points, event processing, and a predicate function.
![Page 35: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/35.jpg)
37
{... "data": {"url": "data/cars.json"}, "mark": "circle", "select": {... "picked": {"type": "point"} }, "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": {"field": "Origin", "type": "N"} }... }...
Vega-Lite Selections: A Single Point
Selection types provide defaults values for these three components.Selections define backing data points, event processing, and a predicate function.
![Page 36: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/36.jpg)
39
Vega-Lite Selections:
{... "data": {"url": "data/cars.json"}, "mark": "circle", "select": {... "picked": {"type": "point"} }, "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": [... {"if": "picked", "field": "Origin", "type": "N"}, {"value": "grey"} ]... }... }...
A Single Point
Selection types provide defaults values for these three components.Selections define backing data points, event processing, and a predicate function.
![Page 37: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/37.jpg)
41
{... "data": {"url": "data/cars.json"}, "mark": "circle", "select": {... "picked": {"type": "list"} }, "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": [... {"if": "picked", "field": "Origin", "type": "N"}, {"value": "grey"} ]... }... }...
Vega-Lite Selections: Multiple Points
Selection types provide defaults values for these three components.Selections define backing data points, event processing, and a predicate function.
![Page 38: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/38.jpg)
42
{... "data": {"url": "data/cars.json"}, "mark": "circle", "select": {... "picked": {"type": "list", "on": "mouseover"} }, "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": [... {"if": "picked", "field": "Origin", "type": "N"}, {"value": "grey"} ]... }... }...
Vega-Lite Selections: Multiple Points
Selection types provide defaults values for these three components.Selections define backing data points, event processing, and a predicate function.
![Page 39: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/39.jpg)
44
{... "data": {"url": "data/cars.json"}, "mark": "circle", "select": {... "picked": {"type": "interval"} }, "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": [... {"if": "picked", "field": "Origin", "type": "N"}, {"value": "grey"} ]... }... }...
Vega-Lite Selections: Continuous Region
Selection types provide defaults values for these three components.Selections define backing data points, event processing, and a predicate function.
![Page 40: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/40.jpg)
45
Selection Transformsmanipulate a selection's semantics (points of interest, event processing, or predicate function).
![Page 41: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/41.jpg)
46
Selection Transformsmanipulate a selection's semantics (points of interest, event processing, or predicate function).
toggle — when events occurs, toggles a point in/out of selection; sdfsdf automatically instantiated for list selections.
translate — when events occur, offsets spatial properties/data values; sdfsdfsdfs automatically instantiated for interval selections.
zoom — when events occur, applies a scale factor to selected points.
nearest — accelerates selection via voronoi tessellations.
project — modifies predicate to determine inclusion based on fields or channels.
![Page 42: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/42.jpg)
47
{... "data": {"url": "data/cars.json"}, "mark": "circle", "select": {... "picked": {"type": "list", "on": "mouseover"} }, "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": [... {"if": "picked", "field": "Origin", "type": "N"}, {"value": "grey"} ]... }... }...
Vega-Lite Selections: Multiple Points
Selection Transforms — manipulate a selection's semantics. (backing data points, event processing, or predicate function).
Multiple Points
![Page 43: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/43.jpg)
{... "data": {"url": "data/cars.json"}, "mark": "circle", "select": {... "id": {... "type": "list", "on": "mouseover" } }, "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": [... {"if": "id", "field": "Origin", "type": "N"}, {"value": "grey"} ]... }... }...
{... "data": {"url": "data/cars.json"}, "mark": "circle", "select": {... "picked": {... "type": "list", "on": "mouseover", "nearest": true }... }, "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": [... {"if": "picked", "field": "Origin", "type": "N"}, {"value": "grey"} ]... }... }...
50
Vega-Lite Selections: Multiple Points
Selection Transforms — manipulate a selection's semantics. (backing data points, event processing, or predicate function).
(event processing).
![Page 44: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/44.jpg)
{... "data": {"url": "data/cars.json"}, "mark": "circle", "select": {... "id": {... "type": "list", "on": "mouseover" } }, "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": [... {"if": "id", "field": "Origin", "type": "N"}, {"value": "grey"} ]... }... }...
{... "data": {"url": "data/cars.json"}, "mark": "circle", "select": {... "picked": {... "type": "list", "nearest": true, "project": {"fields": ["Origin"]} }... }, "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": [... {"if": "picked", "field": "Origin", "type": "N"}, {"value": "grey"} ]... }... }...
52
Vega-Lite Selections: Multiple Origins
Selection Transforms — manipulate a selection's semantics. (backing data points, event processing, or predicate function).
(predicate function).
![Page 45: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/45.jpg)
53
{... "data": {"url": "data/cars.json"}, "mark": "circle", "select": {... "picked": {"type": "interval"} }, "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": [... {"if": "picked", "field": "Origin", "type": "N"}, {"value": "grey"} ]... }... }...
Vega-Lite Selections: Continuous Region
![Page 46: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/46.jpg)
55
{... "data": {"url": "data/cars.json"}, "mark": "circle", "select": {... "picked": { "type": "interval", "project": {"channels": ["x"]} } }, "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": [... {"if": "picked", "field": "Origin", "type": "N"}, {"value": "grey"} ]... }... }...
Vega-Lite Selections: Continuous Region (X)
![Page 47: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/47.jpg)
56
{... "data": {"url": "data/cars.json"}, "mark": "circle", "select": {... "picked": { "type": "interval", "project": {"channels": ["y"]} } }, "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": [... {"if": "picked", "field": "Origin", "type": "N"}, {"value": "grey"} ]... }... }...
Vega-Lite Selections: Continuous Region (Y)
![Page 48: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/48.jpg)
57
{... "data": {"url": "data/cars.json"}, "mark": "circle", "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": {"field": "Origin", "type": "N"} }... }...
Vega-Lite Selections can be initialized
![Page 49: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/49.jpg)
58
{... "data": {"url": "data/cars.json"}, "mark": "circle", "select": {... "grid": {... "type": "interval" }... }, "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": {"field": "Origin", "type": "N"} }... }...
Vega-Lite Selections A Single Point
![Page 50: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/50.jpg)
60
{... "data": {"url": "data/cars.json"}, "mark": "circle", "select": {... "grid": {... "type": "interval", "init": {"scales": true} }... }, "encoding": {... "x": {"field": "Horsepower", "type": "Q"}, "y": {"field": "Miles_per_Gallon", "type": "Q"}, "color": {"field": "Origin", "type": "N"} }... }...
Vega-Lite Selections can be initialized
(2) Selection now drives scale domains.(1) Selection is populated with scale domains.
![Page 51: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/51.jpg)
62
{... "data": {"url": "data/cars.json"}, "mark": "circle", "select": {... "grid": {... "type": "interval", "init": {"scales": true} }... }, "encoding": {... "x": { "field": "Horsepower", "type": "Q", "scale": {"domain": {"selection": "grid"}} }, "y": { "field": "Miles_per_Gallon", "type": "Q", "scale": {"domain": {"selection": "grid"}} }, "color": {"field": "Origin", "type": "N"} }... }...
Vega-Lite Selections can be initialized
(2) Selection now drives scale domains.(1) Selection is populated with scale domains.
"zoom": true,
![Page 52: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/52.jpg)
63
{ "repeat": {"column": ["hour", "delay", "distance"]}, { "data": {"url": "data/flights.json"}, "mark": "bar", "encoding": { "x": {"field": "hour", "type": "Q", "bin": true}, "y": {"aggregate": "count", "field": "*", "type": "Q"} } } }
Vega-Lite Layered CrossFiltercan be initialized
![Page 53: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/53.jpg)
64
{... "repeat": {"column": ["hour", "delay", "distance"]}, "spec": { "data": {"url": "data/flights.json"}, "mark": "bar", "encoding": { "x": {"field": {"repeat": "column"}, "type": "Q", "bin": true}, "y": {"aggregate": "count", "field": "*", "type": "Q"} }... }... }...
Vega-Lite Layered CrossFiltercan be initialized
![Page 54: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/54.jpg)
66
{ "repeat": {"column": ["hour", "delay", "distance"]}, "spec": { "layers": [{ "data": {"url": "data/flights.json"}, "mark": "bar", "encoding": { "x": {"field": {"repeat": "column"}, "type": "Q", "bin": true}, "y": {"aggregate": "count", "field": "*", "type": "Q"} } }, { ..., "color": {"value": "goldenrod"} }] } }
Vega-Lite Layered CrossFiltercan be initialized
![Page 55: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/55.jpg)
67
{ "repeat": {"column": ["hour", "delay", "distance"]}, "spec": { "layers": [{ ..., "mark": "bar", "encoding": { "x": {"field": {"repeat": "column"}, "type": "Q", "bin": true}, "y": {"aggregate": "count", "field": "*", "type": "Q"} } }, { ...,
}] } }
Vega-Lite Layered CrossFiltercan be initialized
![Page 56: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/56.jpg)
68
{ "repeat": {"column": ["hour", "delay", "distance"]}, "spec": { "layers": [{ ..., "select": { "region": { "type": "interval", "project": {"channels": ["x"]}, ... } } }, { ...,
}] } }
Vega-Lite Layered CrossFiltercan be initialized
![Page 57: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/57.jpg)
69
{ "repeat": {"column": ["hour", "delay", "distance"]}, "spec": { "layers": [{ ..., "select": { "region": { "type": "interval", "project": {"channels": ["x"]}, ... } } }, { ..., "transform": {"filterWith": "region"} }] } }
Vega-Lite Layered CrossFiltercan be initialized
35 Lines of JSON!!
![Page 58: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/58.jpg)
70
can be initialized
![Page 59: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/59.jpg)
71
Vega-Lite: Systematically Enumerate Designs
Voyager. Wongsuphasawat, Moritz, et al. InfoVis 2015.CompassQL. Wongsuphasawat, Moritz, et al. HILDA 2016.
![Page 60: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/60.jpg)
SVG
72
An Ecosystem of Tools
JavaScript
D3
Vega
Vega-LitePo
leSt
ar
Voya
ger
Lyra
Canvas
Alta
ir
Wik
iped
ia G
raph
![Page 61: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/61.jpg)
73
An Ecosystem of Tools Led by Brian Granger and Jake VanderPlas.
Python API automatically generated from the Vega-Lite JSON schema.
❝It is this type of 1:1:1 mapping between thinking, code, and visualization that is my favorite thing about [Altair]❞ — Dan Saber. https://dansaber.wordpress.com/2016/10/02/a-dramatic-tour-through-pythons-data-visualization-landscape-including-ggplot-and-altair/
Interest from other Python visualization vendors (Matplotlib, Bokeh, Plotly) to make their own Vega-Lite renderers.
❝We see this portion of the effort as much bigger than Altair itself: the Vega and Vega-Lite specifications are perhaps the best existing candidates for a principled lingua franca of data visualization❞ — Altair Team.
SVGJavaScript
D3
Vega
Vega-LitePo
leSt
ar
Voya
ger
Lyra
Canvas
Alta
ir
Wik
iped
ia G
raph
Vega
![Page 62: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/62.jpg)
74
An Ecosystem of Tools
?Databases Programming
Languages
Visualization
How can we automatically partition interactive workloads between client and server?Moritz et al. IEEE VIS Data Systems for Interactive Analysis Workshop 2015.
What inference can we perform over interactive visualization to
accelerate analysis and design?
SVGJavaScript
D3
Vega
Vega-LitePo
leSt
ar
Voya
ger
Lyra
Canvas
Alta
ir
Wik
iped
ia G
raph
![Page 63: VegaLite-interaction (Arvind Satyanarayan's conflicted copy 2016 … · 2020-06-01 · sdfsdfsdfs automatically instantiated for interval selections. zoom — when events occur, applies](https://reader035.fdocuments.in/reader035/viewer/2022070811/5f0a299e7e708231d42a5047/html5/thumbnails/63.jpg)
75
vega.github.io/vega-lite/
Arvind Satyanarayan @arvindsatya1 Stanford University
Dominik Moritz @domoritz Kanit "Ham" Wongsuphasawat @kanitw Jeffrey Heer @jeffrey_heer University of Washington
Prototype in supplementary material, a release by the
end of the year!