CLIW 2015-2016 (5/13) Vizualizarea datelor – o privire de ansamblu

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web
la nivel de client
◕
vizualizarea datelor
o privire de ansamblu

“Above all else show the data.”
Edward R. Tufte

Cum redăm și interacționăm
cu datele existente (procesate de software)?

caracteristici ale datelor: varietate, volum, dinamicitate
adaptare după http://blog.sqlauthority.com
data
variety
data
velocity
data
volume
real-time (stream)
interval (continuous)
batch
(atomic)
sparse
(discrete)
unstructured
RDBMS
semi-
struc-
tured
XML
multi-
media
JSON
CSV
bi-
nary
KB
MBGB
TBEB
PBZB
YB

Realitate
volumul mare de date disponibile
(în special pe Web)

www.worldometers.info

Necesități
integrarea, simplificarea și monetizarea sistemelor
informaționale existente și a volumelor masive
de date pe care acestea le dețin
de parcurs www.softviscollection.org/intro/a-thousand-words/

DIKW (DataInformationKnowledgeWisdom)
adaptare după S. Carpenter, 2008 și J. Liebowitz, 2012

Ce reprezintă vizualizarea datelor?

Data visualization
o clasă de tehnici vizând augmentarea cogniției
“the use of computer-supported, interactive,
visual representations of abstract data
in order to amplify cognition”
Card, Mackinlay & Shneiderman, 1999

Data visualization
proces de asociere a informației la factori vizuali
“data visualization is expert storytelling” – Murray, 2013

Data visualization
proces de asociere a informației la factori vizuali
“data visualization is expert storytelling” – Murray, 2013
definirea de reguli de interpretare a datelor și
exprimarea valorilor lor ca proprietăți vizuale

informa-
tion
design
data per-
ceptuali-
zation
data
visuali-
zation
scientific
visuali-
zation

Criterii minimale pe care trebuie să le îndeplinească
orice tehnică de vizualizare pragmatică:
recurgerea la date (non-vizuale)
producerea unei imagini
rezultatele oferite să fie lizibile și recognoscibile
Robert Kosara, 2008
http://eagereyes.org/criticism/definition-of-visualization

Beneficii – adaptare după Card et al. (2009):
reducerea căutării informațiilor de interes

îmbunătățirea detectării tiparelor (patterns)

codificarea informațiilor în cadrul unui mediu interactiv

monitorizarea evoluției datelor/cunoștințelor

How Music Travels – un experiment de vizualizare animată
http://www.thomson.co.uk/blog/wp-content/uploads/infographic/interactive-music-map/
discuție

Beneficii:
realizarea de inferențe
(contexte: inteligența artificială,
Web semantic)
decizii + predicții
(context: învățare automată)
www.r2d3.us/visual-intro-to-machine-learning-part-1/

permiterea explorării spațiului valorilor parametrilor
de vizualizare și facilitarea operațiilor
desfășurate de utilizatori
(de la date la informații și cunoștințe)

vezi Hans Rolins, “New insights on poverty”, TED 2007
www.ted.com/talks/hans_rosling_reveals_new_insights_on_poverty
discuție

Alte beneficii – adaptare după N. Chibana (2015):
reliefarea unor tendințe (trends)
plasarea datelor/informațiilor într-un context specific
oferirea de perspective asupra unui subiect/domeniu
stimularea imaginației utilizatorului
exemplificări la http://blog.visme.co/examples-data-visualizations/

Origini
hărți
specifică, într-o manieră abstractă,
arii geografice cunoscute + oferă moduri de orientare
ulterior, pun la dispoziție informații
pentru crearea de strategii în caz de ostilități

Imago Mundi – Babilon (secolul V î.e.n.)
www.ancient-wisdom.co.uk/cartography.htm
imagini oferite de Wikimedia Commons

Origini
diagrame
vezi lucrările lui Euclid în domeniul geometriei
utilizate în știință (e.g., de Newton) pentru a înregistra
observații, a determina relații, a explica metodologia
unor experimente, a clasifica și conceptualiza fenomene

data visualization
ilustrarea fenomenelor optice – Isaac Newton
conform Robin (1992)

Origini
diagrame abstracte
privesc informații non-fizice
un exemplu timpuriu: Playfair (1786)

Origini
design vizual + grafice privind datele

principii de proiectare a vizualizării datelor (infovis)
Edward Tufte (1983, 1990, 1997)

Origini
statistica

analiza exploratorie a datelor (multi-dimensionale)
Tukey (1977), Cleveland & McGill (1988)

Origini
vizualizarea științifică

instrumente software analitice
pentru analizarea riguroasă a seturilor de date masive
McCormick & DeFanti (1987)

Origini
grafica computațională + inteligența artificială

proiectarea automată a prezentărilor vizuale ale datelor
Mackinlay (1986), Roth & Mattis (1990), Casner (1991)

Origini
interacțiunea om-calculator

noi interfețe + interacțiuni cu utilizatorul
Robertson, Card & Mackinlay (1989), Shneiderman (1992)

Data vizualization vs. infographics
o tehnică de vizualizare – eventual, generată automat –
poate fi aplicată mai multor seturi de date
infograficele sunt create – manual – pentru un set
particular de date, conform unui scop specific
http://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
data/info viz infographics
e.g., generative art
vezi și www.slideshare.net/busaco/generative-art-a-gentle-introduction

Design privind vizualizările datelor

Visualization
the mapping of data to visual form
that supports human interaction in a workplace
for visual sense making

visualization modeling
Stuart Card, “Information Visualization”,
Human-Computer Interaction Handbook (2nd Edition),
Taylor & Francis, 2008

date inițiale, neprelucrate (raw data)

structuri de date: relații + meta-date (data tables)

structuri vizuale: elemente grafice (visual structures)

vizualizări (interactive) percepute de utilizator (views)

Raw Data
(seturi de) date de vizualizat,
disponibile în diverse formate – binare/textuale

Data Transformations
oferă vectori normalizați într-un spațiu n dimensional
eventual, pot implica diverse operații de filtrare

Data Table
structuri de date convenabil alese:
relații (depinzând de variabilele considerate) și meta-date

Data Table
structuri de date convenabil alese:
relații (depinzând de variabilele considerate) și meta-date
tabele de obiecte + atributele lor

Data Table
exemplu pentru vizualizări de producții cinematografice
obiecte de bază = instanțe ale conceptului „film”
atribute (proprietăți) asociate fiecărui obiect – aici, film:
titlu, an al apariției, gen, durată, actori,…

pot fi considerate
meta-date

Data Table
reprezentare funcțională (abstractă)
f (input variables) = output variables

Data Table
reprezentare funcțională (abstractă)
f (input variables) = output variables
Year (FilmID = 540) ≡ 1926

Data Table
variabilele implică o scală de măsurare a valorii lor

Data Table
o variabilă nominală N este o mulțime neordonată
e.g., titluri de film { Star Wars, Brazil, The Wall,…}
pot fi utilizați operatorii de (in)egalitate

Data Table
o variabilă ordinală O este un tuplu (mulțime ordonată)
e.g., film ratings < G, PG, PG-13, R >
pot fi aplicați operatori relaționali – precum „<”

Data Table
o variabilă cantitativă Q este un interval numeric
e.g., durata filmului [0, 400]
pot fi folosiți operatorii aritmetici

Data Table
în funcție de natura vizualizării,
se poate recurge la subtipuri de date
quantitative spatial – variabile vizând spațiul 2D/3D,
folosite pentru vizualizări științifice

Data Table
quantitative geographical – variabile spațiale ce specifică
anumite coordonate geografice

Data Table
quantitative similarity – variabile privind similaritatea

Data Table
unstructured scale – variabile având valori speciale,
indicând prezența/absența (e.g., error flag)

clase de variabile implicate în vizualizarea datelor

Data Table
anumite scale de valori pot fi alterate via transformări

Data Table
e.g., variabilele cantitative
pot avea asociate variabile ordinale
durata filmului [0, 400] min. → <SHORT, MEDIUM, LONG>
clase de valori

Data Table
e.g., variabilele nominale pot fi convertite la valori ordinale
titluri de filme { Star Wars, Brazil, The Wall }
→ < The Wall, Star Wars, Brazil >
sortare

Visual Mappings
crearea unor abstracțiuni analitice în scopul vizualizării
de la coordonate spațiale
la suprafețe ale unui „peisaj” informațional 2D/3D

Visual Structures
utilizarea unui vocabular de elemente vizuale:
substraturi spațiale + marcaje + proprietăți grafice

Visual Structures
scop: asocierea sistematică a relațiilor dintre date
într-o formă vizuală
codificări vizuale (visual encodings)

Visual Structures
scop: asocierea sistematică a relațiilor dintre date
într-o formă vizuală
codificări vizuale (visual encodings)
eventual,
folosind metafore
(revezi cursul anterior)

Visual Structures
spatial substrate
marks
connection
enclosure
retinal properties
temporal encoding

Visual Structures
substrat spațial – spatial substrate
spațiul liber disponibil (empty space)
poate fi considerat ca având o structură metrică
tip de scală ↔ axe spațiale

Visual Structures
axe spațiale importante
U – valori nestructurate nicio axă
N – valori nominale regiune având sub-regiuni
O – valori ordinale ordinea sub-regiunilor e importantă
Q – valori cantitative o regiune are atașată o metrică

Visual Structures
axe spațiale lineare ori radiale
pot implica orice sisteme de coordonate spațiale folosite
e.g., recurgerea la coordonate carteziene

Visual Structures
axe spațiale lineare ori radiale
exemplificare:
utilizarea a 2 axe ortogonale cantitative
pentru vizualizarea popularității unui film în timp
Year → QX Popularity → QY

Visual Structures
marcaje – marks
entități vizibile ce apar în spațiu:
puncte, linii, arii, volume

Visual Structures
tipuri de marcaje – marks
marcajele de tip punct și linie ocupă loc în spațiu
și pot avea asociate proprietăți – precum forma

discuție

Visual Structures
conectori & zone – connection & enclosure
punctele și liniile pot fi folosite pentru a desemna
diverse structuri topologice – e.g., grafuri, arbori –
specificând relațiile dintre obiecte

Visual Structures
conectori & zone – connection & enclosure
zonele pot fi utilizate
pentru ierarhii, contururi, diagrame Venn

Visual Structures
proprietăți perceptibile – retinal properties
poziție, mărime, orientare, culoare, textură, formă

Dr.SabinBuragawww.purl.org/net/busacopodio.com/site/creative-routines

Visual Structures
aspecte de interes:
claritate (crispness), rezoluție,
transparență, poziționare (arrangement)

discuție
poziționare 2D aliniată conform unei scale
poziționare 2D nealiniată
redare conform valorilor (length)
acuratețea
comparațiilor dintre
valorile datelor
diversele maniere de vizualizare
pot facilita percepțiile utilizatorului
(Cleveland & McGill, 1984) citați de Jerzy Wieczorek (2015)
http://civilstat.com/2015/10/statistical-graphics-and-visualization-course-materials/

Visual Structures
exemplu: culoarea – cod vizual ilustrând genul filmului
FilmID (Genre) → P (Color)
230 (Action) → P (Red)

Visual Structures
codificare temporală – temporal encoding
date referitoare la timp ce trebuie vizualizate
versus
animație – asocierea dintre timp și valoarea unei variabile

View Transformations
oferă diverse maniere de vizualizare (reprezentări grafice)
conform necesităților aplicației / scopului utilizatorului

Views
percepute de utilizatorul final
eventual, pot fi ajustate via diverși parametri grafici
(poziționare, scalare, decupare, rotire,…)

“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 – vizualizarea interactivă a utilizării
unor domenii Internet pe baza datelor oferite de Alexa
http://internet-map.net/

Expresivitate și efectivitate
o manieră de vizualizare este expresivă
dacă și numai dacă ea codifică toate relațiile dorite
între date și nu sunt considerate alte relații adiționale

FilmType (N) → Position (Q)
asocierile dintre date și forma vizuală
eludează criteriul de expresivitate

http://pbfcomics.com/246/
(în loc de) pauză

Care sunt procesele implicate
în vizualizarea datelor?

visualization processes
aquire obținerea datelor inițiale („brute”)
parse procesarea datelor
filter filtrări conform necesităților
mine obținerea datelor relevante
represent alegerea reprezentărilor vizuale
refine rafinarea soluțiilor de vizualizare
interact interacțiunea cu utilizatorul
conform Ben Fry, 2008

Aquire
obținerea datelor ce trebuie analizate și vizualizate
surse deschise de date:
https://github.com/caesar0301/awesome-public-datasets
http://datahub.io/
https://github.com/jdorfman/awesome-json-datasets

Parse
obținerea unei/unor structuri convenabile
privind semnificația datelor
eventual, ordonarea lor în categorii de interes

Filter
păstrarea exclusiv a datelor de interes
poate implica eliminarea „zgomotului” (noise reduction)

Mine
aplicarea unor metode statistice și/sau vizând data mining
pentru a obține tipare ori categorii (clase) de date
și/sau a plasa datele într-un context matematic
diverse abordări pragmatice sunt descrise
în G. Myatt, W. Johnson, Making Sense of Data I, II, and III,
Wiley, 2007, 2009, 2011

Represent
alegerea unui (set de) model(e) vizual(e)
exemple tipice:
recurgerea la chart-uri – bar graph, list, tree,…

Refine
îmbunătățirea suitei de reprezentări vizuale alese
e.g., tehnici de optimizare a clarității (percepției)

Interact
includerea unor metode vizând manipularea datelor
sau ajustarea modului de vizualizare

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

uzual, sunt adoptate metodologii iterative de proiectare
(Fry, 2008)

Am putea
clasifica
metodele
de vizualizare
a informațiilor?
http://bl.ocks.org/mbostock

Structuri vizuale simple
percepții directe (direct reading)
utilizarea unei singure variabile [X]:
liste, trasări de puncte (1D scatterplots),
pie charts, distribuții, box plots,…

a se studia și http://eagereyes.org/techniques/pie-charts

percepții directe
recurgerea la 2 variabile [XY]:
obiecte bidimensionale (histrograme) – valori continue
2D scatterplots – valori discrete
…

exemplificări variate: www.improving-visualisation.org/visuals

percepții directe
recurgerea la 3 variabile
[XYR]: retinal scatterplots, diagrame Kohonen
[(XY)Z]: peisaje informaționale, suprafețe informaționale
[XYZ]: trasări de puncte tridimensionale – 3D scatterplots

visualization taxonomy
retinal scatterplot – aici: heat map
http://secviz.org/content/user-behavior-a-heatmap
vizualizarea comportamentului utilizatorului (Y)
în funcție de timp (X); culoarea (variabila R) indică
intensitatea activității desfășurate

percepții directe
recurgerea la 4 variabile
[XYZR]: 3D retinal scatterplots, topografii 3D

o vizualizare 3D a topografiei tectonice
(context: seismicitatea din Vrancea)
www.topo-europe.eu/3-the-natural-laboratory-concept/3-1-within-the-orogen/3-1-2-implications-for-the-natural-hazards

percepții complexe (articulated reading)
utilizarea a n variabile
[XYRn-2]: 2D retinal scatterplots
[XYZRn-1]: 3D retinal scatterplots

percepții complexe (articulated reading)
pot cauza
probleme
de interpretare

o trasare vizuală a atractivității versus vârstă
culoarea indică genul
O’Connor & Biewald, 2009

percepții complexe
arbori (utilizați la indicarea ierarhiilor):
node and link trees, enclosure trees,
hyperbolic trees, TreeMaps, cone trees

asociere arborescentă (treemap) vizând termenii ce apar în
contextul informațiilor geografice pentru 6 tipuri de zone
T. Segaran & J. Hammerbacher (Eds.), Beautiful Data, O’Reilly, 2009

percepții complexe
figurări de rețele (grafuri)

Flight Patterns – folosirea datelor GPS ale traficului aerian
pentru vizualizarea tiparelor și densității zborurilor
comerciale (Koblin, 2005)
www.aaronkoblin.com/work/flightpatterns/
a se studia și http://graphofthings.org/

percepții complexe
reprezentarea timpului
valori discrete vs. continue
e.g., calendar, timeline, momente vs. intervale, alternative

studiu de caz
http://hereistoday.com/

Definitive Daft Punk
http://themaninblue.com/writing/perspective/2011/05/12/
studiu de caz

Structuri vizuale compuse
compuneri folosind o singură axă [XYn]:
matrici de permutare, coordonate paralele

o vizualizare paralelă bazată pe o coordonată a datelor
oferite de un fișier de jurnalizare a unui firewall
context: security visualization – http://secviz.org/

compoziție vizuală recurgând la 2 axe [XY]: grafuri

compunere recursivă
vizualizări 2D în alt spațiu 2D [(XY)XY]:
scatterplot matrices, axe ierarhice,…

organizarea tuturor perechilor de informații corelate

marcaje folosite în spațiul bidimensional [(XY)R]:
stick figures, color icons, shape coding, spirale Keim,…

100 Years with the San Francisco Symphony – Adobe
http://thewhyaxis.info/music/

vizualizări 3D în 3D [(XYZ)XYZ]:
lumi virtuale în cadrul altor lumi virtuale

Structuri vizuale interactive
interogări dinamice – interactive queries
vizualizări imagistice – imagery (“magic”) lens
privire generală + detaliere – overview + detail
brushing and linking
extracție și comparare – extraction & comparation
explorări via rafinări – attribute explorer (multi-faceted)

Poem Viewer – vizualizări imagistice (imagery lens)
pentru explorarea datelor poetice
http://ovii.oerc.ox.ac.uk/PoemVis/

„periajul” datelor (brushing)
selectarea datelor de interes – e.g., via click and drag
corelarea (linking) – evidențierea eșantioanelor similare
prezente în alte vizualizări
exemplificări: http://mbostock.github.io/protovis/ex/brush.html

Suplimentar, pot fi figurate reprezentări
luând în calcul implicarea utilizatorilor
metode bazate pe date:
filtrare în funcție de context
agregare selectivă

Gapminder World – http://www.gapminder.org/world/

Suplimentar, pot fi figurate reprezentări
luând în calcul implicarea utilizatorilor
metode bazate pe modul de vizualizare:
micro-macro readings, highlighting, distorsionarea
perspectivei geometrice, geometrii alternative

micro-macro readings
prezentarea unor volume mari de date la densități mari
scop: obținerea unei priviri de ansamblu
(to see the bigger picture)
http://larp601.wordpress.com/

concluzii
Scopuri principale ale vizualizării informațiilor
vizualizare exploratorie
(exploratory visualization)
descoperirea tiparelor, tendințelor ori sub-problemelor
în cadrul unei mulțimi de date (dataset)

concluzii
studiu de caz
Web Trend Map (iA, 2007): http://ia.net/know-how/ia-trendmap-2007v2

concluzii
studiu de caz
Food Poisoning Outbreaks (Ruslan Kamolov, 2015)
http://www.visualizing.org/visualizations/food-poisoning-outbreaks

concluzii
Scopuri principale ale vizualizării informațiilor
vizualizare explicativă
(explanatory visualization)
transmiterea unor informații sau a unui punct de vedere
„țintind” un utilizator ori o clasă de utilizatori

concluzii
studiu de caz
compararea dimensiunii relative a unor entități via vizualizări
interactive (Nikon, 2015): www.nikon.com/about/feelnikon/universcale/

concluzii
vizualizare animată a producerii cafelei: www.bizbrain.org/coffee/
studiu de caz

concluzii
Fiecare proiect (soluție) de vizualizare
are cerințele sale particulare
“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

concluzii
Sfat pragmatic: simplificare – principiul KISS
reducerea nivelului de detaliere poate conduce la
oferirea mai multor informații de interes
a se evita „sindromul” chartjunk
Tufte (1983)

conclusions
chartjunk using a large area and a lot of “ink”
(many symbols and lines)
to show only 5 hard-to-read numbers
exemple concrete: http://junkcharts.typepad.com/

concluzii
Sfat pragmatic: etichetarea corespunzătoare
recurgerea la explicații, legende, convenții vizuale etc.

concluzii
History of Rock Music
www.svds.com/rockandroll/

concluzii
Sfat pragmatic: cunoașterea audienței
selectarea unor maniere specifice de vizualizare a datelor
în funcție de (tipurile de) utilizatori
exemplu: www.improving-visualisation.org/case-studies/id=7

concluzii
studiu de caz
vizualizări 3D în cadrul navigatorului Web
ale anatomiei și fiziologiei corpului uman
https://human.biodigital.com/

instrumente la nivel de client
Biblioteci de vizualizare 2D a datelor
D3.js (Data-Driven Documents) – http://d3js.org/
extensii D3.js – https://github.com/wbkd/awesome-d3
Leaflet (mobile-friendly interactive maps) – leafletjs.com/
Raphaël – http://raphaeljs.com/
Recline – http://okfnlabs.org/recline/
Sigma (graph drawing) – http://sigmajs.org/
Vis – http://visjs.org/

Biblioteci de vizualizare 3D a datelor
Cesium – http://cesiumjs.org/
PhiloGL – http://www.senchalabs.org/philogl/
Three.js – http://threejs.org/

A se experimenta și…
Data Visualization Selected Tools
http://selection.datavisualization.ch/
Data Visualization Tools for the Web
https://github.com/showcases/data-visualization
JSter Visualization Libraries
http://jster.net/search?q=visualization

resurse de studiat
Edward R. Tufte, The Visual Display of Quantitative Information
(2nd Edition), Graphics Press, 2001
Edward R. Tufte, Envisioning Information, Graphics Press, 1990
Nathan Yau, Visualize This, Wiley, 2011
pentru exemple + tutoriale, de consultat http://flowingdata.com/
Ben Fry, Visualizing Data, O’Reilly, 2008
Scott Murray, Interactive Data Visualization for the Web,
O’Reilly, 2013 – http://chimera.labs.oreilly.com/books/1230000000345

resurse de studiat
WikiViz (tehnici, instrumente, exemple) – www.wikiviz.org
Data + Design – https://infoactive.co/data-design
Resurse privind vizualizarea și explorarea datelor:
http://tinyurl.com/kr8oxg5
Information is Beautiful – www.informationisbeautiful.net
Data Visualization – http://datavisualization.ch/
Visualizing Algorithms – http://bost.ocks.org/mike/algorithms/

Propuneți 2 soluții de vizualizare
a datelor referitoare la orarul FII
http://profs.info.uaic.ro/~orar/
test scris #1 (T1)

episodul viitor:
(re)găsirea resurselor Web

CLIW 2015-2016 (5/13) Vizualizarea datelor – o privire de ansamblu

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (12)

Similar to CLIW 2015-2016 (5/13) Vizualizarea datelor – o privire de ansamblu

Similar to CLIW 2015-2016 (5/13) Vizualizarea datelor – o privire de ansamblu (20)

More from Sabin Buraga

More from Sabin Buraga (20)

CLIW 2015-2016 (5/13) Vizualizarea datelor – o privire de ansamblu