SlideShare ist ein Scribd-Unternehmen logo
1 von 190
Downloaden Sie, um offline zu lesen
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
an introduction to data visualization
Human-Computer Interaction
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
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
reality
Data is no longer scarce
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
www.worldometers.info
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/
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
DIKW (DataInformationKnowledgeWisdom)
after S. Carpenter, 2008 & J. Liebowitz, 2012
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
What information visualization means?
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
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
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
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
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
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
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/
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
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/
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)
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Other benefits (Chibana, 2015):
revealing trends
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/
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/
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/
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
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
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
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)
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
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)
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)
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)
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)
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)
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)
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
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
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization design
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Algorithm Visualizer – algo-visualizer.jasonpark.me
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/
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
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)
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
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
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
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
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,…
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
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
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
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
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
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
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
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
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
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/
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
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
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
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)
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
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
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
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
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
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/
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
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
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
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
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
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
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
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
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
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
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
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
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
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 ⬛
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
podio.com/site/creative-routines
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
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/
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
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
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
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
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?
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
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
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
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
How about the processes
concerning data visualization?
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
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
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
aspects of interest concerning datasets:
data and dataset types
tables – items & attributes
graphs (networks / trees) – items (nodes), links, attributes
fields – grids + positions, attributes
geometry (spatial) – items + positions
clusters, sets, lists – items
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
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
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
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
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
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
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
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
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
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
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
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
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,…
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
Tamara Munzner, Visualization Analysis & Design, PacificVis 2016
http://www.cs.ubc.ca/~tmm/talks.html
casual, social,…
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?
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,…
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
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
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
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,…
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
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
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)
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
encode
arrange
express
separate
order
align
use
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
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
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
aspects of interest:
manipulate – change, select, navigate
facet – juxtapose, partition, superimpose
reduce – filter, aggregate, embed
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/Tamara Munzner (2017)
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization processes
adopting an iterative approach (Fry, 2008)
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
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,…
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
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
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
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
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
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
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
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)
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
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
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
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
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
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Simple visual structures
articulated reading
networks
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
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
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Here Is…
hereistoday.com
case study
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Composed visual structures
single-axis composition [XYn]:
permutation matrices, parallel coordinates
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
a parallel coordinate view of a firewall log file
context: security visualization – secviz.org
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Composed visual structures
double-axis composition [XY]: graphs
ontology visualization
owlgred.lumii.lv
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,…
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/
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,…
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
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
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
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)
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
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Focus + context attention-reactive
visual abstraction
data-driven methods:
filtering, selective aggregation
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Focus + context attention-reactive
visual abstraction
view-based methods:
micro-macro readings, highlighting, visual transfer
functions, perspective distortion, alternate geometries
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/
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
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)
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
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.
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/
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
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
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
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
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
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
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
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)
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
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
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
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
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
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
next episode:
affective factors & persuasive technologies

Weitere ähnliche Inhalte

Was ist angesagt?

HCI 2018 (5/10) Information Architecture. From Design Patterns to Flow
HCI 2018 (5/10) Information Architecture. From Design Patterns to FlowHCI 2018 (5/10) Information Architecture. From Design Patterns to Flow
HCI 2018 (5/10) Information Architecture. From Design Patterns to FlowSabin Buraga
 
HCI 2014 (1 of 10): Overview
HCI 2014 (1 of 10): OverviewHCI 2014 (1 of 10): Overview
HCI 2014 (1 of 10): OverviewSabin Buraga
 
HCI 2018 (3/10) Design Models, Methodologies and Guidelines
HCI 2018 (3/10) Design Models, Methodologies and GuidelinesHCI 2018 (3/10) Design Models, Methodologies and Guidelines
HCI 2018 (3/10) Design Models, Methodologies and GuidelinesSabin Buraga
 
HCI 2015 (2/10) Human Factor. Users
HCI 2015 (2/10) Human Factor. UsersHCI 2015 (2/10) Human Factor. Users
HCI 2015 (2/10) Human Factor. UsersSabin Buraga
 
HCI 2014 (8 of 10): Data Visualization
HCI 2014 (8 of 10): Data VisualizationHCI 2014 (8 of 10): Data Visualization
HCI 2014 (8 of 10): Data VisualizationSabin Buraga
 
HCI 2015 (5/10) Information Architecture. Design Patterns. Layout, Actions, D...
HCI 2015 (5/10) Information Architecture. Design Patterns. Layout, Actions, D...HCI 2015 (5/10) Information Architecture. Design Patterns. Layout, Actions, D...
HCI 2015 (5/10) Information Architecture. Design Patterns. Layout, Actions, D...Sabin Buraga
 
HCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns
HCI 2015 (4/10) Visual Design. Information Architecture. Design PatternsHCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns
HCI 2015 (4/10) Visual Design. Information Architecture. Design PatternsSabin Buraga
 
HCI: Design Patterns for Social Web Interaction
HCI: Design Patterns for Social Web InteractionHCI: Design Patterns for Social Web Interaction
HCI: Design Patterns for Social Web InteractionSabin Buraga
 
HCI 2014 (3 of 10): Design Models and Methodologies
HCI 2014 (3 of 10): Design Models and MethodologiesHCI 2014 (3 of 10): Design Models and Methodologies
HCI 2014 (3 of 10): Design Models and MethodologiesSabin Buraga
 
HCI 2015 (7/10) HCI Engineering. UI Evaluation. Models
HCI 2015 (7/10) HCI Engineering. UI Evaluation. ModelsHCI 2015 (7/10) HCI Engineering. UI Evaluation. Models
HCI 2015 (7/10) HCI Engineering. UI Evaluation. ModelsSabin Buraga
 
HCI 2015 (3/10) Design Methodologies
HCI 2015 (3/10) Design MethodologiesHCI 2015 (3/10) Design Methodologies
HCI 2015 (3/10) Design MethodologiesSabin Buraga
 
HCI 2014 (10 of 10): Natural User Interfaces. Ubiquitous Computing
HCI 2014 (10 of 10): Natural User Interfaces. Ubiquitous ComputingHCI 2014 (10 of 10): Natural User Interfaces. Ubiquitous Computing
HCI 2014 (10 of 10): Natural User Interfaces. Ubiquitous ComputingSabin Buraga
 
HCI 2014 (2 of 10): Human Factor. Users
HCI 2014 (2 of 10): Human Factor. UsersHCI 2014 (2 of 10): Human Factor. Users
HCI 2014 (2 of 10): Human Factor. UsersSabin Buraga
 
HCI 2014 (4 of 10): From Information Architecture to Design Patterns
HCI 2014 (4 of 10): From Information Architecture to Design PatternsHCI 2014 (4 of 10): From Information Architecture to Design Patterns
HCI 2014 (4 of 10): From Information Architecture to Design PatternsSabin Buraga
 
HCI 2015 (9/10) Affective Factors
HCI 2015 (9/10) Affective FactorsHCI 2015 (9/10) Affective Factors
HCI 2015 (9/10) Affective FactorsSabin Buraga
 
HCI 2014 (5 of 10): UI Design. From Design Patterns to Flow
HCI 2014 (5 of 10): UI Design. From Design Patterns to FlowHCI 2014 (5 of 10): UI Design. From Design Patterns to Flow
HCI 2014 (5 of 10): UI Design. From Design Patterns to FlowSabin Buraga
 
Human-Computer Interaction: An Overview
Human-Computer Interaction: An OverviewHuman-Computer Interaction: An Overview
Human-Computer Interaction: An OverviewSabin Buraga
 
HCI 2014 (6 of 10): Social (Web) Interactions
HCI 2014 (6 of 10): Social (Web) InteractionsHCI 2014 (6 of 10): Social (Web) Interactions
HCI 2014 (6 of 10): Social (Web) InteractionsSabin Buraga
 
Human computer interaction by Atheer
Human computer interaction by Atheer Human computer interaction by Atheer
Human computer interaction by Atheer Self employed
 

Was ist angesagt? (19)

HCI 2018 (5/10) Information Architecture. From Design Patterns to Flow
HCI 2018 (5/10) Information Architecture. From Design Patterns to FlowHCI 2018 (5/10) Information Architecture. From Design Patterns to Flow
HCI 2018 (5/10) Information Architecture. From Design Patterns to Flow
 
HCI 2014 (1 of 10): Overview
HCI 2014 (1 of 10): OverviewHCI 2014 (1 of 10): Overview
HCI 2014 (1 of 10): Overview
 
HCI 2018 (3/10) Design Models, Methodologies and Guidelines
HCI 2018 (3/10) Design Models, Methodologies and GuidelinesHCI 2018 (3/10) Design Models, Methodologies and Guidelines
HCI 2018 (3/10) Design Models, Methodologies and Guidelines
 
HCI 2015 (2/10) Human Factor. Users
HCI 2015 (2/10) Human Factor. UsersHCI 2015 (2/10) Human Factor. Users
HCI 2015 (2/10) Human Factor. Users
 
HCI 2014 (8 of 10): Data Visualization
HCI 2014 (8 of 10): Data VisualizationHCI 2014 (8 of 10): Data Visualization
HCI 2014 (8 of 10): Data Visualization
 
HCI 2015 (5/10) Information Architecture. Design Patterns. Layout, Actions, D...
HCI 2015 (5/10) Information Architecture. Design Patterns. Layout, Actions, D...HCI 2015 (5/10) Information Architecture. Design Patterns. Layout, Actions, D...
HCI 2015 (5/10) Information Architecture. Design Patterns. Layout, Actions, D...
 
HCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns
HCI 2015 (4/10) Visual Design. Information Architecture. Design PatternsHCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns
HCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns
 
HCI: Design Patterns for Social Web Interaction
HCI: Design Patterns for Social Web InteractionHCI: Design Patterns for Social Web Interaction
HCI: Design Patterns for Social Web Interaction
 
HCI 2014 (3 of 10): Design Models and Methodologies
HCI 2014 (3 of 10): Design Models and MethodologiesHCI 2014 (3 of 10): Design Models and Methodologies
HCI 2014 (3 of 10): Design Models and Methodologies
 
HCI 2015 (7/10) HCI Engineering. UI Evaluation. Models
HCI 2015 (7/10) HCI Engineering. UI Evaluation. ModelsHCI 2015 (7/10) HCI Engineering. UI Evaluation. Models
HCI 2015 (7/10) HCI Engineering. UI Evaluation. Models
 
HCI 2015 (3/10) Design Methodologies
HCI 2015 (3/10) Design MethodologiesHCI 2015 (3/10) Design Methodologies
HCI 2015 (3/10) Design Methodologies
 
HCI 2014 (10 of 10): Natural User Interfaces. Ubiquitous Computing
HCI 2014 (10 of 10): Natural User Interfaces. Ubiquitous ComputingHCI 2014 (10 of 10): Natural User Interfaces. Ubiquitous Computing
HCI 2014 (10 of 10): Natural User Interfaces. Ubiquitous Computing
 
HCI 2014 (2 of 10): Human Factor. Users
HCI 2014 (2 of 10): Human Factor. UsersHCI 2014 (2 of 10): Human Factor. Users
HCI 2014 (2 of 10): Human Factor. Users
 
HCI 2014 (4 of 10): From Information Architecture to Design Patterns
HCI 2014 (4 of 10): From Information Architecture to Design PatternsHCI 2014 (4 of 10): From Information Architecture to Design Patterns
HCI 2014 (4 of 10): From Information Architecture to Design Patterns
 
HCI 2015 (9/10) Affective Factors
HCI 2015 (9/10) Affective FactorsHCI 2015 (9/10) Affective Factors
HCI 2015 (9/10) Affective Factors
 
HCI 2014 (5 of 10): UI Design. From Design Patterns to Flow
HCI 2014 (5 of 10): UI Design. From Design Patterns to FlowHCI 2014 (5 of 10): UI Design. From Design Patterns to Flow
HCI 2014 (5 of 10): UI Design. From Design Patterns to Flow
 
Human-Computer Interaction: An Overview
Human-Computer Interaction: An OverviewHuman-Computer Interaction: An Overview
Human-Computer Interaction: An Overview
 
HCI 2014 (6 of 10): Social (Web) Interactions
HCI 2014 (6 of 10): Social (Web) InteractionsHCI 2014 (6 of 10): Social (Web) Interactions
HCI 2014 (6 of 10): Social (Web) Interactions
 
Human computer interaction by Atheer
Human computer interaction by Atheer Human computer interaction by Atheer
Human computer interaction by Atheer
 

Ähnlich wie HCI 2018 (8/10) An Introduction to Data Visualization. Design, processes, techniques, use cases

Hci03 designmethodologies-150910103121-lva1-app6892
Hci03 designmethodologies-150910103121-lva1-app6892Hci03 designmethodologies-150910103121-lva1-app6892
Hci03 designmethodologies-150910103121-lva1-app6892Ștefan Gordîn
 
HCI 2015 (10/10) Natural User Interfaces. Ubiquitous Computing
HCI 2015 (10/10) Natural User Interfaces. Ubiquitous ComputingHCI 2015 (10/10) Natural User Interfaces. Ubiquitous Computing
HCI 2015 (10/10) Natural User Interfaces. Ubiquitous ComputingSabin Buraga
 
HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models
HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. ModelsHCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models
HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. ModelsSabin Buraga
 
Web Technologies (3/12): Web Programming – Web Application Architecture. Web ...
Web Technologies (3/12): Web Programming – Web Application Architecture. Web ...Web Technologies (3/12): Web Programming – Web Application Architecture. Web ...
Web Technologies (3/12): Web Programming – Web Application Architecture. Web ...Sabin Buraga
 
VIZBI 2015 Tutorial: Cytoscape, IPython, Docker, and Reproducible Network Dat...
VIZBI 2015 Tutorial: Cytoscape, IPython, Docker, and Reproducible Network Dat...VIZBI 2015 Tutorial: Cytoscape, IPython, Docker, and Reproducible Network Dat...
VIZBI 2015 Tutorial: Cytoscape, IPython, Docker, and Reproducible Network Dat...Keiichiro Ono
 
IUI 2010: An Informal Summary of the International Conference on Intelligent ...
IUI 2010: An Informal Summary of the International Conference on Intelligent ...IUI 2010: An Informal Summary of the International Conference on Intelligent ...
IUI 2010: An Informal Summary of the International Conference on Intelligent ...J S
 
IUAV - Information Design, New Technologies, and Social Dimension of Knowledge
IUAV - Information Design, New Technologies, and Social Dimension of KnowledgeIUAV - Information Design, New Technologies, and Social Dimension of Knowledge
IUAV - Information Design, New Technologies, and Social Dimension of KnowledgeMarco Mason
 
Federated Learning of Neural Network Models with Heterogeneous Structures.pdf
Federated Learning of Neural Network Models with Heterogeneous Structures.pdfFederated Learning of Neural Network Models with Heterogeneous Structures.pdf
Federated Learning of Neural Network Models with Heterogeneous Structures.pdfKundjanasith Thonglek
 

Ähnlich wie HCI 2018 (8/10) An Introduction to Data Visualization. Design, processes, techniques, use cases (15)

Hci03 designmethodologies-150910103121-lva1-app6892
Hci03 designmethodologies-150910103121-lva1-app6892Hci03 designmethodologies-150910103121-lva1-app6892
Hci03 designmethodologies-150910103121-lva1-app6892
 
SS2
SS2SS2
SS2
 
HCI 2015 (10/10) Natural User Interfaces. Ubiquitous Computing
HCI 2015 (10/10) Natural User Interfaces. Ubiquitous ComputingHCI 2015 (10/10) Natural User Interfaces. Ubiquitous Computing
HCI 2015 (10/10) Natural User Interfaces. Ubiquitous Computing
 
HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models
HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. ModelsHCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models
HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models
 
Web Technologies (3/12): Web Programming – Web Application Architecture. Web ...
Web Technologies (3/12): Web Programming – Web Application Architecture. Web ...Web Technologies (3/12): Web Programming – Web Application Architecture. Web ...
Web Technologies (3/12): Web Programming – Web Application Architecture. Web ...
 
VIZBI 2015 Tutorial: Cytoscape, IPython, Docker, and Reproducible Network Dat...
VIZBI 2015 Tutorial: Cytoscape, IPython, Docker, and Reproducible Network Dat...VIZBI 2015 Tutorial: Cytoscape, IPython, Docker, and Reproducible Network Dat...
VIZBI 2015 Tutorial: Cytoscape, IPython, Docker, and Reproducible Network Dat...
 
IUI 2010: An Informal Summary of the International Conference on Intelligent ...
IUI 2010: An Informal Summary of the International Conference on Intelligent ...IUI 2010: An Informal Summary of the International Conference on Intelligent ...
IUI 2010: An Informal Summary of the International Conference on Intelligent ...
 
IUAV - Information Design, New Technologies, and Social Dimension of Knowledge
IUAV - Information Design, New Technologies, and Social Dimension of KnowledgeIUAV - Information Design, New Technologies, and Social Dimension of Knowledge
IUAV - Information Design, New Technologies, and Social Dimension of Knowledge
 
Federated Learning of Neural Network Models with Heterogeneous Structures.pdf
Federated Learning of Neural Network Models with Heterogeneous Structures.pdfFederated Learning of Neural Network Models with Heterogeneous Structures.pdf
Federated Learning of Neural Network Models with Heterogeneous Structures.pdf
 
CSE.ppt
CSE.pptCSE.ppt
CSE.ppt
 
PowerAyupppt.ppt
PowerAyupppt.pptPowerAyupppt.ppt
PowerAyupppt.ppt
 
engineering.ppt
engineering.pptengineering.ppt
engineering.ppt
 
computer.ppt
computer.pptcomputer.ppt
computer.ppt
 
CSE.ppt
CSE.pptCSE.ppt
CSE.ppt
 
CSE.ppt
CSE.pptCSE.ppt
CSE.ppt
 

Mehr von Sabin Buraga

Web 2020 01/12: World Wide Web – aspecte arhitecturale
Web 2020 01/12: World Wide Web – aspecte arhitecturaleWeb 2020 01/12: World Wide Web – aspecte arhitecturale
Web 2020 01/12: World Wide Web – aspecte arhitecturaleSabin Buraga
 
Web 2020 02/12: Programare Web – HTTP. Cookie-uri. Sesiuni Web
Web 2020 02/12: Programare Web – HTTP. Cookie-uri. Sesiuni WebWeb 2020 02/12: Programare Web – HTTP. Cookie-uri. Sesiuni Web
Web 2020 02/12: Programare Web – HTTP. Cookie-uri. Sesiuni WebSabin Buraga
 
Web 2020 03/12: Programare Web – Arhitectura aplicaţiilor Web. Inginerie Web
Web 2020 03/12: Programare Web – Arhitectura aplicaţiilor Web. Inginerie WebWeb 2020 03/12: Programare Web – Arhitectura aplicaţiilor Web. Inginerie Web
Web 2020 03/12: Programare Web – Arhitectura aplicaţiilor Web. Inginerie WebSabin Buraga
 
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP Sabin Buraga
 
Web 2020 05/12: Modelarea datelor. Familia XML. Extragerea datelor cu XPath. ...
Web 2020 05/12: Modelarea datelor. Familia XML. Extragerea datelor cu XPath. ...Web 2020 05/12: Modelarea datelor. Familia XML. Extragerea datelor cu XPath. ...
Web 2020 05/12: Modelarea datelor. Familia XML. Extragerea datelor cu XPath. ...Sabin Buraga
 
Web 2020 06/12: Procesarea datelor XML & HTML. Document Object Model
Web 2020 06/12: Procesarea datelor XML & HTML. Document Object ModelWeb 2020 06/12: Procesarea datelor XML & HTML. Document Object Model
Web 2020 06/12: Procesarea datelor XML & HTML. Document Object ModelSabin Buraga
 
Web 2020 07/12: Procesarea datelor XML & HTML – Simple API for XML. Procesări...
Web 2020 07/12: Procesarea datelor XML & HTML – Simple API for XML. Procesări...Web 2020 07/12: Procesarea datelor XML & HTML – Simple API for XML. Procesări...
Web 2020 07/12: Procesarea datelor XML & HTML – Simple API for XML. Procesări...Sabin Buraga
 
Web 2020 08/12: Servicii Web. De la arhitecturi orientate spre servicii la SO...
Web 2020 08/12: Servicii Web. De la arhitecturi orientate spre servicii la SO...Web 2020 08/12: Servicii Web. De la arhitecturi orientate spre servicii la SO...
Web 2020 08/12: Servicii Web. De la arhitecturi orientate spre servicii la SO...Sabin Buraga
 
Web 2020 09/12: Servicii Web. Paradigma REST
Web 2020 09/12: Servicii Web. Paradigma RESTWeb 2020 09/12: Servicii Web. Paradigma REST
Web 2020 09/12: Servicii Web. Paradigma RESTSabin Buraga
 
Web 2020 10/12: Servicii Web. Micro-servicii. Serverless. Specificarea API-ur...
Web 2020 10/12: Servicii Web. Micro-servicii. Serverless. Specificarea API-ur...Web 2020 10/12: Servicii Web. Micro-servicii. Serverless. Specificarea API-ur...
Web 2020 10/12: Servicii Web. Micro-servicii. Serverless. Specificarea API-ur...Sabin Buraga
 
Web 2020 11/12: Interacţiune Web asincronă. Aplicaţii Web de tip mash-up. JAM...
Web 2020 11/12: Interacţiune Web asincronă. Aplicaţii Web de tip mash-up. JAM...Web 2020 11/12: Interacţiune Web asincronă. Aplicaţii Web de tip mash-up. JAM...
Web 2020 11/12: Interacţiune Web asincronă. Aplicaţii Web de tip mash-up. JAM...Sabin Buraga
 
Web 2020 12/12: Securitatea aplicaţiilor Web. Aspecte esenţiale
Web 2020 12/12: Securitatea aplicaţiilor Web. Aspecte esenţialeWeb 2020 12/12: Securitatea aplicaţiilor Web. Aspecte esenţiale
Web 2020 12/12: Securitatea aplicaţiilor Web. Aspecte esenţialeSabin Buraga
 
STAW 01/12: Arhitectura aplicaţiilor Web
STAW 01/12: Arhitectura aplicaţiilor WebSTAW 01/12: Arhitectura aplicaţiilor Web
STAW 01/12: Arhitectura aplicaţiilor WebSabin Buraga
 
STAW 02/12: Programare Web: Limbajul JavaScript. Aspecte esenţiale
STAW 02/12: Programare Web: Limbajul JavaScript. Aspecte esenţialeSTAW 02/12: Programare Web: Limbajul JavaScript. Aspecte esenţiale
STAW 02/12: Programare Web: Limbajul JavaScript. Aspecte esenţialeSabin Buraga
 
STAW 03/12: Programare Web: Limbajul JavaScript. Aspecte moderne: ES6 et al.
STAW 03/12: Programare Web: Limbajul JavaScript. Aspecte moderne: ES6 et al.STAW 03/12: Programare Web: Limbajul JavaScript. Aspecte moderne: ES6 et al.
STAW 03/12: Programare Web: Limbajul JavaScript. Aspecte moderne: ES6 et al.Sabin Buraga
 
STAW 04/12: Programare Web: Node.js
STAW 04/12: Programare Web: Node.jsSTAW 04/12: Programare Web: Node.js
STAW 04/12: Programare Web: Node.jsSabin Buraga
 
STAW 05/12: Arhitectura navigatorului Web
STAW 05/12: Arhitectura navigatorului WebSTAW 05/12: Arhitectura navigatorului Web
STAW 05/12: Arhitectura navigatorului WebSabin Buraga
 
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uriSTAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uriSabin Buraga
 
STAW 07/12: Ingineria dezvoltării aplicaţiilor JavaScript
STAW 07/12: Ingineria dezvoltării aplicaţiilor JavaScriptSTAW 07/12: Ingineria dezvoltării aplicaţiilor JavaScript
STAW 07/12: Ingineria dezvoltării aplicaţiilor JavaScriptSabin Buraga
 
STAW 08/12: Programare Web. Suita de tehnologii HTML5
STAW 08/12: Programare Web. Suita de tehnologii HTML5STAW 08/12: Programare Web. Suita de tehnologii HTML5
STAW 08/12: Programare Web. Suita de tehnologii HTML5Sabin Buraga
 

Mehr von Sabin Buraga (20)

Web 2020 01/12: World Wide Web – aspecte arhitecturale
Web 2020 01/12: World Wide Web – aspecte arhitecturaleWeb 2020 01/12: World Wide Web – aspecte arhitecturale
Web 2020 01/12: World Wide Web – aspecte arhitecturale
 
Web 2020 02/12: Programare Web – HTTP. Cookie-uri. Sesiuni Web
Web 2020 02/12: Programare Web – HTTP. Cookie-uri. Sesiuni WebWeb 2020 02/12: Programare Web – HTTP. Cookie-uri. Sesiuni Web
Web 2020 02/12: Programare Web – HTTP. Cookie-uri. Sesiuni Web
 
Web 2020 03/12: Programare Web – Arhitectura aplicaţiilor Web. Inginerie Web
Web 2020 03/12: Programare Web – Arhitectura aplicaţiilor Web. Inginerie WebWeb 2020 03/12: Programare Web – Arhitectura aplicaţiilor Web. Inginerie Web
Web 2020 03/12: Programare Web – Arhitectura aplicaţiilor Web. Inginerie Web
 
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP
 
Web 2020 05/12: Modelarea datelor. Familia XML. Extragerea datelor cu XPath. ...
Web 2020 05/12: Modelarea datelor. Familia XML. Extragerea datelor cu XPath. ...Web 2020 05/12: Modelarea datelor. Familia XML. Extragerea datelor cu XPath. ...
Web 2020 05/12: Modelarea datelor. Familia XML. Extragerea datelor cu XPath. ...
 
Web 2020 06/12: Procesarea datelor XML & HTML. Document Object Model
Web 2020 06/12: Procesarea datelor XML & HTML. Document Object ModelWeb 2020 06/12: Procesarea datelor XML & HTML. Document Object Model
Web 2020 06/12: Procesarea datelor XML & HTML. Document Object Model
 
Web 2020 07/12: Procesarea datelor XML & HTML – Simple API for XML. Procesări...
Web 2020 07/12: Procesarea datelor XML & HTML – Simple API for XML. Procesări...Web 2020 07/12: Procesarea datelor XML & HTML – Simple API for XML. Procesări...
Web 2020 07/12: Procesarea datelor XML & HTML – Simple API for XML. Procesări...
 
Web 2020 08/12: Servicii Web. De la arhitecturi orientate spre servicii la SO...
Web 2020 08/12: Servicii Web. De la arhitecturi orientate spre servicii la SO...Web 2020 08/12: Servicii Web. De la arhitecturi orientate spre servicii la SO...
Web 2020 08/12: Servicii Web. De la arhitecturi orientate spre servicii la SO...
 
Web 2020 09/12: Servicii Web. Paradigma REST
Web 2020 09/12: Servicii Web. Paradigma RESTWeb 2020 09/12: Servicii Web. Paradigma REST
Web 2020 09/12: Servicii Web. Paradigma REST
 
Web 2020 10/12: Servicii Web. Micro-servicii. Serverless. Specificarea API-ur...
Web 2020 10/12: Servicii Web. Micro-servicii. Serverless. Specificarea API-ur...Web 2020 10/12: Servicii Web. Micro-servicii. Serverless. Specificarea API-ur...
Web 2020 10/12: Servicii Web. Micro-servicii. Serverless. Specificarea API-ur...
 
Web 2020 11/12: Interacţiune Web asincronă. Aplicaţii Web de tip mash-up. JAM...
Web 2020 11/12: Interacţiune Web asincronă. Aplicaţii Web de tip mash-up. JAM...Web 2020 11/12: Interacţiune Web asincronă. Aplicaţii Web de tip mash-up. JAM...
Web 2020 11/12: Interacţiune Web asincronă. Aplicaţii Web de tip mash-up. JAM...
 
Web 2020 12/12: Securitatea aplicaţiilor Web. Aspecte esenţiale
Web 2020 12/12: Securitatea aplicaţiilor Web. Aspecte esenţialeWeb 2020 12/12: Securitatea aplicaţiilor Web. Aspecte esenţiale
Web 2020 12/12: Securitatea aplicaţiilor Web. Aspecte esenţiale
 
STAW 01/12: Arhitectura aplicaţiilor Web
STAW 01/12: Arhitectura aplicaţiilor WebSTAW 01/12: Arhitectura aplicaţiilor Web
STAW 01/12: Arhitectura aplicaţiilor Web
 
STAW 02/12: Programare Web: Limbajul JavaScript. Aspecte esenţiale
STAW 02/12: Programare Web: Limbajul JavaScript. Aspecte esenţialeSTAW 02/12: Programare Web: Limbajul JavaScript. Aspecte esenţiale
STAW 02/12: Programare Web: Limbajul JavaScript. Aspecte esenţiale
 
STAW 03/12: Programare Web: Limbajul JavaScript. Aspecte moderne: ES6 et al.
STAW 03/12: Programare Web: Limbajul JavaScript. Aspecte moderne: ES6 et al.STAW 03/12: Programare Web: Limbajul JavaScript. Aspecte moderne: ES6 et al.
STAW 03/12: Programare Web: Limbajul JavaScript. Aspecte moderne: ES6 et al.
 
STAW 04/12: Programare Web: Node.js
STAW 04/12: Programare Web: Node.jsSTAW 04/12: Programare Web: Node.js
STAW 04/12: Programare Web: Node.js
 
STAW 05/12: Arhitectura navigatorului Web
STAW 05/12: Arhitectura navigatorului WebSTAW 05/12: Arhitectura navigatorului Web
STAW 05/12: Arhitectura navigatorului Web
 
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uriSTAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri
 
STAW 07/12: Ingineria dezvoltării aplicaţiilor JavaScript
STAW 07/12: Ingineria dezvoltării aplicaţiilor JavaScriptSTAW 07/12: Ingineria dezvoltării aplicaţiilor JavaScript
STAW 07/12: Ingineria dezvoltării aplicaţiilor JavaScript
 
STAW 08/12: Programare Web. Suita de tehnologii HTML5
STAW 08/12: Programare Web. Suita de tehnologii HTML5STAW 08/12: Programare Web. Suita de tehnologii HTML5
STAW 08/12: Programare Web. Suita de tehnologii HTML5
 

Kürzlich hochgeladen

TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 

Kürzlich hochgeladen (20)

TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 

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 (DataInformationKnowledgeWisdom) 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
  • 82. 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
  • 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
  • 100. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/ discussion aspects of interest concerning datasets: data and dataset types tables – items & attributes graphs (networks / trees) – items (nodes), links, attributes fields – grids + positions, attributes geometry (spatial) – items + positions clusters, sets, lists – items
  • 101. 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
  • 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,…
  • 114. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/ discussion Tamara Munzner, Visualization Analysis & Design, PacificVis 2016 http://www.cs.ubc.ca/~tmm/talks.html casual, social,…
  • 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
  • 129. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/ discussion aspects of interest: manipulate – change, select, navigate facet – juxtapose, partition, superimpose reduce – filter, aggregate, embed
  • 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
  • 149. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/ visualization taxonomy Simple visual structures articulated reading networks
  • 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
  • 155. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/ visualization taxonomy Composed visual structures single-axis composition [XYn]: permutation matrices, parallel coordinates
  • 156. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/ visualization taxonomy a parallel coordinate view of a firewall log file context: security visualization – secviz.org
  • 157. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/ visualization taxonomy Composed visual structures double-axis composition [XY]: graphs ontology visualization owlgred.lumii.lv
  • 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
  • 167. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/ visualization taxonomy Focus + context attention-reactive visual abstraction data-driven methods: filtering, selective aggregation
  • 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
  • 169. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/ visualization taxonomy Focus + context attention-reactive visual abstraction view-based methods: micro-macro readings, highlighting, visual transfer functions, perspective distortion, alternate geometries
  • 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