Iasi code camp 12 october 2013 corneliu rimboiu - bridging java and .net
Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4....
Transcript of Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4....
![Page 1: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/1.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Human-Computer Interaction
data visualization
www.visualisingdata.com
Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/
![Page 2: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/2.jpg)
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
![Page 3: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/3.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
reality
Data is no longer scarce
![Page 4: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/4.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
www.worldometers.info
![Page 5: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/5.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data characteristics: variety, volume, velocityadapted from blog.sqlauthority.com
data variety
data velocity
data volume
real-time (stream)
interval (continuous)
batch (atomic)
sparse(discrete)
unstructured
RDBMSsemi-struc-turedXML
multi-media
JSONCSV
bi-nary
KB
MBGBTBEB
PBZB
YB
![Page 6: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/6.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
reality
Volume lots of data (“tonnabytes” – Kirk Borne, 2012)
Variety complexity, features, data types & formats
Velocity high rate of data processed in real-time
Veracity data is accurate, precise and trusted?
Validitydata quality + governance, master data management on massive, distributed, heterogeneous collections
Variability dynamic, evolving, non-static data(-sources)
Value business value + ROI (Return of Investment)
Vocabulary structure, models, schema, semantics,…
Venuedistributed, heterogeneous data from multiple platforms & systems + context-based meta-data
Vagueness confusion over the meaning of found data
Vault concerns about data security (e.g., privacy)
Volatility unpredictability of data availability
adapted from D. Laney (2001), K. Borne (2014), T. Shafer (2017)
![Page 7: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/7.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
needs
To integrate, simplify, and capitalize on existing information systems and
the massive amounts of data they hold
www.softviscollection.org/intro/a-thousand-words/
![Page 8: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/8.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
DIKW (DataInformationKnowledgeWisdom)after S. Carpenter, 2008 & J. Liebowitz, 2012
![Page 9: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/9.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
What information visualization means?
![Page 10: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/10.jpg)
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
![Page 11: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/11.jpg)
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
![Page 12: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/12.jpg)
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
![Page 13: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/13.jpg)
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
![Page 14: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/14.jpg)
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
![Page 15: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/15.jpg)
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
![Page 16: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/16.jpg)
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
![Page 17: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/17.jpg)
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
![Page 18: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/18.jpg)
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
![Page 19: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/19.jpg)
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
![Page 20: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/20.jpg)
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
informationisbeautiful.net/visualizations/worlds-biggest-data-breaches-hacks/
![Page 21: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/21.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Benefits: observing the data/knowledge evolution
1 ian. 2013(CSS: 35 KB, JS: 207 KB)
15 dec. 2015(CSS: 76 KB, JS: 363 KB)
httparchive.org/compare.php
1 oct. 2016(CSS: 76 KB, JS: 410 KB)
15 dec. 2017(CSS: 98 KB, JS: 504 KB)
![Page 22: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/22.jpg)
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/
![Page 23: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/23.jpg)
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)
get
.car
rots
earc
h.c
om
/fo
amtr
ee/la
test
/dem
os/
ft50
0htm
l
![Page 24: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/24.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualizationOther benefits (Chibana, 2015):
revealing trends
www.populationpyramid.net
![Page 25: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/25.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualizationOther benefits (Chibana, 2015):
placing data/information into a specific context
Universcale (Nikon): www.nikon.com/about/sp/universcale/
![Page 26: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/26.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualizationOther benefits (Chibana, 2015):
providing perspectives regarding a topic/domain
V. Markovtsev, Daily commit activity on GitHub (2017): blog.sourced.tech/post/activity_hours/
![Page 27: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/27.jpg)
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/
![Page 28: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/28.jpg)
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
![Page 29: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/29.jpg)
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
![Page 30: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/30.jpg)
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
![Page 31: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/31.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
actual map of the world (Wilke, 2019)different projections: Cartesian, interrupted Goode homolosine,
Robinson, Winkel tripel
![Page 32: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/32.jpg)
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
![Page 33: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/33.jpg)
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)
![Page 34: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/34.jpg)
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
![Page 35: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/35.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
an early example: merchandise imports/exportsW. Playfair, The Commercial and Political Atlas (1786)
![Page 36: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/36.jpg)
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)
![Page 37: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/37.jpg)
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)
![Page 38: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/38.jpg)
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)
![Page 39: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/39.jpg)
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)
![Page 40: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/40.jpg)
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)
![Page 41: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/41.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization
Data visualization vs. infographics
![Page 42: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/42.jpg)
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
![Page 43: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/43.jpg)
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
![Page 44: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/44.jpg)
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
see also www.slideshare.net/busaco/generative-art-a-gentle-introduction
data/info viz. infographics
generative artcreative coding
![Page 45: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/45.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
data visualization design
![Page 46: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/46.jpg)
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 formthat supports human interaction in a workplace
for visual sense making
![Page 47: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/47.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Algorithm Visualizer – algo-visualizer.jasonpark.me
![Page 48: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/48.jpg)
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
processingalgorithms
mappingvisual encoding
data visualization overviewadapted from Jeffrey Heer, Data Visualization (2020)
courses.cs.washington.edu/courses/cse442/20wi/
![Page 49: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/49.jpg)
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
datatables
visualstructs.
views ☺data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
![Page 50: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/50.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Raw Dataunfiltered/unprocessed input data
Data Tables
suitable date structures: relations + meta-data
Visual Structuresconvenient graphical elements
Views
(interactive) visualizations perceived by user(s)
![Page 51: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/51.jpg)
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
datatables
visualstructs.
views ☺data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
![Page 52: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/52.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Data Transformationsprovides document vectors
(normalized vectors in a N-dimensional space)
could imply different filtering operations
raw data
datatables
visualstructs.
views ☺data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
![Page 53: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/53.jpg)
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
datatables
visualstructs.
views ☺data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
![Page 54: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/54.jpg)
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
![Page 55: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/55.jpg)
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 objectfor each film: title, release year, genre, main actors,…
![Page 56: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/56.jpg)
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
![Page 57: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/57.jpg)
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
![Page 58: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/58.jpg)
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
![Page 59: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/59.jpg)
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 sete.g., film titles { Blade Runner, Brazil, The Wall,…}
(in)equality operators could be used
![Page 60: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/60.jpg)
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
![Page 61: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/61.jpg)
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 rangeexample: film duration [0, 400]
arithmetic operators could be performed on them
![Page 62: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/62.jpg)
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 spatial2D/3D spatial variables
commonly used in scientific visualization
![Page 63: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/63.jpg)
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 corescacs.usc.edu/education/cs596.html
![Page 64: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/64.jpg)
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 geographicalspatial variables
that specifically represent geophysical coordinates
![Page 65: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/65.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
3D map visualizations via Google Maps APIdevelopers.google.com/maps/documentation/
![Page 66: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/66.jpg)
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
![Page 67: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/67.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Data Tables
temporal variables
quantitative timeordinal time
![Page 68: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/68.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
crypto-currencies’ dynamics: cryptomaps.org
![Page 69: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/69.jpg)
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 scalewhose only value is present or absent (e.g., an error flag)
![Page 70: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/70.jpg)
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
![Page 71: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/71.jpg)
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
![Page 72: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/72.jpg)
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
![Page 73: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/73.jpg)
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
![Page 74: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/74.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Visual Mappingscreating analytic abstractions to be visualized
from spatial coordinates to surfaceson an information 2D/3D landscape
raw data
datatables
visualstructs.
views ☺data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
![Page 75: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/75.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
example
see also Explained Visually – setosa.io/ev/
Blockchain visually explained (Reuters, 2018): graphics.reuters.com/TECHNOLOGY-BLOCKCHAIN/010070P11GN/
![Page 76: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/76.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Visual Structuresuse a vocabulary of visual elements:
spatial substrates + marks + graphical properties
raw data
datatables
visualstructs.
views ☺data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
![Page 77: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/77.jpg)
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
![Page 78: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/78.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
Visual Structures
spatial substratemarks
connectionenclosure
retinal propertiestemporal encoding
![Page 79: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/79.jpg)
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 ↔ space axis
![Page 80: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/80.jpg)
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 axisN – nominal grid a region divided into sub-regionsO – ordinal grid sub-region ordering is significantQ – quantitative grid a region has a metric
![Page 81: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/81.jpg)
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
![Page 82: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/82.jpg)
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
![Page 83: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/83.jpg)
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
![Page 84: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/84.jpg)
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
![Page 85: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/85.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
![Page 86: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/86.jpg)
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
![Page 87: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/87.jpg)
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
![Page 88: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/88.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
enclosure diagrambl.ocks.org/mbostock/4063530
visualizing a hierarchy of
entities belonging to a class
![Page 89: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/89.jpg)
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
![Page 90: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/90.jpg)
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 genreFilmID (Genre) → P (Color)
possible conventions: Drama ⬛ Sci-Fi ⬛War ⬛
![Page 91: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/91.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
po
dio
.co
m/s
ite/
crea
tive
-ro
uti
nes
![Page 92: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/92.jpg)
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
![Page 93: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/93.jpg)
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/
![Page 94: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/94.jpg)
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 visualizedversus
animation – mapping a variable into time
![Page 95: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/95.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
View Transformationsoffer various views (graphical representations)
according to the user goals
raw data
datatables
visualstructs.
views ☺data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
![Page 96: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/96.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Viewsperceived by end-users
+adjusted by graphical parameters
(positioning, scaling, clipping, rotating,…)
raw data
datatables
visualstructs.
views ☺data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
![Page 97: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/97.jpg)
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 performedat different places in the model
![Page 98: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/98.jpg)
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 performedat different places in the model
example:when a point is deleted from the visualization, has the point been deleted from the dataset?
![Page 99: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/99.jpg)
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
![Page 100: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/100.jpg)
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
![Page 101: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/101.jpg)
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
![Page 102: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/102.jpg)
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
good vs. ugly vs. bad vs. wrong visualizations
Claus O. Wilke, Fundamentals of Data Visualization, O’Reilly, 2019
![Page 103: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/103.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
![Page 104: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/104.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
ugly: aesthetic problems, but otherwise clear & informative
![Page 105: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/105.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
ugly: aesthetic problems, but otherwise clear & informative
bad: problems related to perception (unclear, confusing,
complicated, deceiving)
![Page 106: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/106.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization modeling
ugly: aesthetic problems, but otherwise clear & informative
bad: problems related to perception (unclear, confusing,
complicated, deceiving)
wrong: problems related to mathematics
– objectively incorrect
![Page 107: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/107.jpg)
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
example
![Page 108: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/108.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
How about the processes concerning data visualization?
www.concerthotels.com/100-years-of-rock/
![Page 109: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/109.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization processes
AcquireParseFilterMine
RepresentRefine
Interact
according to Ben Fry, 2008
![Page 110: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/110.jpg)
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
![Page 111: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/111.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
Tamara Munzner, Visualization Analysis & Design, 2020www.cs.ubc.ca/~tmm/talks.html
aspects of interest concerning datasets:
data types
itemsattributes
relations (links)positions
grids
![Page 112: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/112.jpg)
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 & attributesgraphs (networks / trees) – items (nodes), links, attributes
fields – grids + positions, attributesgeometry (spatial) – items + positions
clusters, sets, lists – items
![Page 113: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/113.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
Tamara Munzner, Visualization Analysis & Design, 2020www.cs.ubc.ca/~tmm/talks.html
![Page 114: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/114.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
Tamara Munzner, Visualization Analysis & Design, 2020www.cs.ubc.ca/~tmm/talks.html
aspects of interest concerning datasets:
dataset availability
static
versus
dynamic
![Page 115: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/115.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
Tamara Munzner, Visualization Analysis & Design, 2020www.cs.ubc.ca/~tmm/talks.html
aspects of interest regarding the attributes:
attribute types
categorical
![Page 116: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/116.jpg)
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
orderedordinal
quantitative
![Page 117: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/117.jpg)
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
![Page 118: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/118.jpg)
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 Datasetsgithub.com/caesar0301/awesome-public-datasets
Awesome JSON Datasetsgithub.com/jdorfman/awesome-json-datasets
Common Crawl – commoncrawl.org/the-data/
DataHub – datahub.io/dataset
Kaggle Datasets – www.kaggle.com/datasets
![Page 119: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/119.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization processesOpen datasets provided by companies – examples:
GitHub Archivewww.gharchive.org
Google BigQuery Public Datasetscloud.google.com/bigquery/public-data/
Microsoft Azure: Public Datasetsdocs.microsoft.com/azure/sql-database/sql-database-public-data-sets
Registry of Open Data on Amazon Web Servicesregistry.opendata.aws
![Page 120: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/120.jpg)
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
![Page 121: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/121.jpg)
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
![Page 122: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/122.jpg)
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 miningto discern patterns or
to place data in a mathematical context
pragmatic approaches: G. Myatt, W. Johnson, Making Sense of Data I, II, and III, Wiley, 2007, 2009, 2011
![Page 123: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/123.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
Tamara Munzner, Visualization Analysis & Design, 2020www.cs.ubc.ca/~tmm/talks.html
aspects of interest concerning data processing:
{ action, target }
discover distributioncompare trendslocate outliers
browse topology
![Page 124: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/124.jpg)
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
![Page 125: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/125.jpg)
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
consumediscover (explore) vs. present (explain)
produceannotate, record, derive,…
![Page 126: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/126.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
Tamara Munzner, Visualization Analysis & Design, PacificVis 2016http://www.cs.ubc.ca/~tmm/talks.html
casual, social,…
![Page 127: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/127.jpg)
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?
![Page 128: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/128.jpg)
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,…
![Page 129: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/129.jpg)
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
![Page 130: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/130.jpg)
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
![Page 131: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/131.jpg)
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
a single one – e.g., distribution
![Page 132: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/132.jpg)
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,…
![Page 133: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/133.jpg)
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
![Page 134: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/134.jpg)
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
![Page 135: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/135.jpg)
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)
![Page 136: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/136.jpg)
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
![Page 137: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/137.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
encode
arrange
expressseparate
orderalignuse
![Page 138: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/138.jpg)
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, saturationsize, angle, curvature,…
shapemotion
![Page 139: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/139.jpg)
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
![Page 140: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/140.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
examplerefining
a visualization for better
perception
Claus Wilke (2019)
![Page 141: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/141.jpg)
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
![Page 142: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/142.jpg)
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
![Page 143: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/143.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/Tamara Munzner (2017)
![Page 144: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/144.jpg)
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
![Page 145: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/145.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization processes
adopting an iterative approach (Fry, 2008)
![Page 146: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/146.jpg)
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
![Page 147: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/147.jpg)
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,…
![Page 148: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/148.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/also stydy eagereyes.org/techniques/pie-charts
![Page 149: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/149.jpg)
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
![Page 150: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/150.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
2D visualizations generated by Google Data Studiomarketingplatform.google.com/about/data-studio/
example
![Page 151: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/151.jpg)
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
![Page 152: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/152.jpg)
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
![Page 153: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/153.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
retinal scatterplot – here, a heat mapsecviz.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
![Page 154: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/154.jpg)
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
![Page 155: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/155.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
3D visualization of city population density by using a Web tool: Kepler – kepler.gl
![Page 156: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/156.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Simple visual structures
articulated reading may present a barrier of perception
![Page 157: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/157.jpg)
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
![Page 158: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/158.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Krona – exploratory scientific visualization of hierarchical (taxonomic) data: github.com/marbl/Krona
![Page 159: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/159.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
3D visualization of a cyber-attackzones-maps.bid/network-attack-map/the-best-live-cyber-attack-maps-cyberwarzone.html
![Page 160: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/160.jpg)
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
![Page 161: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/161.jpg)
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 genderO’Connor & Biewald, 2009
![Page 162: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/162.jpg)
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
![Page 163: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/163.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
a treemap of terms occurring in geography titles and comments for 6 selected scene types
T. Segaran & J. Hammerbacher (Eds.), Beautiful Data, O’Reilly, 2009
![Page 164: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/164.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Simple visual structures
articulated reading
network visualization
![Page 165: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/165.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
map-based visualization of cyber-attacks’ types & volume zones-maps.bid/network-attack-map.html
explore also graphofthings.org
![Page 166: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/166.jpg)
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
![Page 167: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/167.jpg)
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
![Page 168: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/168.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Here Is…hereistoday.com
case study
![Page 169: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/169.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Definitive Daft Punkthemaninblue.com/writing/perspective/2011/05/12/
case study
![Page 170: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/170.jpg)
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
![Page 171: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/171.jpg)
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 filecontext: security visualization – secviz.org
![Page 172: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/172.jpg)
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
example:ontology
visualization notations
+ tools
(re)visit Web Application Development discipline: profs.info.uaic.ro/~busaco/teach/courses/wade/
![Page 173: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/173.jpg)
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,…
![Page 174: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/174.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
visualizing correlated informationwww.andreykurenkov.com/writing/fun-visualizations-of-stackoverflow/
![Page 175: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/175.jpg)
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,…
![Page 176: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/176.jpg)
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 Adobethewhyaxis.info/music/
case study
![Page 177: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/177.jpg)
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
![Page 178: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/178.jpg)
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
Firefox Reality (Mozilla): mixedreality.mozilla.org
resources of interest: webvr.rocks + next.reality.news
![Page 179: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/179.jpg)
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)
![Page 180: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/180.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Poem Viewer – imagery lens for visualizing corporaovii.oerc.ox.ac.uk/PoemVis/
case study
![Page 181: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/181.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
brushingperforming a data selection task (e.g., click/tap and drag)
linkinghighlighting the matching data samples in the other views
for a demo, visit mbostock.github.io/protovis/ex/brush.html
![Page 182: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/182.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Additionally, visual representations could involve users
data-driven methods: context-based filteringselective aggregation
![Page 183: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/183.jpg)
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
![Page 184: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/184.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Additionally, visual representations could involve users
view-based methods:micro-macro readings, highlighting, visual transfer
functions, perspective distortion, alternate geometries
![Page 185: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/185.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
micro-macro readingspresenting large quantities of data at high densities
goal: to see the bigger picturemedium.com/@dominikus/the-superpower-of-interactive-datavis-a-micro-macro-view-4d027e3bdc71
Selfiexploratory – selfiecity.net/selfiexploratory/
![Page 186: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/186.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Visualizing uncertainty
common solutions to indicate uncertainty:
error bars
confidence bands
![Page 187: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/187.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Visualizing uncertainty
uncertainty of point estimates: error bars
we can adopt concepts from statistical sampling (mean, standard deviation, confidence interval)
![Page 188: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/188.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
expert ratings of 125 chocolate barsscale from 1 (unpleasant) to 5 (elite)
Claus O. Wilke, Fundamentals of Data Visualization, O’Reilly, 2019
example
![Page 189: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/189.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
Visualizing uncertainty
uncertainty of curve fits: confidence bands
could be used to show the uncertainty in a trend line
drawing alternative fit lines randomly generated by using a specific confidence level and
posterior probabilities of the fit parameters
![Page 190: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/190.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visualization taxonomy
male blue jays – head length versus body massstraight blue line represents the best linear fit to the data
the gray band shows the uncertainty in the linear fit
Claus O. Wilke, Fundamentals of Data Visualization, O’Reilly, 2019
example
![Page 191: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/191.jpg)
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
![Page 192: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/192.jpg)
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)
![Page 193: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/193.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusionsvarious examples: junkcharts.typepad.com
percentage of percentages?
![Page 194: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/194.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions real-life examples:viz.wtf
???
![Page 195: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/195.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
remarks
Pragmatic advice: consider visual impairments
color cannot always convey information as effectively as we might wish
![Page 196: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/196.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
difficulty in matching the colors in the plot
to the colors in the legend
case study
![Page 197: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/197.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
colors look similar for people suffering from color-vision deficiency
case study
![Page 198: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/198.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
case study
![Page 199: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/199.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
remarks
Pragmatic advice: consider visual impairments
color cannot always convey information as effectively as we might wish
solution: redundant codingadopting multiple visual variables to depict data
![Page 200: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/200.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
case study a better perception
![Page 201: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/201.jpg)
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.
![Page 202: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/202.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
concluzii
History of Rock Musicwww.svds.com/rockandroll/
![Page 203: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/203.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
remarks
Pragmatic advice: avoid gratuitous 3D
problems of perception + cognitive load(data distortion)
![Page 204: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/204.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
example
a bad 3D visualization of mortality rates for groups of people and age categories Claus Wilke (2019)
![Page 205: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/205.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
example a better perception
Claus Wilke (2019)
![Page 206: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/206.jpg)
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
![Page 207: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/207.jpg)
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
![Page 208: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/208.jpg)
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
![Page 209: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/209.jpg)
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.orgD3.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
![Page 210: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/210.jpg)
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
![Page 211: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/211.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
visual representations of data could be also physical (i.e. generated by a 3D printer)
various case studies: dataphys.org/list/
Nathalie Miebach (2007) Leo Smith (2018)
![Page 212: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/212.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
Main purposes of information visualization:
exploratory visualizationdiscover patterns, trends, or sub-problems in a data set
explanatory visualizationtransmitting information or a point of view to the user
![Page 213: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/213.jpg)
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)
![Page 214: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/214.jpg)
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
![Page 215: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/215.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
Main purposes of information visualization:
exploratory visualizationdiscover patterns, trends, or sub-problems in a data set
explanatory visualizationtransmitting information or a point of view to the user
![Page 216: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/216.jpg)
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
![Page 217: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/217.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
using iPad to learn programming in a creative way
Swift Playgrounds – www.apple.com/swift/playgrounds/
case study
![Page 218: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/218.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Awesome Visualization Researchgithub.com/mathisonian/awesome-visualization-research
Data Viz Project – datavizproject.com
Data Visualization Catalogue – datavizcatalogue.com
Data Viz Done Right – www.datavizdoneright.com
Flowing Data – flowingdata.com
Information is Beautiful – www.informationisbeautiful.net
Creative Applications – www.creativeapplications.net
DevArt – devart.withgoogle.com
![Page 219: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/219.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
Data visualization as story telling
![Page 220: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/220.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
Data visualization as story telling
showing dataversus
storytelling with data
Cole Nussbaumer Knaflic, Storytelling with Data,Wiley & Sons, 2015
![Page 221: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/221.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
showing data – a pie chart visualization – about a survey on a pilot program about science
case study
Cole Knaflic (2015)
![Page 222: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/222.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
storytelling with data: same data, useful outcome
Cole Knaflic (2015)
case study
![Page 223: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/223.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
initial data visualization
case study
Cole Knaflic (2015)
![Page 224: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/224.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
conclusions
storytelling with data: refined data visualizationemphasizing various aspects of interest
case study
Co
le K
naf
lic
(20
15)
![Page 225: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/225.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
“Conclusion”
data visualizationdefinitions, classification, methods, examples
datavizproject.com
![Page 226: Human-Computer Interaction - Alexandru Ioan Cuza Universitybusaco/teach/courses/hci/... · 2020. 4. 28. · Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu](https://reader035.fdocuments.us/reader035/viewer/2022062403/60f015703d9f9878c9351694/html5/thumbnails/226.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
next episode:affective factors & persuasive technologies