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

2.
Dr.SabinBuragawww.purl.org/net/busaco
“Above all else show the data.”
Edward R. Tufte

3.
Dr.SabinBuragawww.purl.org/net/busaco
Cum redăm și interacționăm
cu datele existente (procesate de software)?

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.
Dr.SabinBuragawww.purl.org/net/busaco
Realitate
volumul mare de date disponibile
(în special pe Web)

6.
Dr.SabinBuragawww.purl.org/net/busaco
www.worldometers.info

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.
Dr.SabinBuragawww.purl.org/net/busaco
DIKW (DataInformationKnowledgeWisdom)
adaptare după S. Carpenter, 2008 și J. Liebowitz, 2012

9.
Dr.SabinBuragawww.purl.org/net/busaco
Ce reprezintă vizualizarea datelor?

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.
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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
informa-
tion
design
data per-
ceptuali-
zation
data
visuali-
zation
scientific
visuali-
zation

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.
Dr.SabinBuragawww.purl.org/net/busaco
Beneficii – adaptare după Card et al. (2009):
reducerea căutării informațiilor de interes

16.
Dr.SabinBuragawww.purl.org/net/busaco
Beneficii – adaptare după Card et al. (2009):
îmbunătățirea detectării tiparelor (patterns)

17.
Dr.SabinBuragawww.purl.org/net/busaco
Beneficii – adaptare după Card et al. (2009):
codificarea informațiilor în cadrul unui mediu interactiv

18.
Dr.SabinBuragawww.purl.org/net/busaco
Beneficii – adaptare după Card et al. (2009):
monitorizarea evoluției datelor/cunoștințelor

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.
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.
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.
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.
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.
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.
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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
data visualization
ilustrarea fenomenelor optice – Isaac Newton
conform Robin (1992)

28.
Dr.SabinBuragawww.purl.org/net/busaco
Origini
diagrame abstracte
privesc informații non-fizice
un exemplu timpuriu: Playfair (1786)

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.
Dr.SabinBuragawww.purl.org/net/busaco
Origini
statistica

analiza exploratorie a datelor (multi-dimensionale)
Tukey (1977), Cleveland & McGill (1988)

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.
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.
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.
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.
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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
Design privind vizualizările datelor

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.
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Stuart Card, “Information Visualization”,
Human-Computer Interaction Handbook (2nd Edition),
Taylor & Francis, 2008

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.
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Raw Data
(seturi de) date de vizualizat,
disponibile în diverse formate – binare/textuale

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.
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.
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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
pot fi considerate
meta-date

47.
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
reprezentare funcțională (abstractă)
f (input variables) = output variables

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.
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
variabilele implică o scală de măsurare a valorii lor

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.
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.
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.
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.
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.
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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
clase de variabile implicate în vizualizarea datelor

58.
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Data Table
anumite scale de valori pot fi alterate via transformări

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.
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.
Dr.SabinBuragawww.purl.org/net/busaco

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.
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.
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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
Visual Structures
spatial substrate
marks
connection
enclosure
retinal properties
temporal encoding

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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling

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.
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.
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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
discuție

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.
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.
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.
Dr.SabinBuragawww.purl.org/net/busacopodio.com/site/creative-routines

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.
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.
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.
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.
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.
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.
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.
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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
visualization modeling
FilmType (N) → Position (Q)
asocierile dintre date și forma vizuală
eludează criteriul de expresivitate

89.
Dr.SabinBuragawww.purl.org/net/busaco
http://pbfcomics.com/246/
(în loc de) pauză

90.
Dr.SabinBuragawww.purl.org/net/busaco
Care sunt procesele implicate
în vizualizarea datelor?

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.
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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
visualization processes
Filter
păstrarea exclusiv a datelor de interes
poate implica eliminarea „zgomotului” (noise reduction)

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.
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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
visualization processes
Interact
includerea unor metode vizând manipularea datelor
sau ajustarea modului de vizualizare

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.
Dr.SabinBuragawww.purl.org/net/busaco
visualization processes
uzual, sunt adoptate metodologii iterative de proiectare
(Fry, 2008)

101.
Dr.SabinBuragawww.purl.org/net/busaco
Am putea
clasifica
metodele
de vizualizare
a informațiilor?
http://bl.ocks.org/mbostock

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.
Dr.SabinBuragawww.purl.org/net/busaco
a se studia și http://eagereyes.org/techniques/pie-charts

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.
Dr.SabinBuragawww.purl.org/net/busaco
exemplificări variate: www.improving-visualisation.org/visuals

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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale simple
percepții directe
recurgerea la 4 variabile
[XYZR]: 3D retinal scatterplots, topografii 3D

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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale simple
percepții complexe (articulated reading)
pot cauza
probleme
de interpretare

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.
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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale simple
percepții complexe
figurări de rețele (grafuri)

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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
studiu de caz
http://hereistoday.com/

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.
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale compuse
compuneri folosind o singură axă [XYn]:
matrici de permutare, coordonate paralele

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.
Dr.SabinBuragawww.purl.org/net/busaco
Structuri vizuale compuse
compoziție vizuală recurgând la 2 axe [XY]: grafuri

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.
Dr.SabinBuragawww.purl.org/net/busaco
visualization taxonomy
organizarea tuturor perechilor de informații corelate

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.
Dr.SabinBuragawww.purl.org/net/busaco
visualization taxonomy
100 Years with the San Francisco Symphony – Adobe
http://thewhyaxis.info/music/

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.
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.
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.
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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
visualization taxonomy
Gapminder World – http://www.gapminder.org/world/

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.
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.
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.
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.
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.
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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
concluzii
vizualizare animată a producerii cafelei: www.bizbrain.org/coffee/
studiu de caz

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.
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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
concluzii
Sfat pragmatic: etichetarea corespunzătoare
recurgerea la explicații, legende, convenții vizuale etc.

145.
Dr.SabinBuragawww.purl.org/net/busaco
concluzii
History of Rock Music
www.svds.com/rockandroll/

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.
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.
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.
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.
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.
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.
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.
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.
Dr.SabinBuragawww.purl.org/net/busaco
episodul viitor:
(re)găsirea resurselor Web