Post on 20-Mar-2017
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dezvoltarea aplicațiilor Webla nivel de client
◕vizualizarea datelor
o privire de ansamblu
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
“Above all else show the data.”
Edward R. Tufte
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Cum redăm și interacționăm cu datele existente (procesate de software)?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
caracteristici ale datelor: varietate, volum, dinamicitateadaptare după http://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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Realitate
volumul mare de date disponibile(în special pe Web)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
www.worldometers.info
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
DIKW (DataInformationKnowledgeWisdom)adaptare după S. Carpenter, 2008 și J. Liebowitz, 2012
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Ce reprezintă vizualizarea datelor?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Data visualization
proces de asociere a informației la factori vizuali
“data visualization is expert storytelling” – Murray, 2013
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
informa-tion
design
data per-ceptuali-
zation
data visuali-zation
scientific visuali-zation
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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, 2008http://eagereyes.org/criticism/definition-of-visualization
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Beneficii – adaptare după Card et al. (2009):
reducerea căutării informațiilor de interes
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Beneficii – adaptare după Card et al. (2009):
îmbunătățirea detectării tiparelor (patterns)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Beneficii – adaptare după Card et al. (2009):
codificarea informațiilor în cadrul unui mediu interactiv
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Beneficii – adaptare după Card et al. (2009):
monitorizarea evoluției datelor/cunoștințelor
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
How Music Travels – un experiment de vizualizare animată
http://www.thomson.co.uk/blog/wp-content/uploads/infographic/interactive-music-map/
discuție
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Beneficii:realizarea de inferențe(contexte: inteligența artificială,
Web semantic)
decizii + predicții(context: învățare automată)
ww
w.r
2d3.
us/
visu
al-i
ntr
o-t
o-m
ach
ine-
lear
nin
g-p
art-
1/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Beneficii – adaptare după Card et al. (2009):
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
vezi Hans Rolins, “New insights on poverty”, TED 2007
www.ted.com/talks/hans_rosling_reveals_new_insights_on_poverty
discuție
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Imago Mundi – Babilon (secolul V î.e.n.)www.ancient-wisdom.co.uk/cartography.htm
imagini oferite de Wikimedia Commons
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Origini
diagrame
vezi lucrările lui Euclid în domeniul geometriei
utilizate în știință (e.g., de Newton) pentru a înregistraobservații, a determina relații, a explica metodologia
unor experimente, a clasifica și conceptualiza fenomene
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacodata visualization
ilustrarea fenomenelor optice – Isaac Newtonconform Robin (1992)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Origini
diagrame abstracte
privesc informații non-fizice
un exemplu timpuriu: Playfair (1786)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Origini
design vizual + grafice privind datele
principii de proiectare a vizualizării datelor (infovis)
Edward Tufte (1983, 1990, 1997)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Origini
statistica
analiza exploratorie a datelor (multi-dimensionale)
Tukey (1977), Cleveland & McGill (1988)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Origini
vizualizarea științifică
instrumente software analitice
pentru analizarea riguroasă a seturilor de date masive
McCormick & DeFanti (1987)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Origini
grafica computațională + inteligența artificială
proiectarea automată a prezentărilor vizuale ale datelor
Mackinlay (1986), Roth & Mattis (1990), Casner (1991)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Origini
interacțiunea om-calculator
noi interfețe + interacțiuni cu utilizatorul
Robertson, Card & Mackinlay (1989), Shneiderman (1992)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacodata 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacodata 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Design privind vizualizările datelor
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Visualization
the mapping of data to visual formthat supports human interaction in a workplace
for visual sense making
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Stuart Card, “Information Visualization”, Human-Computer Interaction Handbook (2nd Edition),
Taylor & Francis, 2008
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Raw Data(seturi de) date de vizualizat,
disponibile în diverse formate – binare/textuale
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Data Transformationsoferă vectori normalizați într-un spațiu n dimensional
eventual, pot implica diverse operații de filtrare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Data Tablestructuri de date convenabil alese:
relații (depinzând de variabilele considerate) și meta-date
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Data Tablestructuri de date convenabil alese:
relații (depinzând de variabilele considerate) și meta-date
tabele de obiecte + atributele lor
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Data Tableexemplu 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,…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
pot fi considerate meta-date
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Data Tablereprezentare funcțională (abstractă)
f (input variables) = output variables
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Data Tablereprezentare funcțională (abstractă)
f (input variables) = output variables
Year (FilmID = 540) ≡ 1926
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Data Tablevariabilele implică o scală de măsurare a valorii lor
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Data Tablevariabilele implică o scală de măsurare a valorii lor
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Data Tablevariabilele implică o scală de măsurare a valorii lor
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 „<”
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Data Tablevariabilele implică o scală de măsurare a valorii lor
o variabilă cantitativă Q este un interval numerice.g., durata filmului [0, 400]
pot fi folosiți operatorii aritmetici
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Data Tableîn funcție de natura vizualizării,
se poate recurge la subtipuri de date
quantitative geographical – variabile spațiale ce specifică anumite coordonate geografice
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Data Tableîn funcție de natura vizualizării,
se poate recurge la subtipuri de date
quantitative similarity – variabile privind similaritatea
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Data Tableîn funcție de natura vizualizării,
se poate recurge la subtipuri de date
unstructured scale – variabile având valori speciale, indicând prezența/absența (e.g., error flag)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
clase de variabile implicate în vizualizarea datelor
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Data Tableanumite scale de valori pot fi alterate via transformări
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Data Tableanumite scale de valori pot fi alterate via transformări
e.g., variabilele cantitative pot avea asociate variabile ordinale
durata filmului [0, 400] min. → <SHORT, MEDIUM, LONG>
clase de valori
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Data Tableanumite scale de valori pot fi alterate via transformări
e.g., variabilele nominale pot fi convertite la valori ordinaletitluri de filme { Star Wars, Brazil, The Wall }
→ < The Wall, Star Wars, Brazil >
sortare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Mappingscrearea unor abstracțiuni analitice în scopul vizualizării
de la coordonate spațiale la suprafețe ale unui „peisaj” informațional 2D/3D
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Structuresutilizarea unui vocabular de elemente vizuale:
substraturi spațiale + marcaje + proprietăți grafice
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Structuresscop: asocierea sistematică a relațiilor dintre date
într-o formă vizualăcodificări vizuale (visual encodings)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Structuresscop: asocierea sistematică a relațiilor dintre date
într-o formă vizualăcodificări vizuale (visual encodings)
eventual, folosind metafore
(revezi cursul anterior)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Structuresspatial substrate
marksconnectionenclosure
retinal propertiestemporal encoding
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Structuressubstrat 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Structuressubstrat spațial – spatial substrate
axe spațiale importante
U – valori nestructurate nicio axăN – valori nominale regiune având sub-regiuniO – valori ordinale ordinea sub-regiunilor e importantăQ – valori cantitative o regiune are atașată o metrică
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Structuressubstrat spațial – spatial substrate
axe spațiale lineare ori radiale
pot implica orice sisteme de coordonate spațiale folosite e.g., recurgerea la coordonate carteziene
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Structuressubstrat spațial – spatial substrate
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Structuresmarcaje – marks
entități vizibile ce apar în spațiu: puncte, linii, arii, volume
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Structurestipuri de marcaje – marks
marcajele de tip punct și linie ocupă loc în spațiuși pot avea asociate proprietăți – precum forma
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
discuție
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Structuresconectori & 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Structuresconectori & zone – connection & enclosure
zonele pot fi utilizate pentru ierarhii, contururi, diagrame Venn
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Structuresproprietăți perceptibile – retinal properties
poziție, mărime, orientare, culoare, textură, formă
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
po
dio
.co
m/s
ite/
crea
tive
-ro
uti
nes
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Structuresproprietăți perceptibile – retinal properties
poziție, mărime, orientare, culoare, textură, formă
aspecte de interes: claritate (crispness), rezoluție,
transparență, poziționare (arrangement)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Structuresproprietăți perceptibile – retinal properties
poziție, mărime, orientare, culoare, textură, formă
exemplu: culoarea – cod vizual ilustrând genul filmuluiFilmID (Genre) → P (Color)
230 (Action) → P (Red)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Visual Structurescodificare temporală – temporal encoding
date referitoare la timp ce trebuie vizualizateversus
animație – asocierea dintre timp și valoarea unei variabile
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
View Transformationsoferă diverse maniere de vizualizare (reprezentări grafice)
conform necesităților aplicației / scopului utilizatorului
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
Viewspercepute de utilizatorul final
eventual, pot fi ajustate via diverși parametri grafici(poziționare, scalare, decupare, rotire,…)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
“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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
The Internet Map – vizualizarea interactivă a utilizării unor domenii Internet pe baza datelor oferite de Alexa
http://internet-map.net/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization modeling
FilmType (N) → Position (Q)asocierile dintre date și forma vizuală
eludează criteriul de expresivitate
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
http://pbfcomics.com/246/
(în loc de) pauză
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Care sunt procesele implicateîn vizualizarea datelor?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization processes
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization processes
Parse
obținerea unei/unor structuri convenabile privind semnificația datelor
eventual, ordonarea lor în categorii de interes
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization processes
Filter
păstrarea exclusiv a datelor de interes
poate implica eliminarea „zgomotului” (noise reduction)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization processes
Mine
aplicarea unor metode statistice și/sau vizând data miningpentru 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization processes
Represent
alegerea unui (set de) model(e) vizual(e)
exemple tipice:recurgerea la chart-uri – bar graph, list, tree,…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization processes
Refine
îmbunătățirea suitei de reprezentări vizuale alese
e.g., tehnici de optimizare a clarității (percepției)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization processes
Interact
includerea unor metode vizând manipularea datelor sau ajustarea modului de vizualizare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
mash-ups
Your Life on Earth (BBC, 2014)www.bbc.com/earth/story/20141016-your-life-on-earth
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization processes
uzual, sunt adoptate metodologii iterative de proiectare (Fry, 2008)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Am putea clasifica
metodele de vizualizare
a informațiilor? htt
p:/
/bl.o
cks.
org
/mb
ost
ock
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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,…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
a se studia și http://eagereyes.org/techniques/pie-charts
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Structuri vizuale simple
percepții directe
recurgerea la 2 variabile [XY]:obiecte bidimensionale (histrograme) – valori continue
2D scatterplots – valori discrete…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
exemplificări variate: www.improving-visualisation.org/visuals
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Structuri vizuale simple
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization taxonomy
retinal scatterplot – aici: heat maphttp://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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Structuri vizuale simple
percepții directe
recurgerea la 4 variabile[XYZR]: 3D retinal scatterplots, topografii 3D
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Structuri vizuale simple
percepții complexe (articulated reading)
utilizarea a n variabile[XYRn-2]: 2D retinal scatterplots
[XYZRn-1]: 3D retinal scatterplots
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Structuri vizuale simple
percepții complexe (articulated reading)
pot cauza probleme
de interpretare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization taxonomy
o trasare vizuală a atractivității versus vârstăculoarea indică genul
O’Connor & Biewald, 2009
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Structuri vizuale simple
percepții complexe
arbori (utilizați la indicarea ierarhiilor):node and link trees, enclosure trees,
hyperbolic trees, TreeMaps, cone trees
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization taxonomy
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Structuri vizuale simple
percepții complexe
figurări de rețele (grafuri)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization taxonomy
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Structuri vizuale simple
percepții complexe
reprezentarea timpului
valori discrete vs. continuee.g., calendar, timeline, momente vs. intervale, alternative
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
studiu de caz
http://hereistoday.com/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization taxonomy
Definitive Daft Punkhttp://themaninblue.com/writing/perspective/2011/05/12/
studiu de caz
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Structuri vizuale compuse
compuneri folosind o singură axă [XYn]:matrici de permutare, coordonate paralele
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization taxonomy
o vizualizare paralelă bazată pe o coordonată a datelor oferite de un fișier de jurnalizare a unui firewallcontext: security visualization – http://secviz.org/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Structuri vizuale compuse
compoziție vizuală recurgând la 2 axe [XY]: grafuri
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Structuri vizuale compuse
compunere recursivă
vizualizări 2D în alt spațiu 2D [(XY)XY]: scatterplot matrices, axe ierarhice,…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization taxonomy
organizarea tuturor perechilor de informații corelate
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Structuri vizuale compuse
compunere recursivă
marcaje folosite în spațiul bidimensional [(XY)R]: stick figures, color icons, shape coding, spirale Keim,…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization taxonomy
100 Years with the San Francisco Symphony – Adobehttp://thewhyaxis.info/music/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Structuri vizuale compuse
compunere recursivă
vizualizări 3D în 3D [(XYZ)XYZ]: lumi virtuale în cadrul altor lumi virtuale
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Structuri vizuale interactive
interogări dinamice – interactive queriesvizualizări imagistice – imagery (“magic”) lensprivire generală + detaliere – overview + detail
brushing and linkingextracție și comparare – extraction & comparation
explorări via rafinări – attribute explorer (multi-faceted)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization taxonomy
Poem Viewer – vizualizări imagistice (imagery lens)pentru explorarea datelor poetice
http://ovii.oerc.ox.ac.uk/PoemVis/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization taxonomy
„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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Suplimentar, pot fi figurate reprezentări luând în calcul implicarea utilizatorilor
metode bazate pe date:filtrare în funcție de context
agregare selectivă
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization taxonomy
Gapminder World – http://www.gapminder.org/world/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacovisualization taxonomy
micro-macro readingsprezentarea 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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoconcluzii
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoconcluzii
studiu de caz
Web Trend Map (iA, 2007): http://ia.net/know-how/ia-trendmap-2007v2
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoconcluzii
studiu de caz
Food Poisoning Outbreaks (Ruslan Kamolov, 2015)http://www.visualizing.org/visualizations/food-poisoning-outbreaks
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoconcluzii
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoconcluzii
studiu de caz
compararea dimensiunii relative a unor entități via vizualizări interactive (Nikon, 2015): www.nikon.com/about/feelnikon/universcale/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoconcluzii
vizualizare animată a producerii cafelei: www.bizbrain.org/coffee/
studiu de caz
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoconcluzii
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoconcluzii
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoconclusions
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoconcluzii
Sfat pragmatic: etichetarea corespunzătoare
recurgerea la explicații, legende, convenții vizuale etc.
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoconcluzii
History of Rock Musicwww.svds.com/rockandroll/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoconcluzii
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoconcluzii
studiu de caz
vizualizări 3D în cadrul navigatorului Webale anatomiei și fiziologiei corpului uman
https://human.biodigital.com/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoinstrumente 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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoinstrumente la nivel de client
Biblioteci de vizualizare 3D a datelorCesium – http://cesiumjs.org/
PhiloGL – http://www.senchalabs.org/philogl/
Three.js – http://threejs.org/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoinstrumente la nivel de client
A se experimenta și…
Data Visualization Selected Toolshttp://selection.datavisualization.ch/
Data Visualization Tools for the Webhttps://github.com/showcases/data-visualization
JSter Visualization Librarieshttp://jster.net/search?q=visualization
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoresurse 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacoresurse 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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Propuneți 2 soluții de vizualizare a datelor referitoare la orarul FII
http://profs.info.uaic.ro/~orar/
test scris #1 (T1)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
episodul viitor:(re)găsirea resurselor Web