Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web
la nivel de client
◕
vizualizarea datelor
o privire de...
Dr.SabinBuragawww.purl.org/net/busaco
“Above all else show the data.”
Edward R. Tufte
Dr.SabinBuragawww.purl.org/net/busaco
Cum redăm și interacționăm
cu datele existente (procesate de software)?
Dr.SabinBuragawww.purl.org/net/busaco
caracteristici ale datelor: varietate, volum, dinamicitate
adaptare după http://blo...
Dr.SabinBuragawww.purl.org/net/busaco
Realitate
volumul mare de date disponibile
(în special pe Web)
Dr.SabinBuragawww.purl.org/net/busaco
www.worldometers.info
Dr.SabinBuragawww.purl.org/net/busaco
Necesități
integrarea, simplificarea și monetizarea sistemelor
informaționale exist...
Dr.SabinBuragawww.purl.org/net/busaco
DIKW (DataInformationKnowledgeWisdom)
adaptare după S. Carpenter, 2008 și J. Lie...
Dr.SabinBuragawww.purl.org/net/busaco
Ce reprezintă vizualizarea datelor?
Dr.SabinBuragawww.purl.org/net/busaco
Data visualization
o clasă de tehnici vizând augmentarea cogniției
“the use of comp...
Dr.SabinBuragawww.purl.org/net/busaco
Data visualization
proces de asociere a informației la factori vizuali
“data visual...
Dr.SabinBuragawww.purl.org/net/busaco
Data visualization
proces de asociere a informației la factori vizuali
“data visual...
Dr.SabinBuragawww.purl.org/net/busaco
informa-
tion
design
data per-
ceptuali-
zation
data
visuali-
zation
scientific
vis...
Dr.SabinBuragawww.purl.org/net/busaco
Criterii minimale pe care trebuie să le îndeplinească
orice tehnică de vizualizare ...
Dr.SabinBuragawww.purl.org/net/busaco
Beneficii – adaptare după Card et al. (2009):
reducerea căutării informațiilor de i...
Dr.SabinBuragawww.purl.org/net/busaco
Beneficii – adaptare după Card et al. (2009):
îmbunătățirea detectării tiparelor (p...
Dr.SabinBuragawww.purl.org/net/busaco
Beneficii – adaptare după Card et al. (2009):
codificarea informațiilor în cadrul u...
Dr.SabinBuragawww.purl.org/net/busaco
Beneficii – adaptare după Card et al. (2009):
monitorizarea evoluției datelor/cunoș...
Dr.SabinBuragawww.purl.org/net/busaco
How Music Travels – un experiment de vizualizare animată
http://www.thomson.co.uk/b...
Dr.SabinBuragawww.purl.org/net/busaco
Beneficii:
realizarea de inferențe
(contexte: inteligența artificială,
Web semantic...
Dr.SabinBuragawww.purl.org/net/busaco
Beneficii – adaptare după Card et al. (2009):
permiterea explorării spațiului valor...
Dr.SabinBuragawww.purl.org/net/busaco
vezi Hans Rolins, “New insights on poverty”, TED 2007
www.ted.com/talks/hans_roslin...
Dr.SabinBuragawww.purl.org/net/busaco
Alte beneficii – adaptare după N. Chibana (2015):
reliefarea unor tendințe (trends)...
Dr.SabinBuragawww.purl.org/net/busaco
Origini
hărți
specifică, într-o manieră abstractă,
arii geografice cunoscute + ofer...
Dr.SabinBuragawww.purl.org/net/busaco
Imago Mundi – Babilon (secolul V î.e.n.)
www.ancient-wisdom.co.uk/cartography.htm
i...
Dr.SabinBuragawww.purl.org/net/busaco
Origini
diagrame
vezi lucrările lui Euclid în domeniul geometriei
utilizate în știi...
Dr.SabinBuragawww.purl.org/net/busaco
data visualization
ilustrarea fenomenelor optice – Isaac Newton
conform Robin (1992)
Dr.SabinBuragawww.purl.org/net/busaco
Origini
diagrame abstracte
privesc informații non-fizice
un exemplu timpuriu: Playf...
Dr.SabinBuragawww.purl.org/net/busaco
Origini
design vizual + grafice privind datele

principii de proiectare a vizualiz...
Dr.SabinBuragawww.purl.org/net/busaco
Origini
statistica

analiza exploratorie a datelor (multi-dimensionale)
Tukey (197...
Dr.SabinBuragawww.purl.org/net/busaco
Origini
vizualizarea științifică

instrumente software analitice
pentru analizarea...
Dr.SabinBuragawww.purl.org/net/busaco
Origini
grafica computațională + inteligența artificială

proiectarea automată a p...
Dr.SabinBuragawww.purl.org/net/busaco
Origini
interacțiunea om-calculator

noi interfețe + interacțiuni cu utilizatorul
...
Dr.SabinBuragawww.purl.org/net/busaco
Data vizualization vs. infographics
o tehnică de vizualizare – eventual, generată a...
Dr.SabinBuragawww.purl.org/net/busaco
data visualization
“The nature of the visualization
depends on which relationship i...
Dr.SabinBuragawww.purl.org/net/busaco
data visualization
Data
User
De-
sig-
ner
informative
visual art
persuasive
data/in...
Dr.SabinBuragawww.purl.org/net/busaco
Design privind vizualizările datelor
Dr.SabinBuragawww.purl.org/net/busaco
Visualization
the mapping of data to visual form
that supports human interaction in...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Stuart Card, “Information Visualization”,
Human-Computer Int...
Dr.SabinBuragawww.purl.org/net/busaco
date inițiale, neprelucrate (raw data)

structuri de date: relații + meta-date (da...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Raw Data
(seturi de) date de vizualizat,
disponibile în dive...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Transformations
oferă vectori normalizați într-un spați...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
structuri de date convenabil alese:
relații (depi...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
structuri de date convenabil alese:
relații (depi...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
exemplu pentru vizualizări de producții cinematog...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
pot fi considerate
meta-date
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
reprezentare funcțională (abstractă)
f (input var...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
reprezentare funcțională (abstractă)
f (input var...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
variabilele implică o scală de măsurare a valorii...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
variabilele implică o scală de măsurare a valorii...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
variabilele implică o scală de măsurare a valorii...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
variabilele implică o scală de măsurare a valorii...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
în funcție de natura vizualizării,
se poate recur...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
în funcție de natura vizualizării,
se poate recur...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
în funcție de natura vizualizării,
se poate recur...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
în funcție de natura vizualizării,
se poate recur...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
clase de variabile implicate în vizualizarea datelor
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
anumite scale de valori pot fi alterate via trans...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
anumite scale de valori pot fi alterate via trans...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
anumite scale de valori pot fi alterate via trans...
Dr.SabinBuragawww.purl.org/net/busaco
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Mappings
crearea unor abstracțiuni analitice în scopu...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
utilizarea unui vocabular de elemente vizu...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
scop: asocierea sistematică a relațiilor d...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
scop: asocierea sistematică a relațiilor d...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
spatial substrate
marks
connection
enclosu...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
substrat spațial – spatial substrate
spați...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
substrat spațial – spatial substrate
axe s...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
substrat spațial – spatial substrate
axe s...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
substrat spațial – spatial substrate
axe s...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
marcaje – marks
entități vizibile ce apar ...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
tipuri de marcaje – marks
marcajele de tip...
Dr.SabinBuragawww.purl.org/net/busaco
discuție
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
conectori & zone – connection & enclosure
...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
conectori & zone – connection & enclosure
...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
proprietăți perceptibile – retinal propert...
Dr.SabinBuragawww.purl.org/net/busacopodio.com/site/creative-routines
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
proprietăți perceptibile – retinal propert...
Dr.SabinBuragawww.purl.org/net/busaco
discuție
poziționare 2D aliniată conform unei scale
poziționare 2D nealiniată
redar...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
proprietăți perceptibile – retinal propert...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
codificare temporală – temporal encoding
d...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
View Transformations
oferă diverse maniere de vizualizare (r...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Views
percepute de utilizatorul final
eventual, pot fi ajust...
Dr.SabinBuragawww.purl.org/net/busaco
“Information visualization is about the not just creation
of visual images, but als...
Dr.SabinBuragawww.purl.org/net/busaco
The Internet Map – vizualizarea interactivă a utilizării
unor domenii Internet pe b...
Dr.SabinBuragawww.purl.org/net/busaco
Expresivitate și efectivitate
o manieră de vizualizare este expresivă
dacă și numai...
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
FilmType (N) → Position (Q)
asocierile dintre date și forma ...
Dr.SabinBuragawww.purl.org/net/busaco
http://pbfcomics.com/246/
(în loc de) pauză
Dr.SabinBuragawww.purl.org/net/busaco
Care sunt procesele implicate
în vizualizarea datelor?
Dr.SabinBuragawww.purl.org/net/busaco
visualization processes
aquire obținerea datelor inițiale („brute”)
parse procesare...
Dr.SabinBuragawww.purl.org/net/busaco
visualization processes
Aquire
obținerea datelor ce trebuie analizate și vizualizat...
Dr.SabinBuragawww.purl.org/net/busaco
visualization processes
Parse
obținerea unei/unor structuri convenabile
privind sem...
Dr.SabinBuragawww.purl.org/net/busaco
visualization processes
Filter
păstrarea exclusiv a datelor de interes
poate implic...
Dr.SabinBuragawww.purl.org/net/busaco
visualization processes
Mine
aplicarea unor metode statistice și/sau vizând data mi...
Dr.SabinBuragawww.purl.org/net/busaco
visualization processes
Represent
alegerea unui (set de) model(e) vizual(e)
exemple...
Dr.SabinBuragawww.purl.org/net/busaco
visualization processes
Refine
îmbunătățirea suitei de reprezentări vizuale alese
e...
Dr.SabinBuragawww.purl.org/net/busaco
visualization processes
Interact
includerea unor metode vizând manipularea datelor
...
Dr.SabinBuragawww.purl.org/net/busaco
mash-ups
Your Life on Earth (BBC, 2014)
www.bbc.com/earth/story/20141016-your-life-...
Dr.SabinBuragawww.purl.org/net/busaco
visualization processes
uzual, sunt adoptate metodologii iterative de proiectare
(F...
Dr.SabinBuragawww.purl.org/net/busaco
Am putea
clasifica
metodele
de vizualizare
a informațiilor?
http://bl.ocks.org/mbos...
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale simple
percepții directe (direct reading)
utilizarea unei singure...
Dr.SabinBuragawww.purl.org/net/busaco
a se studia și http://eagereyes.org/techniques/pie-charts
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale simple
percepții directe
recurgerea la 2 variabile [XY]:
obiecte ...
Dr.SabinBuragawww.purl.org/net/busaco
exemplificări variate: www.improving-visualisation.org/visuals
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale simple
percepții directe
recurgerea la 3 variabile
[XYR]: retinal...
Dr.SabinBuragawww.purl.org/net/busaco
visualization taxonomy
retinal scatterplot – aici: heat map
http://secviz.org/conte...
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale simple
percepții directe
recurgerea la 4 variabile
[XYZR]: 3D ret...
Dr.SabinBuragawww.purl.org/net/busaco
o vizualizare 3D a topografiei tectonice
(context: seismicitatea din Vrancea)
www.t...
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale simple
percepții complexe (articulated reading)
utilizarea a n va...
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale simple
percepții complexe (articulated reading)
pot cauza
problem...
Dr.SabinBuragawww.purl.org/net/busaco
visualization taxonomy
o trasare vizuală a atractivității versus vârstă
culoarea in...
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale simple
percepții complexe
arbori (utilizați la indicarea ierarhii...
Dr.SabinBuragawww.purl.org/net/busaco
visualization taxonomy
asociere arborescentă (treemap) vizând termenii ce apar în
c...
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale simple
percepții complexe
figurări de rețele (grafuri)
Dr.SabinBuragawww.purl.org/net/busaco
visualization taxonomy
Flight Patterns – folosirea datelor GPS ale traficului aeria...
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale simple
percepții complexe
reprezentarea timpului
valori discrete ...
Dr.SabinBuragawww.purl.org/net/busaco
studiu de caz
http://hereistoday.com/
Dr.SabinBuragawww.purl.org/net/busaco
visualization taxonomy
Definitive Daft Punk
http://themaninblue.com/writing/perspec...
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale compuse
compuneri folosind o singură axă [XYn]:
matrici de permut...
Dr.SabinBuragawww.purl.org/net/busaco
visualization taxonomy
o vizualizare paralelă bazată pe o coordonată a datelor
ofer...
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale compuse
compoziție vizuală recurgând la 2 axe [XY]: grafuri
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale compuse
compunere recursivă
vizualizări 2D în alt spațiu 2D [(XY)...
Dr.SabinBuragawww.purl.org/net/busaco
visualization taxonomy
organizarea tuturor perechilor de informații corelate
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale compuse
compunere recursivă
marcaje folosite în spațiul bidimensi...
Dr.SabinBuragawww.purl.org/net/busaco
visualization taxonomy
100 Years with the San Francisco Symphony – Adobe
http://the...
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale compuse
compunere recursivă
vizualizări 3D în 3D [(XYZ)XYZ]:
lumi...
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale interactive
interogări dinamice – interactive queries
vizualizări...
Dr.SabinBuragawww.purl.org/net/busaco
visualization taxonomy
Poem Viewer – vizualizări imagistice (imagery lens)
pentru e...
Dr.SabinBuragawww.purl.org/net/busaco
visualization taxonomy
„periajul” datelor (brushing)
selectarea datelor de interes ...
Dr.SabinBuragawww.purl.org/net/busaco
Suplimentar, pot fi figurate reprezentări
luând în calcul implicarea utilizatorilor...
Dr.SabinBuragawww.purl.org/net/busaco
visualization taxonomy
Gapminder World – http://www.gapminder.org/world/
Dr.SabinBuragawww.purl.org/net/busaco
Suplimentar, pot fi figurate reprezentări
luând în calcul implicarea utilizatorilor...
Dr.SabinBuragawww.purl.org/net/busaco
visualization taxonomy
micro-macro readings
prezentarea unor volume mari de date la...
Dr.SabinBuragawww.purl.org/net/busaco
concluzii
Scopuri principale ale vizualizării informațiilor
vizualizare exploratori...
Dr.SabinBuragawww.purl.org/net/busaco
concluzii
studiu de caz
Web Trend Map (iA, 2007): http://ia.net/know-how/ia-trendma...
Dr.SabinBuragawww.purl.org/net/busaco
concluzii
studiu de caz
Food Poisoning Outbreaks (Ruslan Kamolov, 2015)
http://www....
Dr.SabinBuragawww.purl.org/net/busaco
concluzii
Scopuri principale ale vizualizării informațiilor
vizualizare explicativă...
Dr.SabinBuragawww.purl.org/net/busaco
concluzii
studiu de caz
compararea dimensiunii relative a unor entități via vizuali...
Dr.SabinBuragawww.purl.org/net/busaco
concluzii
vizualizare animată a producerii cafelei: www.bizbrain.org/coffee/
studiu...
Dr.SabinBuragawww.purl.org/net/busaco
concluzii
Fiecare proiect (soluție) de vizualizare
are cerințele sale particulare
“...
Dr.SabinBuragawww.purl.org/net/busaco
concluzii
Sfat pragmatic: simplificare – principiul KISS
reducerea nivelului de det...
Dr.SabinBuragawww.purl.org/net/busaco
conclusions
chartjunk using a large area and a lot of “ink”
(many symbols and lines...
Dr.SabinBuragawww.purl.org/net/busaco
concluzii
Sfat pragmatic: etichetarea corespunzătoare
recurgerea la explicații, leg...
Dr.SabinBuragawww.purl.org/net/busaco
concluzii
History of Rock Music
www.svds.com/rockandroll/
Dr.SabinBuragawww.purl.org/net/busaco
concluzii
Sfat pragmatic: cunoașterea audienței
selectarea unor maniere specifice d...
Dr.SabinBuragawww.purl.org/net/busaco
concluzii
studiu de caz
vizualizări 3D în cadrul navigatorului Web
ale anatomiei și...
Dr.SabinBuragawww.purl.org/net/busaco
instrumente la nivel de client
Biblioteci de vizualizare 2D a datelor
D3.js (Data-D...
Dr.SabinBuragawww.purl.org/net/busaco
instrumente la nivel de client
Biblioteci de vizualizare 3D a datelor
Cesium – http...
Dr.SabinBuragawww.purl.org/net/busaco
instrumente la nivel de client
A se experimenta și…
Data Visualization Selected Too...
Dr.SabinBuragawww.purl.org/net/busaco
resurse de studiat
Edward R. Tufte, The Visual Display of Quantitative Information
...
Dr.SabinBuragawww.purl.org/net/busaco
resurse de studiat
WikiViz (tehnici, instrumente, exemple) – www.wikiviz.org
Data +...
Dr.SabinBuragawww.purl.org/net/busaco
Propuneți 2 soluții de vizualizare
a datelor referitoare la orarul FII
http://profs...
Dr.SabinBuragawww.purl.org/net/busaco
episodul viitor:
(re)găsirea resurselor Web
Nächste SlideShare
Wird geladen in …5
×

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

503 Aufrufe

Veröffentlicht am

O viziune de ansamblu referitoare la vizualizarea datelor în contextul Web, inclusiv diverse tehnici + exemple reale. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

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

  1. 1. Dr.SabinBuragawww.purl.org/net/busaco Dezvoltarea aplicațiilor Web la nivel de client ◕ vizualizarea datelor o privire de ansamblu
  2. 2. Dr.SabinBuragawww.purl.org/net/busaco “Above all else show the data.” Edward R. Tufte
  3. 3. Dr.SabinBuragawww.purl.org/net/busaco Cum redăm și interacționăm cu datele existente (procesate de software)?
  4. 4. Dr.SabinBuragawww.purl.org/net/busaco 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
  5. 5. Dr.SabinBuragawww.purl.org/net/busaco Realitate volumul mare de date disponibile (în special pe Web)
  6. 6. Dr.SabinBuragawww.purl.org/net/busaco www.worldometers.info
  7. 7. Dr.SabinBuraga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/
  8. 8. Dr.SabinBuragawww.purl.org/net/busaco DIKW (DataInformationKnowledgeWisdom) adaptare după S. Carpenter, 2008 și J. Liebowitz, 2012
  9. 9. Dr.SabinBuragawww.purl.org/net/busaco Ce reprezintă vizualizarea datelor?
  10. 10. Dr.SabinBuraga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
  11. 11. Dr.SabinBuragawww.purl.org/net/busaco Data visualization proces de asociere a informației la factori vizuali “data visualization is expert storytelling” – Murray, 2013
  12. 12. Dr.SabinBuraga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
  13. 13. Dr.SabinBuragawww.purl.org/net/busaco informa- tion design data per- ceptuali- zation data visuali- zation scientific visuali- zation
  14. 14. Dr.SabinBuraga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, 2008 http://eagereyes.org/criticism/definition-of-visualization
  15. 15. Dr.SabinBuragawww.purl.org/net/busaco Beneficii – adaptare după Card et al. (2009): reducerea căutării informațiilor de interes
  16. 16. Dr.SabinBuragawww.purl.org/net/busaco Beneficii – adaptare după Card et al. (2009): îmbunătățirea detectării tiparelor (patterns)
  17. 17. Dr.SabinBuragawww.purl.org/net/busaco Beneficii – adaptare după Card et al. (2009): codificarea informațiilor în cadrul unui mediu interactiv
  18. 18. Dr.SabinBuragawww.purl.org/net/busaco Beneficii – adaptare după Card et al. (2009): monitorizarea evoluției datelor/cunoștințelor
  19. 19. Dr.SabinBuraga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
  20. 20. Dr.SabinBuragawww.purl.org/net/busaco 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/
  21. 21. Dr.SabinBuraga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)
  22. 22. Dr.SabinBuraga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
  23. 23. Dr.SabinBuraga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/
  24. 24. Dr.SabinBuraga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
  25. 25. Dr.SabinBuragawww.purl.org/net/busaco Imago Mundi – Babilon (secolul V î.e.n.) www.ancient-wisdom.co.uk/cartography.htm imagini oferite de Wikimedia Commons
  26. 26. Dr.SabinBuragawww.purl.org/net/busaco 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
  27. 27. Dr.SabinBuragawww.purl.org/net/busaco data visualization ilustrarea fenomenelor optice – Isaac Newton conform Robin (1992)
  28. 28. Dr.SabinBuragawww.purl.org/net/busaco Origini diagrame abstracte privesc informații non-fizice un exemplu timpuriu: Playfair (1786)
  29. 29. Dr.SabinBuragawww.purl.org/net/busaco Origini design vizual + grafice privind datele  principii de proiectare a vizualizării datelor (infovis) Edward Tufte (1983, 1990, 1997)
  30. 30. Dr.SabinBuragawww.purl.org/net/busaco Origini statistica  analiza exploratorie a datelor (multi-dimensionale) Tukey (1977), Cleveland & McGill (1988)
  31. 31. Dr.SabinBuragawww.purl.org/net/busaco Origini vizualizarea științifică  instrumente software analitice pentru analizarea riguroasă a seturilor de date masive McCormick & DeFanti (1987)
  32. 32. Dr.SabinBuraga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)
  33. 33. Dr.SabinBuragawww.purl.org/net/busaco Origini interacțiunea om-calculator  noi interfețe + interacțiuni cu utilizatorul Robertson, Card & Mackinlay (1989), Shneiderman (1992)
  34. 34. Dr.SabinBuraga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
  35. 35. Dr.SabinBuragawww.purl.org/net/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
  36. 36. Dr.SabinBuragawww.purl.org/net/busaco 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
  37. 37. Dr.SabinBuragawww.purl.org/net/busaco Design privind vizualizările datelor
  38. 38. Dr.SabinBuragawww.purl.org/net/busaco Visualization the mapping of data to visual form that supports human interaction in a workplace for visual sense making
  39. 39. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Stuart Card, “Information Visualization”, Human-Computer Interaction Handbook (2nd Edition), Taylor & Francis, 2008
  40. 40. Dr.SabinBuraga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)
  41. 41. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Raw Data (seturi de) date de vizualizat, disponibile în diverse formate – binare/textuale
  42. 42. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Transformations oferă vectori normalizați într-un spațiu n dimensional eventual, pot implica diverse operații de filtrare
  43. 43. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table structuri de date convenabil alese: relații (depinzând de variabilele considerate) și meta-date
  44. 44. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table structuri de date convenabil alese: relații (depinzând de variabilele considerate) și meta-date tabele de obiecte + atributele lor
  45. 45. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling 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,…
  46. 46. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling pot fi considerate meta-date
  47. 47. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table reprezentare funcțională (abstractă) f (input variables) = output variables
  48. 48. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table reprezentare funcțională (abstractă) f (input variables) = output variables Year (FilmID = 540) ≡ 1926
  49. 49. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table variabilele implică o scală de măsurare a valorii lor
  50. 50. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table variabilele 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
  51. 51. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table variabilele 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 „<”
  52. 52. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table variabilele implică o scală de măsurare a valorii lor o variabilă cantitativă Q este un interval numeric e.g., durata filmului [0, 400] pot fi folosiți operatorii aritmetici
  53. 53. Dr.SabinBuragawww.purl.org/net/busaco visualization 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
  54. 54. Dr.SabinBuragawww.purl.org/net/busaco visualization 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
  55. 55. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table în funcție de natura vizualizării, se poate recurge la subtipuri de date quantitative similarity – variabile privind similaritatea
  56. 56. Dr.SabinBuragawww.purl.org/net/busaco visualization 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)
  57. 57. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling clase de variabile implicate în vizualizarea datelor
  58. 58. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table anumite scale de valori pot fi alterate via transformări
  59. 59. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table anumite 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
  60. 60. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Data Table anumite scale de valori pot fi alterate via transformări e.g., variabilele nominale pot fi convertite la valori ordinale titluri de filme { Star Wars, Brazil, The Wall } → < The Wall, Star Wars, Brazil > sortare
  61. 61. Dr.SabinBuragawww.purl.org/net/busaco
  62. 62. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling 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
  63. 63. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures utilizarea unui vocabular de elemente vizuale: substraturi spațiale + marcaje + proprietăți grafice
  64. 64. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures scop: asocierea sistematică a relațiilor dintre date într-o formă vizuală codificări vizuale (visual encodings)
  65. 65. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling 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)
  66. 66. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures spatial substrate marks connection enclosure retinal properties temporal encoding
  67. 67. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling 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
  68. 68. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures substrat spațial – spatial substrate 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ă
  69. 69. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling
  70. 70. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures substrat 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
  71. 71. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures substrat 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
  72. 72. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures marcaje – marks entități vizibile ce apar în spațiu: puncte, linii, arii, volume
  73. 73. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling 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
  74. 74. Dr.SabinBuragawww.purl.org/net/busaco discuție
  75. 75. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling 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
  76. 76. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures conectori & zone – connection & enclosure zonele pot fi utilizate pentru ierarhii, contururi, diagrame Venn
  77. 77. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures proprietăți perceptibile – retinal properties poziție, mărime, orientare, culoare, textură, formă
  78. 78. Dr.SabinBuragawww.purl.org/net/busacopodio.com/site/creative-routines
  79. 79. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures proprietăți perceptibile – retinal properties poziție, mărime, orientare, culoare, textură, formă aspecte de interes: claritate (crispness), rezoluție, transparență, poziționare (arrangement)
  80. 80. Dr.SabinBuraga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/
  81. 81. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures proprietăți perceptibile – retinal properties poziție, mărime, orientare, culoare, textură, formă exemplu: culoarea – cod vizual ilustrând genul filmului FilmID (Genre) → P (Color) 230 (Action) → P (Red)
  82. 82. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Visual Structures codificare temporală – temporal encoding date referitoare la timp ce trebuie vizualizate versus animație – asocierea dintre timp și valoarea unei variabile
  83. 83. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling View Transformations oferă diverse maniere de vizualizare (reprezentări grafice) conform necesităților aplicației / scopului utilizatorului
  84. 84. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling Views percepute de utilizatorul final eventual, pot fi ajustate via diverși parametri grafici (poziționare, scalare, decupare, rotire,…)
  85. 85. Dr.SabinBuraga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
  86. 86. Dr.SabinBuraga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/
  87. 87. Dr.SabinBuraga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
  88. 88. Dr.SabinBuragawww.purl.org/net/busaco visualization modeling FilmType (N) → Position (Q) asocierile dintre date și forma vizuală eludează criteriul de expresivitate
  89. 89. Dr.SabinBuragawww.purl.org/net/busaco http://pbfcomics.com/246/ (în loc de) pauză
  90. 90. Dr.SabinBuragawww.purl.org/net/busaco Care sunt procesele implicate în vizualizarea datelor?
  91. 91. Dr.SabinBuragawww.purl.org/net/busaco 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
  92. 92. Dr.SabinBuragawww.purl.org/net/busaco visualization 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
  93. 93. Dr.SabinBuragawww.purl.org/net/busaco visualization processes Parse obținerea unei/unor structuri convenabile privind semnificația datelor eventual, ordonarea lor în categorii de interes
  94. 94. Dr.SabinBuragawww.purl.org/net/busaco visualization processes Filter păstrarea exclusiv a datelor de interes poate implica eliminarea „zgomotului” (noise reduction)
  95. 95. Dr.SabinBuragawww.purl.org/net/busaco visualization processes 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
  96. 96. Dr.SabinBuragawww.purl.org/net/busaco visualization processes Represent alegerea unui (set de) model(e) vizual(e) exemple tipice: recurgerea la chart-uri – bar graph, list, tree,…
  97. 97. Dr.SabinBuragawww.purl.org/net/busaco visualization processes Refine îmbunătățirea suitei de reprezentări vizuale alese e.g., tehnici de optimizare a clarității (percepției)
  98. 98. Dr.SabinBuragawww.purl.org/net/busaco visualization processes Interact includerea unor metode vizând manipularea datelor sau ajustarea modului de vizualizare
  99. 99. Dr.SabinBuragawww.purl.org/net/busaco mash-ups Your Life on Earth (BBC, 2014) www.bbc.com/earth/story/20141016-your-life-on-earth
  100. 100. Dr.SabinBuragawww.purl.org/net/busaco visualization processes uzual, sunt adoptate metodologii iterative de proiectare (Fry, 2008)
  101. 101. Dr.SabinBuragawww.purl.org/net/busaco Am putea clasifica metodele de vizualizare a informațiilor? http://bl.ocks.org/mbostock
  102. 102. Dr.SabinBuraga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,…
  103. 103. Dr.SabinBuragawww.purl.org/net/busaco a se studia și http://eagereyes.org/techniques/pie-charts
  104. 104. Dr.SabinBuraga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 …
  105. 105. Dr.SabinBuragawww.purl.org/net/busaco exemplificări variate: www.improving-visualisation.org/visuals
  106. 106. Dr.SabinBuraga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
  107. 107. Dr.SabinBuragawww.purl.org/net/busaco 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
  108. 108. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale simple percepții directe recurgerea la 4 variabile [XYZR]: 3D retinal scatterplots, topografii 3D
  109. 109. Dr.SabinBuraga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
  110. 110. Dr.SabinBuraga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
  111. 111. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale simple percepții complexe (articulated reading) pot cauza probleme de interpretare
  112. 112. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy o trasare vizuală a atractivității versus vârstă culoarea indică genul O’Connor & Biewald, 2009
  113. 113. Dr.SabinBuraga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
  114. 114. Dr.SabinBuragawww.purl.org/net/busaco visualization 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
  115. 115. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale simple percepții complexe figurări de rețele (grafuri)
  116. 116. Dr.SabinBuragawww.purl.org/net/busaco visualization 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/
  117. 117. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale simple percepții complexe reprezentarea timpului valori discrete vs. continue e.g., calendar, timeline, momente vs. intervale, alternative
  118. 118. Dr.SabinBuragawww.purl.org/net/busaco studiu de caz http://hereistoday.com/
  119. 119. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy Definitive Daft Punk http://themaninblue.com/writing/perspective/2011/05/12/ studiu de caz
  120. 120. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale compuse compuneri folosind o singură axă [XYn]: matrici de permutare, coordonate paralele
  121. 121. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy 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/
  122. 122. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale compuse compoziție vizuală recurgând la 2 axe [XY]: grafuri
  123. 123. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale compuse compunere recursivă vizualizări 2D în alt spațiu 2D [(XY)XY]: scatterplot matrices, axe ierarhice,…
  124. 124. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy organizarea tuturor perechilor de informații corelate
  125. 125. Dr.SabinBuraga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,…
  126. 126. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy 100 Years with the San Francisco Symphony – Adobe http://thewhyaxis.info/music/
  127. 127. Dr.SabinBuragawww.purl.org/net/busaco Structuri vizuale compuse compunere recursivă vizualizări 3D în 3D [(XYZ)XYZ]: lumi virtuale în cadrul altor lumi virtuale
  128. 128. Dr.SabinBuragawww.purl.org/net/busaco 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)
  129. 129. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy Poem Viewer – vizualizări imagistice (imagery lens) pentru explorarea datelor poetice http://ovii.oerc.ox.ac.uk/PoemVis/
  130. 130. Dr.SabinBuragawww.purl.org/net/busaco visualization 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
  131. 131. Dr.SabinBuraga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ă
  132. 132. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy Gapminder World – http://www.gapminder.org/world/
  133. 133. Dr.SabinBuraga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
  134. 134. Dr.SabinBuragawww.purl.org/net/busaco visualization taxonomy 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/
  135. 135. Dr.SabinBuragawww.purl.org/net/busaco 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)
  136. 136. Dr.SabinBuragawww.purl.org/net/busaco concluzii studiu de caz Web Trend Map (iA, 2007): http://ia.net/know-how/ia-trendmap-2007v2
  137. 137. Dr.SabinBuragawww.purl.org/net/busaco concluzii studiu de caz Food Poisoning Outbreaks (Ruslan Kamolov, 2015) http://www.visualizing.org/visualizations/food-poisoning-outbreaks
  138. 138. Dr.SabinBuragawww.purl.org/net/busaco 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
  139. 139. Dr.SabinBuragawww.purl.org/net/busaco concluzii studiu de caz compararea dimensiunii relative a unor entități via vizualizări interactive (Nikon, 2015): www.nikon.com/about/feelnikon/universcale/
  140. 140. Dr.SabinBuragawww.purl.org/net/busaco concluzii vizualizare animată a producerii cafelei: www.bizbrain.org/coffee/ studiu de caz
  141. 141. Dr.SabinBuragawww.purl.org/net/busaco 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
  142. 142. Dr.SabinBuragawww.purl.org/net/busaco 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)
  143. 143. Dr.SabinBuragawww.purl.org/net/busaco 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/
  144. 144. Dr.SabinBuragawww.purl.org/net/busaco concluzii Sfat pragmatic: etichetarea corespunzătoare recurgerea la explicații, legende, convenții vizuale etc.
  145. 145. Dr.SabinBuragawww.purl.org/net/busaco concluzii History of Rock Music www.svds.com/rockandroll/
  146. 146. Dr.SabinBuragawww.purl.org/net/busaco 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
  147. 147. Dr.SabinBuragawww.purl.org/net/busaco concluzii studiu de caz vizualizări 3D în cadrul navigatorului Web ale anatomiei și fiziologiei corpului uman https://human.biodigital.com/
  148. 148. Dr.SabinBuragawww.purl.org/net/busaco 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/
  149. 149. Dr.SabinBuragawww.purl.org/net/busaco instrumente la nivel de client Biblioteci de vizualizare 3D a datelor Cesium – http://cesiumjs.org/ PhiloGL – http://www.senchalabs.org/philogl/ Three.js – http://threejs.org/
  150. 150. Dr.SabinBuragawww.purl.org/net/busaco instrumente la nivel de client 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
  151. 151. Dr.SabinBuragawww.purl.org/net/busaco 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
  152. 152. Dr.SabinBuragawww.purl.org/net/busaco 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/
  153. 153. Dr.SabinBuraga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)
  154. 154. Dr.SabinBuragawww.purl.org/net/busaco episodul viitor: (re)găsirea resurselor Web

×