![Page 1: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/1.jpg)
Towards Democratizing Relational Data Visualization
Nan Tang Qatar Computing Research Institute
HBKU, Qatar Foundation
Eugene Wu Computer Science
Columbia University
Guoliang Li Computer Science and Technology
Tsinghua University
SIGMOD 2019 Tutorial June 30, 2019
Amsterdam, The Netherlands
![Page 2: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/2.jpg)
Outline
2
• Nan: Fundamentals and State-of-the-art (25-30 minutes) - why data visualization is so successful for human-in-the-loop data analytics - what are data visualizations - how have data visualizations been used
• Eugene: Efficient, Effective and Interactive Visualizations (60-65 minutes)
• Guoliang: Recommendation (~60 minutes)
• Nan: Uncertainty, collaborative, and immersive data visualizations (~30 minutes)
![Page 3: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/3.jpg)
3
Sight > The Other Senses ?
EAR
External Representations
![Page 4: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/4.jpg)
3
Sight > The Other Senses ?
EAR
External RepresentationsHow much information each of our senses processes at the same time as compared to our other senses?
Neuroscience and Cognitive Psychology L.D. Rosenblum, Harold Stolovitch, Erica Keeps
Sight — 83.0% Hearing — 11.0%
Smell — 03.5% Touch — 01.5% Taste — 01.0%
![Page 5: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/5.jpg)
3
Sight > The Other Senses ?
EAR
External RepresentationsHow much information each of our senses processes at the same time as compared to our other senses?
Neuroscience and Cognitive Psychology L.D. Rosenblum, Harold Stolovitch, Erica Keeps
Sight — 83.0% Hearing — 11.0%
Smell — 03.5% Touch — 01.5% Taste — 01.0%
![Page 6: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/6.jpg)
4
State-of-the-art
![Page 8: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/8.jpg)
4
Storytelling
State-of-the-art
Virtual/Augmented/Mixed Reality
![Page 9: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/9.jpg)
4
Storytelling
State-of-the-artSonification
Virtual/Augmented/Mixed Reality
![Page 10: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/10.jpg)
4
Storytelling
State-of-the-artSonification
PhysicalizationVirtual/Augmented/Mixed Reality
![Page 11: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/11.jpg)
What and How
5
human human machine
human machine machine
X
![Page 12: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/12.jpg)
What and How
5
Computer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectively. — Tamara Munzner at UBC
human human machine
human machine machine
X
![Page 13: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/13.jpg)
What and How
5
Computer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectively. — Tamara Munzner at UBC
Understanding Exploratory Storytelling
human human machine
human machine machine
X
![Page 14: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/14.jpg)
What and How
5
Computer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectively. — Tamara Munzner at UBC
Understanding Exploratory Storytelling
Making Human-in-the-loop Data Analytics (Science) More Effective
human human machine
human machine machine
X
![Page 15: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/15.jpg)
6
History
Pre-17 Century
Early maps and
diagrams
6200 BCKonya
town map
950Changing values (positions of sun)
1600-1699 Measurement
and theory
1684Barometric pressure vs.
altitude
1700-1799 New graphic
forms
1800-1850 Beginning of
modern graphics
1850-1900 The golden age
of statistical graphics
1900-1950 The modern
dark ages
1950-1975 Re-birth of data
visualization
1975- now High-D,
interactive, and dynamic
1786Bar/line chart:
Economic data, England
1801Pie chart
for part-whole relations
1880Ven Diagram
1880Regression curve
1924births/
deaths in Germany
1970-1972
Michael Friendly, “Milestones in the history of thematic cartography, statistical graphics, and data visualization”
Appl
icatio
ns Big Data
Tools
Computer Graphics
Visualization
Cognitive Science
Data Mining
Database
![Page 16: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/16.jpg)
The Visualization Pipeline
7
map data to visual variables
VISUAL ENCODINGS Rendering
imagesintegration
transformation cleaning
Curation
import discover collect
Discovery
![Page 17: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/17.jpg)
Mapping Data to Visualizations
8
Visualizations (Signs)
encode decode
the “most effective” visualizationvisual language is a sign system
Jacques Bertin
![Page 18: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/18.jpg)
Mapping Data to Visualizations
8
Visualizations (Signs)
encode decode
the “most effective” visualizationvisual language is a sign system
Jacques Bertin
interact
![Page 19: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/19.jpg)
Mapping Data to Visualizations
8
Visualizations (Signs)
encode decode
the “most effective” visualizationvisual language is a sign system
Jacques Bertin
interact
Tools or Languages are needed
![Page 20: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/20.jpg)
Characterizing Data and Visualizations
9
•Nominal - members of certain classes - • USA, Qatar, Netherlands
•Ordinal - related by order - • tiny, small, medium, large • Days: Mon, Tue, …, Sun
•Quantitative - numerical values - • 2.3, 4.56, 0.8 • Physical measurements: temperature
![Page 21: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/21.jpg)
Characterizing Data and Visualizations
9
•Nominal - members of certain classes - • USA, Qatar, Netherlands
•Ordinal - related by order - • tiny, small, medium, large • Days: Mon, Tue, …, Sun
•Quantitative - numerical values - • 2.3, 4.56, 0.8 • Physical measurements: temperature
PointsLinesAreasPosition (x 2)SizeShapeValueColourOrientationTexture
Marks
Visual Variables (Channels)
![Page 22: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/22.jpg)
Characterizing Data and Visualizations
9
•Nominal - members of certain classes - • USA, Qatar, Netherlands
•Ordinal - related by order - • tiny, small, medium, large • Days: Mon, Tue, …, Sun
•Quantitative - numerical values - • 2.3, 4.56, 0.8 • Physical measurements: temperature
PointsLinesAreasPosition (x 2)SizeShapeValueColourOrientationTexture
Marks
Visual Variables (Channels)
map
![Page 23: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/23.jpg)
Characterizing Data and Visualizations
9
•Nominal - members of certain classes - • USA, Qatar, Netherlands
•Ordinal - related by order - • tiny, small, medium, large • Days: Mon, Tue, …, Sun
•Quantitative - numerical values - • 2.3, 4.56, 0.8 • Physical measurements: temperature
PointsLinesAreasPosition (x 2)SizeShapeValueColourOrientationTexture
Marks
Visual Variables (Channels)
https://jenniewblog.wordpress.com/2016/03/08/marks-and-channels-chapter5/
map
![Page 24: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/24.jpg)
10
GUI-based (Interactive) Tools Tableau, Qlik, Power BI, Google Charts
High-level Languages Vega-Lite, ggplot2,VizQL
Low-level Languages D3.js, Vega, Protovis
Component Architectures VTK, Prefuse, Flare, Improvise
Graphics APIs Processing, OpenGL, Java2D
Graphical Interfaces
Declarative Languages
Programming Toolkits
Ease
-of-u
seExpressiveness
A Visualization Tool Stack
![Page 25: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/25.jpg)
11
Vega-Lite and Vega
{
"data": [
{"name": "table", "url": "/data/flight_statistics.json"}
],
"mark": "bar",
"encoding": {
"x": {"field": "destination", "type": "ordinal"},
"y": {"field": "passenger_num", "type": "quantitative"}
}
}
Vega-Lite
![Page 26: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/26.jpg)
11
Vega-Lite and Vega
{
"data": [
{"name": "table", "url": "/data/flight_statistics.json"}
],
"mark": "bar",
"encoding": {
"x": {"field": "destination", "type": "ordinal"},
"y": {"field": "passenger_num", "type": "quantitative"}
}
}
Vega-Lite
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "destination"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field":
"passenger_num"},
"y2": {"scale": "yscale", "value": 0}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
}
}
}
]
}
{
"width": 600,
"height": 200,
"padding": 5,
"data": [
{"name": "table", "url": "/data/flight_statistics.json"}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "destination"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "passenger_num"},
"nice": true,
"range": "height"
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
Vega
![Page 27: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/27.jpg)
11
Vega-Lite and Vega
{
"data": [
{"name": "table", "url": "/data/flight_statistics.json"}
],
"mark": "bar",
"encoding": {
"x": {"field": "destination", "type": "ordinal"},
"y": {"field": "passenger_num", "type": "quantitative"}
}
}
Vega-Lite
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "destination"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field":
"passenger_num"},
"y2": {"scale": "yscale", "value": 0}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
}
}
}
]
}
{
"width": 600,
"height": 200,
"padding": 5,
"data": [
{"name": "table", "url": "/data/flight_statistics.json"}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "destination"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "passenger_num"},
"nice": true,
"range": "height"
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
Vega
Data + Transforms
Scales
Guides Marks
![Page 28: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/28.jpg)
12
GUI-based (Interactive) Interface{ People } { Machines }
declarative language data + transforms
mapping
HyPer
Optimizer
Executor
“Kyrix: Interactive Visual Data Exploration at Scale. CIDR 2019.
Ermac: Combining design and performance in a data visualization management system. CIDR 2017.
Data/View Specification
visualize filter sort
derive
View Manipulation
select navigate
coordinate organize
Mutual Intelligibility and
Shared Understanding
Process and Provenance
record annotate
share guide
![Page 29: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/29.jpg)
12
GUI-based (Interactive) Interface{ People } { Machines }
declarative language data + transforms
mapping
HyPer
Optimizer
Executor
“Kyrix: Interactive Visual Data Exploration at Scale. CIDR 2019.
Ermac: Combining design and performance in a data visualization management system. CIDR 2017.
Data/View Specification
visualize filter sort
derive
View Manipulation
select navigate
coordinate organize
Mutual Intelligibility and
Shared Understanding
Process and Provenance
record annotate
share guide
Civilizer 2.0, VLDB 2019 demo
![Page 30: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/30.jpg)
13
Keyword (Under-specified)
http://deepeye.tech
DeepEye: Visualizing Your Data by Keyword Search. Xue di et al., EDBT (vision) 2018. DeepEye: Creating Good Data Visualizations by Keyword Search. Yuyu Luo et al., SIGMOD Demo 2018.
![Page 31: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/31.jpg)
13
Keyword (Under-specified)
Ask Data
http://deepeye.tech
DeepEye: Visualizing Your Data by Keyword Search. Xue di et al., EDBT (vision) 2018. DeepEye: Creating Good Data Visualizations by Keyword Search. Yuyu Luo et al., SIGMOD Demo 2018.
![Page 32: Towards Democratizing Relational Data Visualization · 2019-07-06 · maps and diagrams 6200 BC Konya town map 950 Changing values (positions of sun) 1600-1699 Measurement and theory](https://reader034.vdocuments.site/reader034/viewer/2022052612/5f0c69e17e708231d4354789/html5/thumbnails/32.jpg)
Further Readings
• Tamara Munzner, “Visualization Analysis & Design”, Tutorial on VIS 2017 • Tamara Munzner, “Data Visualization Pitfalls to Avoid”, Tutorial • Jeffrey Heer, “Data Visualization”, University of Washington, Lecture CSE 442 • Jacques Bertin, “Semiology of Graphics: Diagrams, Networks, Maps”. 1967 • Leland Wilkinson, “The Grammar of Graphics”, 1999 • Scott Murray, “Interactive Data Visualization for the Web”, 2013 • Jeff Johnson, “Designing with the Mind in Mind: Simple Guide to Understanding
User Interface Design Rules”, Morgan Kaufmann, 2010 • Stanley Smith Stevens, “Psychophysics: Introduction to Its Perceptual, Neural, and
Social Prospects”, Wiley, 1975 • Colin Ware, “Visual Thinking for Design”, Morgan Kaufmann, 2008
• Enrico Bertini and Moritz Stefaner, “Data stories”, podcast • Amy Cesal, Mollie Pettit and Elijah Meek, “Data Visualization Society”, a slack channel