human-computer interaction - alexandru ioan cuza universitybusaco/teach/courses/hci/... · 2020. 4....

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/



“Above all else show the data.”

Edward R. Tufte



reality

Data is no longer scarce



www.worldometers.info



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



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)



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/



DIKW (DataInformationKnowledgeWisdom)after S. Carpenter, 2008 & J. Liebowitz, 2012



What information visualization means?



data visualization

A class of techniques for augmenting cognition



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



data visualization

A process of mapping information to visuals



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



informa-tion

design

data per-ceptuali-

zation

data visuali-zation

scientific visuali-zation



data visualization

Minimal criteria that any visualization has to fulfill to be considered a pragmatic visualization:

based on (non-visual) data



data visualization



produce an image



data visualization



produce an image

the result must be readable and recognizable



data visualization

Benefits – adapted from Card et al. (2009):reducing the search for information



data visualization

Benefits – adapted from Card et al. (2009):enhancing the pattern detection



data visualization

Benefits – adapted from Card et al. (2009):

encoding information in an interactive medium

informationisbeautiful.net/visualizations/worlds-biggest-data-breaches-hacks/



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)



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/



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



data visualizationOther benefits (Chibana, 2015):

revealing trends

www.populationpyramid.net




placing data/information into a specific context

Universcale (Nikon): www.nikon.com/about/sp/universcale/




providing perspectives regarding a topic/domain

V. Markovtsev, Daily commit activity on GitHub (2017): blog.sourced.tech/post/activity_hours/



data visualization

Other benefits (Chibana, 2015):

stimulating the user imagination (“what if…?”)

Anon (2018) – director: Andrew Niccol: www.imdb.com/title/tt5397194/



data visualization

Origins:

maps

used from ancient times to convey, in an abstract way, known geographic areas + to provide orientation



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



Imago Mundi – Babilon (V Century, B.C.)www.ancient-wisdom.co.uk/cartography.htm

images provided by Wikimedia Commons



actual map of the world (Wilke, 2019)different projections: Cartesian, interrupted Goode homolosine,

Robinson, Winkel tripel



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



data visualization

Newton’s optics illustration – reported by Robin (1992)



data visualization

Origins:

abstract diagrams

employs non-physical information



data visualization

an early example: merchandise imports/exportsW. Playfair, The Commercial and Political Atlas (1786)



data visualization

Origins:

visual design + data graphics

design principles of information visualization (infovis)

Edward Tufte (1983, 1990, 1997)



data visualization

Origins:

statistics

exploratory (multidimensional) data analysis

Tukey (1977), Cleveland & McGill (1988)



data visualization

Origins:

scientific visualization

analytical software instruments for scientific analysis of large datasets

McCormick & DeFanti (1987)



data visualization

Origins:

computer graphics + artificial intelligence

automatic design of visual presentations of data

Mackinlay (1986), Roth & Mattis (1990), Casner (1991)



data visualization

Origins:

human-computer interaction

new user interfaces & interactions, including animations

Robertson, Card & Mackinlay (1989), Shneiderman (1992)



data visualization

Data visualization vs. infographics



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



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



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



data visualization design



visualization modeling

Visualization

the mapping of data to visual formthat supports human interaction in a workplace

for visual sense making



Algorithm Visualizer – algo-visualizer.jasonpark.me



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/




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



Raw Dataunfiltered/unprocessed input data

Data Tables

suitable date structures: relations + meta-data

Visual Structuresconvenient graphical elements

Views

(interactive) visualizations perceived by user(s)



Raw Data – data(sets) to be visualized, available in different – binary/textual – formats

raw data

datatables

visualstructs.

views ☺data


mappingsview

transformations

Data Visual Form

Human Interaction



Data Transformationsprovides document vectors

(normalized vectors in a N-dimensional space)

could imply different filtering operations

raw data

datatables

visualstructs.

views ☺data


mappingsview

transformations

Data Visual Form

Human Interaction



Data Tables – suitable data structures: relations (depending on considered variables) + meta-data

raw data

datatables

visualstructs.

views ☺data


mappingsview

transformations

Data Visual Form

Human Interaction




Data Tables

tables of objects + their attributes




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,…



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




Data Tables

functional (abstract) representation:

f (input variables) = output variables

TopRatedMovies (FilmID = 0062622)91

2001: A Space Odyssey is a top rated SF film




Data Tables

variables implies a scale of measurement




Data Tables


a nominal variable N is an unordered sete.g., film titles { Blade Runner, Brazil, The Wall,…}

(in)equality operators could be used




Data Tables


an ordinal variable O is a tuple (ordered set)e.g., film ratings < G, PG, PG-13, R >

relational operators (like “<”) could be applied




Data Tables


a quantitative variable Q is a numeric rangeexample: film duration [0, 400]

arithmetic operators could be performed on them




Data Tables

subtypes regarding a certain nature of visualization

quantitative spatial2D/3D spatial variables

commonly used in scientific visualization




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




Data Tables

subtypes regarding a certain nature of visualization

quantitative geographicalspatial variables

that specifically represent geophysical coordinates




3D map visualizations via Google Maps APIdevelopers.google.com/maps/documentation/




Data Tables

variable subtype concerning similarity

quantitative similarity




Data Tables

temporal variables

quantitative timeordinal time




crypto-currencies’ dynamics: cryptomaps.org




Data Tables


unstructured scalewhose only value is present or absent (e.g., an error flag)




main classes of variables involved into data visualization




Data Tables

various scale types can be altered by transformations




Quantitative variables can be mapped by data transformations into ordinal variables

film duration [0, 400] min. → <SHORT, MEDIUM, LONG>

classes of values




Nominal variables can be transformed to ordinal values

film titles { Gattaca, Brazil, The Wall, Minority Report }→ < The Wall, Minority Report, Gattaca, Brazil >

sorting



Visual Mappingscreating analytic abstractions to be visualized

from spatial coordinates to surfaceson an information 2D/3D landscape

raw data

datatables

visualstructs.

views ☺data


mappingsview

transformations

Data Visual Form

Human Interaction



example

see also Explained Visually – setosa.io/ev/

Blockchain visually explained (Reuters, 2018): graphics.reuters.com/TECHNOLOGY-BLOCKCHAIN/010070P11GN/



Visual Structuresuse a vocabulary of visual elements:

spatial substrates + marks + graphical properties

raw data

datatables

visualstructs.

views ☺data


mappingsview

transformations

Data Visual Form

Human Interaction




Visual Structures

goal: the systematic mapping of data relations onto visual form

visual encodings

could use metaphors + idioms




Visual Structures

spatial substratemarks

connectionenclosure

retinal propertiestemporal encoding




Visual Structures

spatial substrate

empty space, as a container, can be treated as if it had metric structure

scale type ↔ space axis




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




Axes can be linear or radial

can involve any of the various coordinate systems for describing space

a common approach: Cartesian coordinates




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




Visual Structures

marks

visible “things” that occur in space:points, lines, areas, volumes




types of marks

points ⭐⚫

lines

areas

volumes

point & line marks take up space and may have properties such as shape




Visual Structures

connection & enclosure

points and lines can be used to signify different topological structures like graphs and trees,

showing relations among objects




Visual Structures

connection & enclosure

enclosure can be used for trees, contour maps, and Venn diagrams




enclosure diagrambl.ocks.org/mbostock/4063530

visualizing a hierarchy of

entities belonging to a class




Visual Structures

retinal properties

position, size, orientation, color, texture, shape




Visual Structures

retinal properties

example: using color as visual code denoting a film genreFilmID (Genre) → P (Color)

possible conventions: Drama ⬛ Sci-Fi ⬛War ⬛



po

dio

.co

m/s

ite/

crea

tive

-ro

uti

nes




Visual Structures

retinal properties

position, size, orientation, color, texture, shape

aspects to be considered:crispness, resolution, transparency, arrangement



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/




Visual Structures

temporal encoding

temporal data to be visualizedversus

animation – mapping a variable into time



View Transformationsoffer various views (graphical representations)

according to the user goals

raw data

datatables

visualstructs.

views ☺data


mappingsview

transformations

Data Visual Form

Human Interaction



Viewsperceived by end-users

+adjusted by graphical parameters

(positioning, scaling, clipping, rotating,…)

raw data

datatables

visualstructs.

views ☺data


mappingsview

transformations

Data Visual Form

Human Interaction




View—value distinction

regards how operations (transformations) are performedat different places in the model




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?




“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



The Internet Map – interactive visualization of Internet domains usage based on data provided by Alexa – internet-map.net

case study




Expressiveness & effectiveness

a visualization is expressive if and only if it encodes all the data relations intended

and no other data relations are considered




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




ugly: aesthetic problems, but otherwise clear & informative





bad: problems related to perception (unclear, confusing,

complicated, deceiving)





bad: problems related to perception (unclear, confusing,

complicated, deceiving)

wrong: problems related to mathematics

– objectively incorrect




incorrect correlations – mapping from data to visual form violates the expressiveness criterion

example



How about the processes concerning data visualization?

www.concerthotels.com/100-years-of-rock/



visualization processes

AcquireParseFilterMine

RepresentRefine

Interact

according to Ben Fry, 2008




Acquire

obtain the (raw) data to be analyzed and visualized



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



discussion


data and dataset types

tables – items & attributesgraphs (networks / trees) – items (nodes), links, attributes

fields – grids + positions, attributesgeometry (spatial) – items + positions

clusters, sets, lists – items



discussion




discussion



dataset availability

static

versus

dynamic



discussion


aspects of interest regarding the attributes:

attribute types

categorical



discussion


attribute types

orderedordinal

quantitative



discussion


ordering direction

sequential, diverging, cyclic



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



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




Parse

deliver a certain structure for the data’s meaning, and order it into categories




Filter

keep only the data of interest

could also imply noise reduction




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



discussion


aspects of interest concerning data processing:

{ action, target }

discover distributioncompare trendslocate outliers

browse topology



discussion


actions

analyze

search (filter)

query



discussion


actions

analyze

consumediscover (explore) vs. present (explain)

produceannotate, record, derive,…



discussion

Tamara Munzner, Visualization Analysis & Design, PacificVis 2016http://www.cs.ubc.ca/~tmm/talks.html

casual, social,…



discussion


actions

search (filter)

How much data matters?



discussion


actions

query

identify, compare, summarize,…



discussion


target

all data

attributes

network data

spatial data



discussion


target

all data

trends, outliers, features



discussion


target

attributes

a single one – e.g., distribution



discussion


target

attributes

many – dependency, correlation, similarity,…



discussion


target

network data

topology + paths



discussion


target

spatial data

shape




Represent

choose a (set of) visual model(s)



discussion

aspects of interest concerning data visualization:

encode

arrange+

map



discussion

encode

arrange

expressseparate

orderalignuse



discussion

encode

map

from categorical and ordered attributes

to visual representations

color: hue, saturationsize, angle, curvature,…

shapemotion




Refine

improve the basic visual representation to make it clearer and more visually engaging

applying techniques of perceptual optimization



examplerefining

a visualization for better

perception

Claus Wilke (2019)




Interact

add methods for manipulating the data or controlling what features are visible



discussion

aspects of interest:

manipulate – change, select, navigate

facet – juxtapose, partition, superimpose

reduce – filter, aggregate, embed


Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/Tamara Munzner (2017)



mash-ups

Your Life on Earth (BBC)www.bbc.com/earth/story/20141016-your-life-on-earth

case study




adopting an iterative approach (Fry, 2008)



How about a taxonomy

of information visualization?

bl.ocks.org/mbostock



visualization taxonomy

Simple visual structures

direct reading

1-variable [X]: lists, 1D scatterplots, pie charts, distributions, box plots,…


Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/also stydy eagereyes.org/techniques/pie-charts





direct reading

2-variable [XY]: 2D object charts (histograms) – for continuous values

2D scatterplots – in the case of discrete values



2D visualizations generated by Google Data Studiomarketingplatform.google.com/about/data-studio/

example





direct reading

3-variable[XYR]: retinal scatterplots, Kohonen diagrams

[(XY)Z]: information landscapes, information surfaces[XYZ]: 3D scatterplots



studying the neural network behavior – here, data classification – in the Web browser

playground.tensorflow.org




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





direct reading

4-variable [XYZR]: 3D retinal scatterplots, 3D topographies



3D visualization of city population density by using a Web tool: Kepler – kepler.gl





articulated reading may present a barrier of perception





articulated reading

n-variable [XYRn-2]: 2D retinal scatterplots[XYZRn-1]: 3D retinal scatterplots



Krona – exploratory scientific visualization of hierarchical (taxonomic) data: github.com/marbl/Krona



3D visualization of a cyber-attackzones-maps.bid/network-attack-map/the-best-live-cyber-attack-maps-cyberwarzone.html





articulated reading

n-variable[XYRn-2]: 2D retinal scatterplots[XYZRn-1]: 3D retinal scatterplots




scatterplot of attractiveness versus age, colored by genderO’Connor & Biewald, 2009





articulated reading

trees

used for hierarchical data:node and link trees, enclosure trees, hyperbolic trees,

TreeMaps, cone trees




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





articulated reading

network visualization




map-based visualization of cyber-attacks’ types & volume zones-maps.bid/network-attack-map.html

explore also graphofthings.org





articulated reading

time

aspects of interest: discrete vs. continuous values

moments vs. intervals





articulated reading

time

typical solutions:calendar, timeline, alternative views




Here Is…hereistoday.com

case study




Definitive Daft Punkthemaninblue.com/writing/perspective/2011/05/12/

case study




Composed visual structures

single-axis composition [XYn]:permutation matrices, parallel coordinates




a parallel coordinate view of a firewall log filecontext: security visualization – secviz.org





double-axis composition [XY]: graphs

example:ontology

visualization notations

+ tools

(re)visit Web Application Development discipline: profs.info.uaic.ro/~busaco/teach/courses/wade/





recursive composition

2D in 2D [(XY)XY]: scatterplot matrices, hierarchical axes,…




visualizing correlated informationwww.andreykurenkov.com/writing/fun-visualizations-of-stackoverflow/






marks in 2D [(XY)R]: stick figures, color icons, shape coding, Keim spirals,…




100 Years with the San Francisco Symphony by Adobethewhyaxis.info/music/

case study






3D in 3D [(XYZ)XYZ]: (virtual) worlds within (virtual) worlds



holographic visualizations – HoloLens (Microsoft) www.microsoft.com/hololens/developers

Firefox Reality (Mozilla): mixedreality.mozilla.org

resources of interest: webvr.rocks + next.reality.news




Interactive visual structures

dynamic queries

imagery (“magic”) lens

overview + detail

brushing and linking

extract & compare

attribute explorer (multi-faceted)




Poem Viewer – imagery lens for visualizing corporaovii.oerc.ox.ac.uk/PoemVis/

case study




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




Additionally, visual representations could involve users

data-driven methods: context-based filteringselective aggregation




Gapminder – www.gapminder.org/tools/

case study




Additionally, visual representations could involve users

view-based methods:micro-macro readings, highlighting, visual transfer

functions, perspective distortion, alternate geometries




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/




Visualizing uncertainty

common solutions to indicate uncertainty:

error bars

confidence bands





uncertainty of point estimates: error bars

we can adopt concepts from statistical sampling (mean, standard deviation, confidence interval)




expert ratings of 125 chocolate barsscale from 1 (unpleasant) to 5 (elite)


example





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




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


example



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



remarks

Pragmatic advice: apply KISS principle

less detail can actually convey more information

beware of chartjunk

Tufte (1983)



conclusionsvarious examples: junkcharts.typepad.com

percentage of percentages?



conclusions real-life examples:viz.wtf

???



remarks

Pragmatic advice: consider visual impairments

color cannot always convey information as effectively as we might wish



conclusions

difficulty in matching the colors in the plot

to the colors in the legend

case study



conclusions

colors look similar for people suffering from color-vision deficiency

case study



conclusions

case study



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



conclusions

case study a better perception



remarks

Pragmatic advice: use proper labeling

provide explanations, legends, visual conventions, etc.



concluzii

History of Rock Musicwww.svds.com/rockandroll/



remarks

Pragmatic advice: avoid gratuitous 3D

problems of perception + cognitive load(data distortion)



conclusions

example

a bad 3D visualization of mortality rates for groups of people and age categories Claus Wilke (2019)



conclusions

example a better perception

Claus Wilke (2019)



remarks

Pragmatic advice: know your audience

different types of visualizations for different (types of) users



concluzii

3D visualization of human body (available in the Web browser)BioDigital Human – human.biodigital.com



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



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



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



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)



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



conclusions

case study

Food Poisoning Outbreaks (Ruslan Kamolov, 2015)



conclusions

VOWL (Visual Notation for OWL Ontologies) + interactive visualization tools for desktop and Web

vowl.visualdataweb.org

case study



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



conclusions

case study

explaining an election law by using data visualization

RAW Graphs – github.com/densitydesign/raw



conclusions

using iPad to learn programming in a creative way

Swift Playgrounds – www.apple.com/swift/playgrounds/

case study



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



conclusions

Data visualization as story telling



conclusions

Data visualization as story telling

showing dataversus

storytelling with data

Cole Nussbaumer Knaflic, Storytelling with Data,Wiley & Sons, 2015



conclusions

showing data – a pie chart visualization – about a survey on a pilot program about science

case study

Cole Knaflic (2015)



conclusions

storytelling with data: same data, useful outcome

Cole Knaflic (2015)

case study



conclusions

initial data visualization

case study

Cole Knaflic (2015)



conclusions

storytelling with data: refined data visualizationemphasizing various aspects of interest

case study

Co

le K

naf

lic

(20

15)



“Conclusion”

data visualizationdefinitions, classification, methods, examples

datavizproject.com



next episode:affective factors & persuasive technologies