A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (8/10) An Introduction to Data Visualization. Design, processes, techniques, use cases
1. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
an introduction to data visualization
Human-Computer Interaction
2. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
“Above all else show the data.”
Edward R. Tufte
3. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data characteristics: variety, volume, velocity
adapted from blog.sqlauthority.com
data
variety
data
velocity
data
volume
real-time (stream)
interval (continuous)
batch
(atomic)
sparse
(discrete)
unstructured
RDBMS
semi-
struc-
tured
XML
multi-
media
JSON
CSV
bi-
nary
KB
MBGB
TBEB
PBZB
YB
4. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
reality
Data is no longer scarce
5. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
www.worldometers.info
6. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
reality
Data is no longer scarce
we need to integrate, simplify, and capitalize on
existing information systems and
the massive amounts of data they hold
see also www.softviscollection.org/intro/a-thousand-words/
7. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
DIKW (DataInformationKnowledgeWisdom)
after S. Carpenter, 2008 & J. Liebowitz, 2012
8. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
What information visualization means?
9. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
A class of techniques for augmenting cognition
“the use of computer-supported, interactive,
visual representations of abstract data
in order to amplify cognition”
Card, Mackinlay & Shneiderman, 1999
10. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
A process of mapping information to visuals
“data visualization is expert storytelling” (Murray, 2013)
crafting rules that interpret data and
express its values as visual properties
11. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
informa-
tion
design
data per-
ceptuali-
zation
data
visuali-
zation
scientific
visuali-
zation
12. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Minimal criteria that any visualization has to fulfill
to be considered a pragmatic visualization
based on (non-visual) data
produce an image
the result must be readable and recognizable
R. Kosara, 2008 – eagereyes.org/criticism/definition-of-visualization
13. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Benefits – adapted from Card et al. (2009):
reducing the search for information
14. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Benefits – adapted from Card et al. (2009):
enhancing the pattern detection
15. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Benefits – adapted from Card et al. (2009):
encoding information in an interactive medium
www.informationisbeautiful.net/visualizations/worlds-biggest-data-breaches-hacks/
16. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Benefits – adapted from Card et al. (2009):
monitoring of data/information/knowledge evolution
17. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Benefits:
enabling inferences
(contexts: artificial intelligence,
semantic Web)
decision making
+ predictions
(context: machine learning)
www.r2d3.us/visual-intro-to-machine-learning-part-1/
18. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Benefits – adapted from Card et al. (2009):
allowing exploration of a space of parameter values
and enhancing user operations
(from data to information and knowledge)
19. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
see Hans Rolins, “New insights on poverty”, TED 2007
www.ted.com/talks/hans_rosling_reveals_new_insights_on_poverty
20. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Other benefits (Chibana, 2015):
revealing trends
21. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Other benefits (Chibana, 2015):
placing data/information into a specific context
Universcale (Nikon): www.nikon.com/about/sp/universcale/
22. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Other benefits (Chibana, 2015):
providing perspectives regarding a topic/domain
V. Markovtsev, Daily commit activity on GitHub (2017): blog.sourced.tech/post/activity_hours/
23. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Other benefits (Chibana, 2015):
stimulating the user imagination (“what if…?”)
Anon (2018) – director: Andrew Niccol: www.imdb.com/title/tt5397194/
24. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Origins:
maps
used from ancient times to convey, in an abstract way,
known geographic areas + to provide orientation
later on, give insights
for creating strategies in case of hostilities
25. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Imago Mundi – Babilon (V Century, B.C.)
www.ancient-wisdom.co.uk/cartography.htm
images provided by Wikimedia Commons
26. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Origins:
diagrams
see Euclid works on geometry
used in science (e.g., by Newton) to record observations,
to induct relationships,
to explicate methodology of experiments,
to classify and conceptualize phenomena
27. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Newton’s optics illustration – reported by Robin (1992)
28. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Origins:
abstract diagrams
employs non-physical information
29. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
an early example: merchandise imports/exports
W. Playfair, The Commercial and Political Atlas (1786)
30. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Origins:
visual design + data graphics
design principles of information visualization (infovis)
Edward Tufte (1983, 1990, 1997)
31. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Origins:
statistics
exploratory (multidimensional) data analysis
Tukey (1977), Cleveland & McGill (1988)
32. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Origins:
scientific visualization
analytical software instruments
for scientific analysis of large datasets
McCormick & DeFanti (1987)
33. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Origins:
computer graphics + artificial intelligence
automatic design of visual presentations of data
Mackinlay (1986), Roth & Mattis (1990), Casner (1991)
34. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Origins:
human-computer interaction
new user interfaces & interactions, including animations
Robertson, Card & Mackinlay (1989), Shneiderman (1992)
35. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Data visualization vs. infographics
visualization is – automatically – created
that can be applied to many datasets
infographics are made – manually –
for a particular dataset, concerning a specific purpose
eagereyes.org/blog/2010/the-difference-between-infographics-and-visualization
36. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
“The nature of the visualization
depends on which relationship is dominant.”
N. Iliinsky & J. Steele, Designing Data Visualizations, O’Reilly, 2011
Data
User
De-
sig-
ner
informative
visual art
persuasive
37. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Data
User
De-
sig-
ner
informative
visual art
persuasive
data/info viz. infographics
e.g., generative art
see also www.slideshare.net/busaco/generative-art-a-gentle-introduction
38. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization design
39. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Visualization
the mapping of data to visual form
that supports human interaction in a workplace
for visual sense making
40. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Algorithm Visualizer – algo-visualizer.jasonpark.me
41. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
task
questions
goals
assumptions
data
physical data type
conceptual data type
domain
meta-data
semantics
conventions
image
visual channel
graphical
representations
processing
algorithms
mapping
visual encoding
data visualization overview
adapted from Jeffrey Heer, Data Visualization (2017)
courses.cs.washington.edu/courses/cse442/17au/
42. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Stuart Card, “Information Visualization”, Human-Computer
Interaction Handbook (2nd Edition), Taylor & Francis, 2008
raw
data
data
tables
visual
structs.
views
data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction
43. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Raw Data
unfiltered/unprocessed input data
Data Tables
suitable date structures: relations + meta-data
Visual Structures
convenient graphical elements
Views
(interactive) visualizations perceived by user(s)
44. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Raw Data – data(sets) to be visualized,
available in different – binary/textual – formats
raw
data
data
tables
visual
structs.
views
data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction
45. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Data Transformations
provides document vectors
(normalized vectors in a N-dimensional space)
could imply different filtering operations
raw
data
data
tables
visual
structs.
views
data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction
46. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Data Tables – suitable data structures:
relations (depending on considered variables) + meta-data
raw
data
data
tables
visual
structs.
views
data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction
47. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Data Tables
tables of objects + their attributes
48. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Data Tables
example for movie visualizations:
basic objects = instances of the “film” concept
attributes (properties) for each object
for each film: title, year of release, genre type, actors,…
49. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modelingFilmID 0083658 0088846 1189073 0103767
Title Blade Runner Brazil La piel que habito Baraka
Director Ridley Scott Terry Gilliam Pedro Almodóvar Ron Fricke
Actor Harrison Ford Jonathan Pryce Antonio Banderas N/A
Actress Sean Young Kim Greist Elena Anaya N/A
Year 1982 1985 2011 1992
Length 117 142 120 96
IMDB 8.2 8.0 7.6 8.6
Metascore 89 88 70 N/A
Genre Sci-Fi, Thriller Drama, Sci-Fi Drama, Thriller Documentary
could be considered
as meta-data
50. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Data Tables
functional (abstract) representation:
f (input variables) = output variables
TopRatedMovies (FilmID = 0062622)91
2001: A Space Odyssey is a top rated SF film
51. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Data Tables
variables implies a scale of measurement
52. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Data Tables
variables implies a scale of measurement
a nominal variable N is an unordered set
e.g., film titles { Blade Runner, Brazil, The Wall,…}
(in)equality operators could be used
53. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Data Tables
variables implies a scale of measurement
an ordinal variable O is a tuple (ordered set)
e.g., film ratings < G, PG, PG-13, R >
relational operators (like “<”) could be applied
54. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Data Tables
variables implies a scale of measurement
a quantitative variable Q is a numeric range
example: film duration [0, 400]
arithmetic operators could be performed on them
55. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Data Tables
subtypes regarding a certain nature of visualization
quantitative spatial
2D/3D spatial variables
commonly used in scientific visualization
56. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Visualization of 112 million-atom reactive molecular dynamics
simulation to study high-temperature oxidation of a silicon-carbide
nanoparticle on 786,432 IBM Blue Gene/Q cores
cacs.usc.edu/education/cs596.html
57. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Data Tables
subtypes regarding a certain nature of visualization
quantitative geographical
spatial variables
that specifically represent geophysical coordinates
58. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
3D map visualizations via Google Maps API
developers.google.com/maps/documentation/
59. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Data Tables
variable subtype concerning similarity
quantitative similarity
60. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Data Tables
temporal variables
quantitative time
ordinal time
61. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
visualizing the transaction dynamics of crypto-currencies
whalepool.io:8080/coinorama/
cryptomaps.org
62. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Data Tables
variables implies a scale of measurement
unstructured scale
whose only value is present or absent (e.g., an error flag)
63. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
main classes of variables involved into data visualization
64. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Data Tables
various scale types can be altered by transformations
65. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Quantitative variables can be mapped
by data transformations into ordinal variables
film duration [0, 400] min. → <SHORT, MEDIUM, LONG>
classes of
values
66. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Nominal variables can be transformed to ordinal values
film titles { Gattaca, Brazil, The Wall, Minority Report }
→ < The Wall, Minority Report, Gattaca, Brazil >
sorting
67. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Visual Mappings
creating analytic abstractions to be visualized
from spatial coordinates to surfaces
on an information 2D/3D landscape
raw
data
data
tables
visual
structs.
views
data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction
68. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
various examples provided by Explained Visually
setosa.io/ev/
69. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Visual Structures
use a vocabulary of visual elements:
spatial substrates + marks + graphical properties
raw
data
data
tables
visual
structs.
views
data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction
70. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Visual Structures
goal: the systematic mapping
of data relations onto visual form
visual encodings
could use
metaphors + idioms
71. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Visual Structures
spatial substrate
marks
connection
enclosure
retinal properties
temporal encoding
72. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Visual Structures
spatial substrate
empty space, as a container, can be treated as
if it had metric structure
scale type ↔ axis of space
73. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Most important spatial axes:
U – unstructured no axis
N – nominal grid a region divided into sub-regions
O – ordinal grid sub-region ordering is significant
Q – quantitative grid a region has a metric
74. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Axes can be linear or radial
can involve any of the various coordinate systems
for describing space
a common approach: Cartesian coordinates
75. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Axes can be linear or radial
can involve any of the various coordinate systems
for describing space
example: using 2 orthogonal quantitative axes
to visualize movie popularity over the time
Year → QX Popularity → QY
76. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Visual Structures
marks
visible “things” that occur in space:
points, lines, areas, volumes
77. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
types of marks
points ⭐ ⚫
lines
areas
volumes
point & line marks take up space
and may have properties such as shape
78. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
79. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Visual Structures
connection & enclosure
points and lines can be used to signify different
topological structures like graphs and trees,
showing relations among objects
80. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Visual Structures
connection & enclosure
enclosure can be used for trees, contour maps,
and Venn diagrams
81. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
visualizing
a hierarchy of
entities belonging
to a class
enclosure diagram
bl.ocks.org/mbostock/4063530
83. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Visual Structures
retinal properties
example: using color as visual code denoting a film genre
FilmID (Genre) → P (Color)
possible conventions: Drama ⬛ Sci-Fi ⬛ War ⬛
84. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
podio.com/site/creative-routines
85. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Visual Structures
retinal properties
position, size, orientation, color, texture, shape
aspects to be considered:
crispness, resolution, transparency, arrangement
86. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
aligned 2D positioning
unaligned 2D positioning
rendering according to value (length)
accuracy of
comparisons
various visualization techniques
could facilitate the user perception
(Cleveland & McGill, 1984) cited by Jerzy Wieczorek (2015)
civilstat.com/2015/10/statistical-graphics-and-visualization-course-materials/
87. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Visual Structures
temporal encoding
temporal data to be visualized
versus
animation – mapping a variable into time
88. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
View Transformations
offer various views (graphical representations)
according to the user goals
raw
data
data
tables
visual
structs.
views
data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction
89. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Views
perceived by end-users
+
adjusted by graphical parameters
(position, scaling, clipping,…)
raw
data
data
tables
visual
structs.
views
data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction
90. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
View—value distinction
regards how operations (transformations) are performed
at different places in the model
91. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
View—value distinction
regards how operations (transformations) are performed
at different places in the model
example:
when a point is deleted from the visualization,
has the point been deleted from the dataset?
92. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
“Information visualization is about the not just creation of
visual images, but also the interaction with those images
in the service of some problem.”
Stuart Card, 2008
93. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
The Internet Map – interactive visualization of
Internet domains usage based on data
provided by Alexa – internet-map.net
case study
94. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Expressiveness & effectiveness
a visualization is expressive if and only if
it encodes all the data relations intended
and no other data relations are considered
95. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
incorrect correlations – mapping from data to visual form
violates the expressiveness criterion
96. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
How about the processes
concerning data visualization?
97. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization processes
Acquire
Parse
Filter
Mine
Represent
Refine
Interact
according to Ben Fry, 2008
98. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization processes
Acquire
obtain the (raw) data to be analyzed and visualized
99. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
Tamara Munzner, Visualization Analysis & Design, 2017
www.cs.ubc.ca/~tmm/talks.html
aspects of interest concerning datasets:
data types
items
attributes
relations (links)
positions
grids
102. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
Tamara Munzner, Visualization Analysis & Design, PacificVis 2016
www.cs.ubc.ca/~tmm/talks.html
aspects of interest concerning datasets:
dataset availability
static
versus
dynamic
103. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
Tamara Munzner, Visualization Analysis & Design, 2017
www.cs.ubc.ca/~tmm/talks.html
aspects of interest regarding the attributes:
attribute types
categorical
104. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
aspects of interest regarding the attributes:
attribute types
ordered
ordinal
quantitative
105. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
aspects of interest regarding the attributes:
ordering direction
sequential, diverging, cyclic
106. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization processesOpen datasets available on the Web:
Academic Torrents – academictorrents.com
Awesome Public Datasets
github.com/caesar0301/awesome-public-datasets
Awesome JSON Datasets
github.com/jdorfman/awesome-json-datasets
Common Crawl – commoncrawl.org/the-data/
DataHub – datahub.io/dataset
Kaggle Datasets – www.kaggle.com/datasets
107. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization processesOpen datasets provided by companies:
GitHub Archive
www.gharchive.org
Google BigQuery Public Datasets
cloud.google.com/bigquery/public-data/
Microsoft Azure: Public Datasets
docs.microsoft.com/azure/sql-database/sql-database-public-data-sets
Registry of Open Data on Amazon Web Services
registry.opendata.aws
108. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization processes
Parse
deliver a certain structure for the data’s meaning,
and order it into categories
109. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization processes
Filter
keep only the data of interest
could also imply noise reduction
110. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization processes
Mine
apply methods from statistics or data mining
to discern patterns or
place the data in mathematical context
pragmatic approaches: G. Myatt, W. Johnson,
Making Sense of Data I, II, and III, Wiley, 2007, 2009, 2011
111. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
Tamara Munzner, Visualization Analysis & Design, 2017
www.cs.ubc.ca/~tmm/talks.html
aspects of interest concerning data processing:
{ action, target }
discover distribution
compare trends
locate outliers
browse topology
112. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
aspects of interest concerning data processing:
actions
analyze
search (filter)
query
113. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
aspects of interest concerning data processing:
actions
analyze
consume
discover (explore) vs. present (explain)
produce
annotate, record, derive,…
115. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
aspects of interest concerning data processing:
actions
search (filter)
How much data matters?
116. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
aspects of interest concerning data processing:
actions
query
identify, compare, summarize,…
117. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
aspects of interest concerning data processing:
target
all data
attributes
network data
spatial data
118. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
aspects of interest concerning data processing:
target
all data
trends, outliers, features
119. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
aspects of interest concerning data processing:
target
attributes
one – e.g., distribution
120. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
aspects of interest concerning data processing:
target
attributes
many – dependency, correlation, similarity,…
121. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
aspects of interest concerning data processing:
target
network data
topology + paths
122. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
aspects of interest concerning data processing:
target
spatial data
shape
123. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization processes
Represent
choose a (set of) visual model(s)
124. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
aspects of interest concerning data visualization:
encode
arrange
+
map
125. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
encode
arrange
express
separate
order
align
use
126. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
encode
map
from categorical and
ordered attributes
to visual representations
color: hue, saturation
size, angle, curvature,…
shape
motion
127. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization processes
Refine
improve the basic visual representation
to make it clearer and more visually engaging
applying techniques of perceptual optimization
128. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization processes
Interact
add methods for manipulating the data
or controlling what features are visible
130. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/Tamara Munzner (2017)
131. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
mash-ups
Your Life on Earth (BBC)
www.bbc.com/earth/story/20141016-your-life-on-earth
case study
132. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization processes
adopting an iterative approach (Fry, 2008)
133. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
How about
a taxonomy
of information
visualization?
bl.ocks.org/mbostock
134. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Simple visual structures
direct reading
1-variable [X]:
lists, 1D scatterplots, pie charts, distributions, box plots,…
135. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
also stydy eagereyes.org/techniques/pie-charts
commons.wikimedia.org/wiki/File:World_Oil_Reserves_by_Country-pie_chart.svg
136. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Simple visual structures
direct reading
2-variable [XY]:
2D object charts (histograms) – for continuous values
2D scatterplots – in the case of discrete values
137. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
2D visualizations generated by Google Data Studio
www.google.com/analytics/data-studio/
example
138. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Simple visual structures
direct reading
3-variable
[XYR]: retinal scatterplots, Kohonen diagrams
[(XY)Z]: information landscapes, information surfaces
[XYZ]: 3D scatterplots
139. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
studying the neural network behavior
– here, data classification – in the Web browser
playground.tensorflow.org
140. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
retinal scatterplot – here, a heat map
secviz.org/content/user-behavior-a-heatmap
visualizing user-behavior (Y) over time (X); color (retinal
variable R) is used to indicate the intensity of the activity
141. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Simple visual structures
direct reading
4-variable [XYZR]:
3D retinal scatterplots, 3D topographies
142. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
a 3D visualization of tectonic topography
(context: Vrancea region’s seismicity)
143. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Simple visual structures
articulated reading
n-variable
[XYRn-2]: 2D retinal scatterplots
[XYZRn-1]: 3D retinal scatterplots
144. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
a 3D visualization of the relations between text translations
with Tensor Flow (Google) – projector.tensorflow.org
145. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Simple visual structures
articulated reading
n-variable
[XYRn-2]: 2D retinal scatterplots
[XYZRn-1]: 3D retinal scatterplots
may present
a barrier of
perception
146. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
scatterplot of attractiveness versus age, colored by gender
O’Connor & Biewald, 2009
147. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Simple visual structures
articulated reading
trees (used for hierarchical data):
node and link trees, enclosure trees, hyperbolic trees,
TreeMaps, cone trees
148. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
treemap of terms occurring in geography titles and
comments for 6 selected scene types
T. Segaran & J. Hammerbacher (Eds.), Beautiful Data, O’Reilly, 2009
150. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Flight Patterns – using air traffic GPS data to visualize
commercial flight patterns and density (Koblin, 2005)
www.aaronkoblin.com/work/flightpatterns/
explore also graphofthings.org
151. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Simple visual structures
articulated reading
time
aspects of interest:
discrete vs. continuous values
moments vs. intervals
152. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Simple visual structures
articulated reading
time
typical solutions:
calendar, timeline, alternative views
153. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Here Is…
hereistoday.com
case study
154. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Definitive Daft Punk
themaninblue.com/writing/perspective/2011/05/12/
case study
158. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Composed visual structures
recursive composition
2D in 2D [(XY)XY]:
scatterplot matrices, hierarchical axes,…
159. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
visualizing correlated information
www.andreykurenkov.com/writing/fun-visualizations-of-stackoverflow/
160. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Composed visual structures
recursive composition
marks in 2D [(XY)R]:
stick figures, color icons, shape coding, Keim spirals,…
161. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
100 Years with the San Francisco Symphony by Adobe
thewhyaxis.info/music/
case study
162. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Composed visual structures
recursive composition
3D in 3D [(XYZ)XYZ]:
(virtual) worlds within (virtual) worlds
163. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
holographic visualizations – HoloLens (Microsoft)
www.microsoft.com/hololens/developers
164. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Interactive visual structures
dynamic queries
imagery (“magic”) lens
overview + detail
brushing and linking
extract & compare
attribute explorer (multi-faceted)
165. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Poem Viewer – imagery lens for visualizing corpora
ovii.oerc.ox.ac.uk/PoemVis/
case study
166. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
brushing
performing a data selection task (e.g., click/tap and drag)
linking
highlighting the matching data samples in the other views
for a demo, visit mbostock.github.io/protovis/ex/brush.html
168. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Gapminder – www.gapminder.org/tools/
case study
170. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
micro-macro readings
presenting large quantities of data at high densities
goal: to see the bigger picture
medium.com/@dominikus/the-superpower-of-interactive-datavis-a-micro-macro-view-4d027e3bdc71
Selfiexploratory – selfiecity.net/selfiexploratory/
171. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
remarks
Each visualization project (solution)
has unique requirements
“If each data set is different, the point of visualization
is to expose that fascinating aspect of the data
and make it self-evident.” – Stephen Fry
172. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
remarks
Pragmatic advice: apply KISS principle
less detail can actually convey more information
beware of chartjunk
Tufte (1983)
173. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
chartjunk using a large area and a lot of “ink”
(many symbols and lines)
to show only 5 hard-to-read numbers
real-life examples: junkcharts.typepad.com
174. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
remarks
Pragmatic advice: use proper labeling
provide explanations, legends, visual conventions, etc.
175. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
concluzii
History of Rock Music
www.svds.com/rockandroll/
176. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
remarks
Pragmatic advice: know your audience
different types of visualizations
for different (types of) users
177. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
concluzii
3D visualization of human body (available in the Web browser)
BioDigital Human – human.biodigital.com
178. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
remarci
“Never trust summary statistics alone;
always visualize your data” – Alberto Cairo (2016)
the datasets have the same statistics features
(e.g., standard deviation, Pearson correlation),
but their visualizations are different
details in J. Matejka, G. Fitzmaurice, “Same Stats, Different Graphs: Generating Datasets
with Varied Appearance and Identical Statistics through Simulated Annealing”,
ACM SIGCHI Conference on Human Factors in Computing Systems, 2017
www.autodeskresearch.com/publications/samestats
179. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
tools
JavaScript libraries for 2D visualizations:
D3.js (Data-Driven Documents) – d3js.org
D3.js extensions – github.com/wbkd/awesome-d3
Leaflet (mobile-friendly interactive maps) – leafletjs.com
Raphaël (vector graphics) – raphaeljs.com
Recline (building data apps) – okfnlabs.org/recline/
Sigma (graph drawing) – sigmajs.org
Vis (handling large amounts of dynamic data) – visjs.org
180. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
instrumente la nivel de client
JavaScript libraries for 3D visualizations:
Cesium (3D globes and maps) – cesiumjs.org
PhiloGL – www.senchalabs.org/philogl/
Three.js – threejs.org
181. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomyremark:
visual representations of
data could be also physical
(i.e. generated by a 3D printer)
www.3dprintmath.com
182. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
Main purposes of information visualization:
exploratory visualization
discover patterns, trends, or sub-problems in a data set
explanatory visualization
transmitting information or a point of view to the user
183. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
case study
Food Poisoning Outbreaks (Ruslan Kamolov, 2015)
184. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
VOWL (Visual Notation for OWL Ontologies)
+ interactive visualization tools for desktop and Web
vowl.visualdataweb.org
case study
185. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
Main purposes of information visualization:
exploratory visualization
discover patterns, trends, or sub-problems in a data set
explanatory visualization
transmitting information or a point of view to the user
186. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
How You Will Die (Nathan Yau, 2016) – a visualization experiment
on life expectancy based on World Health Organization data
flowingdata.com/2016/01/19/how-you-will-die/
case study
187. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
case study
explaining an election law by using data visualization
RAW Graphs – github.com/densitydesign/raw
188. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
online resources
Data + Design – infoactive.co/data-design
Information is Beautiful – www.informationisbeautiful.net
Awesome Visualization Research
github.com/mathisonian/awesome-visualization-research
Data Visualization Catalogue – datavizcatalogue.com
Data Viz Done Right – www.datavizdoneright.com
Flowing Data – flowingdata.com
189. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
“Conclusion”
data visualization
definitions, classification, methods, examples
datavizproject.com
190. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
next episode:
affective factors & persuasive technologies