la nivel de clientbusaco/teach/courses/cliw/...ga .ro / ~ co volum –cantitate mare de date...
164
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Dezvoltarea aplicațiilor Web la nivel de client vizualizarea datelor o privire de ansamblu i.imgur.com/9VkFoH5.png
Transcript of la nivel de clientbusaco/teach/courses/cliw/...ga .ro / ~ co volum –cantitate mare de date...
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Dezvoltarea aplicațiilor Webla nivel de client
vizualizarea datelor
o privire de ansamblu
i.imgur.com/9VkFoH5.png
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
“Above all else show the data.”
Edward R. Tufte
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Cum redăm și interacționăm cu datele existente (procesate de software)?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Realitate
volumul mare de date disponibile(în special pe Web)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
caracteristici ale datelor: varietate, volum, velocitateadaptare după 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
profs.in
fo.uaic.ro/~busa
co
volum – cantitate mare de datevelocitate – date procesate continuu în timp-real
varietate – date (ne-/semi-)structurate eterogene în formate multiple, provenind din surse diverseveracitate – incertitudine + neîncredere în date
validitate – relevanța datelorvolatilitate – modificarea constantă a datelor de intrare
valoare – aportul datelor și analiza acestora
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
volum – cantitate mare de datevelocitate – date procesate continuu în timp-real
varietate – date (ne-/semi-)structurate eterogene în formate multiple, provenind din surse diverseveracitate – incertitudine + neîncredere în date
validitate – relevanța datelorvolatilitate – modificarea constantă a datelor de intrare
valoare – aportul datelor și analiza acestora
big datapreluarea și prelucrarea eficientă a datelor din
surse multiple (uzual, distribuite) – e.g., de la senzori, dispozitive (mobile), rețele de calculatoare,
aplicații sociale, echipamente etc.
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
co
DIKW (DataInformationKnowledgeWisdom)adaptare după S. Carpenter, 2008 și J. Liebowitz, 2012
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Ce reprezintă vizualizarea datelor?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
co
informa-tion
design
data per-ceptuali-
zation
data visuali-zation
scientific visuali-zation
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
R. Kosara, 2008 – eagereyes.org/criticism/definition-of-visualization
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Beneficii – adaptare după Card et al. (2009):
reducerea căutării informațiilor de interes
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Beneficii – adaptare după Card et al. (2009):
îmbunătățirea detectării tiparelor (patterns)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Beneficii – adaptare după Card et al. (2009):
codificarea informațiilor în cadrul unui mediu interactiv
www.informationisbeautiful.net/visualizations/worlds-biggest-data-breaches-hacks/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Beneficii: monitorizarea evoluției datelor/cunoștințelor
1 ian. 2013(CSS: 35 KB, JS: 207 KB)
15 dec. 2015(CSS: 76 KB, JS: 363 KB)
statistici pentru desktop: httparchive.org/compare.php
1 oct. 2016(CSS: 76 KB, JS: 410 KB)
15 dec. 2017(CSS: 98 KB, JS: 504 KB)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
co
Beneficii: 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)
get
.car
rots
earc
h.c
om
/fo
amtr
ee/la
test
/dem
os/
ft50
0.h
tml
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Alte beneficii – adaptare după N. Chibana (2015):
reliefarea unor tendințe (trends)
www.populationpyramid.net
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Alte beneficii – adaptare după N. Chibana (2015):
plasarea datelor/informațiilor într-un context specific
Universcale (Nikon): www.nikon.com/about/sp/universcale/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Alte beneficii – adaptare după N. Chibana (2015):
oferirea de perspective asupra unui subiect/domeniu
V. Markovtsev, Daily commit activity on GitHub (2017) – blog.sourced.tech/post/activity_hours/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Alte beneficii – adaptare după N. Chibana (2015):stimularea imaginației utilizatorului (“what if…?”)
Anon (2018) – regizor: Andrew Niccol: www.imdb.com/title/tt5397194/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
codata visualization
ilustrarea fenomenelor optice – Isaac Newtonconform Robin (1992)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Origini
diagrame abstracte
vizează informații non-fizice
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
codata visualization
un exemplu timpuriu: importuri/exporturi de mărfuri W. Playfair, The Commercial and Political Atlas (1786)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
co
Origini
statistica
analiza exploratorie a datelor (multi-dimensionale)
Tukey (1977), Cleveland & McGill (1988)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Origini
vizualizarea științifică
instrumente software analitice
pentru analizarea riguroasă a seturilor de date masive
McCormick & DeFanti (1987)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
co
Origini
interacțiunea om-calculator
noi interfețe + interacțiuni cu utilizatorul
Robertson, Card & Mackinlay (1989), Shneiderman (1992)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
eagereyes.org/blog/2010/the-difference-between-infographics-and-visualization
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
codata 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
profs.in
fo.uaic.ro/~busa
codata 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
profs.in
fo.uaic.ro/~busa
co
Design privind vizualizările datelor
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Visualization
the mapping of data to visual formthat supports human interaction in a workplace
for visual sense making
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Algorithm Visualizer – algo-visualizer.jasonpark.me
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
task• questions• goals• assumptions
data• physical data type• conceptual data type
domain• meta-data• semantics• conventions
image• visual channel• graphical
representations
processingalgorithms
mappingvisual encoding
vizualizarea datelor: privire de ansambluadaptare după Jeffrey Heer, Data Visualization (2017)
courses.cs.washington.edu/courses/cse442/17au/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
raw data
datatables
visualstructs.
views data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
visualization modeling
Stuart Card, “Information Visualization”, Human-Computer Interaction Handbook (2nd Edition),
Taylor & Francis, 2008
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Raw Datadate inițiale, neprelucrate
Data Tablesstructuri de date: relații + meta-date
Visual Structuresstructuri vizuale: elemente grafice
Viewsvizualizări (interactive) percepute de utilizator(i)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Raw Data(seturi de) date de vizualizat,
disponibile în diverse formate – binare/textuale
raw data
datatables
visualstructs.
views data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Data Transformationsoferă vectori normalizați într-un spațiu N dimensional
eventual, pot implica diverse operații de filtrare
raw data
datatables
visualstructs.
views data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Data Tablestructuri de date convenabil alese:
relații (depinzând de variabilele considerate) și meta-date
raw data
datatables
visualstructs.
views data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Data Tablestructuri de date convenabil alese:
relații (depinzând de variabilele considerate) și meta-date
tabele de obiecte + atributele lor
raw data
datatables
visualstructs.
views data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization 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,…
raw data
datatables
visualstructs.
views data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
pot fi considerate meta-date
FilmID 0083658 0088846 1189073 0103767
Title Blade Runner Brazil La piel que habito Baraka
Director Ridley Scott Terry Gilliam Pedro Almodóvar Ron Fricke
Actor Harrison Ford Jonathan Pryce Antonio Banderas N/A
Actress Sean Young Kim Greist Elena Anaya N/A
Year 1982 1985 2011 1992
Length 117 142 120 96
IMDB Popularity 8.2 8.0 7.6 8.6
Metascore 89 88 70 N/A
Genre Sci-Fi, Thriller Drama, Sci-Fi Drama, Thriller Documentary
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Data Tablereprezentare funcțională (abstractă)
f (input variables) = output variables
TopRatedMovies (FilmID = 0062622)91
raw data
datatables
visualstructs.
views data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
2001: A Space Odyssey este un film SF bine cotat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Data Tablevariabilele implică o scală de măsurare a valorii lor
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization 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 { Blade Runner, Brazil, The Wall,…}
pot fi utilizați operatorii de (in)egalitate
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization 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
profs.in
fo.uaic.ro/~busa
covisualization modeling
Data Tablevariabilele implică o scală de măsurare a valorii lor
o variabilă cantitativă Q este un interval numerice.g., durata filmului [0, 420]
pot fi folosiți operatorii aritmetici
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization 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
profs.in
fo.uaic.ro/~busa
covisualization modeling
Visualization of 112 million-atom reactive molecular dynamics simulation to study high-temperature oxidation of a silicon-carbide
nanoparticle on 786,432 IBM Blue Gene/Q corescacs.usc.edu/education/cs596.html
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization 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
profs.in
fo.uaic.ro/~busa
covisualization modeling
vizualizări cartografice 3D via Google Maps APIdevelopers.google.com/maps/documentation/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Data Tableîn funcție de natura vizualizării,
se poate recurge la subtipuri de date
quantitative similarity – variabile vizând similaritatea
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Data Tableîn funcție de natura vizualizării,
se poate recurge la subtipuri de date
quantitative timeordinal time
variabile referitoare la timp
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
vizualizarea dinamicii tranzacțiilor referitoare la monede virtuale (cryptocurrencies)
whalepool.io:8080/coinorama/ cryptomaps.org
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization 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
profs.in
fo.uaic.ro/~busa
covisualization modeling
clase de variabile implicate în vizualizarea datelor
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Data Tableanumite scale de valori pot fi alterate via transformări
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Data Tableanumite scale de valori pot fi alterate via transformări
e.g., variabilele cantitative pot avea asociate variabile ordinale
durata filmului [0, 420] min. → <SHORT, MEDIUM, LONG>
clase de valori
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Data Tableanumite scale de valori pot fi alterate via transformări
e.g., variabilele nominale pot fi convertite la valori ordinale
titluri de filme { Gattaca, Brazil, The Wall, Minority Report }→ < The Wall, Minority Report, Gatacca, Brazil >
sortare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization 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
raw data
datatables
visualstructs.
views data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
diverse exemplificări oferite de Explained Visuallysetosa.io/ev/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Visual Structuresutilizarea unui vocabular de elemente vizuale:
substraturi spațiale + marcaje + proprietăți grafice
raw data
datatables
visualstructs.
views data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Visual Structuresscop: asocierea sistematică a relațiilor dintre date
într-o formă vizualăcodificări vizuale (visual encodings)
raw data
datatables
visualstructs.
views data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
uzual, via metafore + idiomuri(revezi cursul despre design Web)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Visual Structures
substrat spațial – spatial substratemarcatori – marks
conectori și zone – connection & enclosureproprietăți perceptibile – retinal propertiescodificare temporală – temporal encoding
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Visual Structures
substrat spațial – spatial substrate
spațiul liber disponibil (empty space) – i.e. container –poate fi considerat ca având o structură metrică
tip de scală ↔ axe spațiale
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Visual Structures
substrat 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
profs.in
fo.uaic.ro/~busa
covisualization 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
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization 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 IMDB Popularity → QY
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Visual Structures
marcaje – marks
entități vizibile ce apar în spațiu: puncte, linii, arii, volume
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Visual Structures
tipuri de marcaje – marks
puncte (points) ⬛⭐ ⚫
linii (lines)
arii (areas)
volume (volumes)
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
profs.in
fo.uaic.ro/~busa
co
discuție
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Visual Structures
conectori și 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
profs.in
fo.uaic.ro/~busa
covisualization modeling
Visual Structures
conectori și zone – connection & enclosure
zonele pot fi utilizate pentru ierarhii, contururi, diagrame Venn
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
enclosure diagrambl.ocks.org/mbostock/4063530
figurarea unei ierarhii de entități
aparținând unor clase
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Visual Structures
proprietăți perceptibile – retinal properties
poziție, mărime, orientare, culoare, textură, formă
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Visual Structures
proprietăți perceptibile – retinal properties
poziție, mărime, orientare, culoare, textură, formă
exemplu: folosirea culorii pentru a codifica genul filmuluiFilmID (Genre) → P (Color)
posibile convenții: Drama ⬛ Sci-Fi ⬛ War ⬛
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
cop
od
io.c
om
/sit
e/cr
eati
ve-r
ou
tin
es
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Visual Structures
proprietăți perceptibile – retinal properties
aspecte de interes: claritate (crispness)
rezoluție transparență
poziționare (arrangement)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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)
civilstat.com/2015/10/statistical-graphics-and-visualization-course-materials/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Visual Structures
codificare 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
profs.in
fo.uaic.ro/~busa
covisualization modeling
View Transformationsoferă diverse maniere de vizualizare (reprezentări grafice)
conform necesităților aplicației / scopului utilizatorului
raw data
datatables
visualstructs.
views data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization modeling
Viewspercepute de utilizatorul final
eventual, pot fi ajustate via diverși parametri grafici(poziționare, scalare, decupare, rotire,…)
raw data
datatables
visualstructs.
views data
transformationsvisual
mappingsview
transformations
Data Visual Form
Human Interaction
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
“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
profs.in
fo.uaic.ro/~busa
co
The Internet Map – vizualizarea interactivă a utilizării unor domenii Internet pe baza datelor oferite de Alexa
internet-map.net
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
covisualization modeling
corelații incorecte – asocierile dintre date și forma vizuală eludează criteriul de expresivitate
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
http://pbfcomics.com/comics/bee/
(în loc de) pauză
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Care sunt procesele implicateîn vizualizarea datelor?
www.concerthotels.com/100-years-of-rock/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization processes
acquire 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
profs.in
fo.uaic.ro/~busa
covisualization processes
Acquire
obținerea datelor ce trebuie analizate și vizualizate
de studiat prezentările Tamarei Munzner (2018)www.cs.ubc.ca/~tmm/talks.html
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization processes
Surse deschise de date disponibile pe Web – exemplificări:Academic Torrents
academictorrents.com
Awesome Public Datasetsgithub.com/caesar0301/awesome-public-datasets
Awesome JSON Datasetsgithub.com/jdorfman/awesome-json-datasets
Common Crawlcommoncrawl.org/the-data/
DataHubdatahub.io/dataset
Kaggle Datasetswww.kaggle.com/datasets
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization processesDate deschise oferite de companii – exemple:
GitHub Archivewww.gharchive.org
Google BigQuery Public Datasetscloud.google.com/bigquery/public-data/
Microsoft Azure: Public Datasetsdocs.microsoft.com/azure/sql-database/sql-database-public-data-sets
Registry of Open Data on Amazon Web Servicesregistry.opendata.aws
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization 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
profs.in
fo.uaic.ro/~busa
covisualization processes
Filter
păstrarea exclusiv a datelor de interes
poate implica eliminarea „zgomotului” (noise reduction)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization 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
profs.in
fo.uaic.ro/~busa
covisualization 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
profs.in
fo.uaic.ro/~busa
covisualization 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
profs.in
fo.uaic.ro/~busa
covisualization processes
Interact
includerea unor metode vizând manipularea datelor sau ajustarea modului de vizualizare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
mash-ups
Your Life on Earth (BBC)www.bbc.com/earth/story/20141016-your-life-on-earth
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization processes
uzual, sunt adoptate metodologii iterative de proiectare (Fry, 2008)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Am putea clasifica
metodele de vizualizare
a informațiilor?
bl.o
cks.
org
/mb
ost
ock
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Structuri vizuale simple
percepții directe (direct reading)
utilizarea unei singure variabile [X]:liste, trasări de puncte (1D scatterplots),
pie charts, donut charts, distribuții, box plots,…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
discuție
a se studia și eagereyes.org/techniques/pie-charts
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Structuri vizuale simple
percepții directe
recurgerea la 2 variabile [XY]:obiecte bidimensionale (histograme) – valori continue
2D scatterplots – valori discrete…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
exemplificare:vizualizări 2D generate cu Google Data Studio
www.google.com/analytics/data-studio/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
co
studiul comportamentului rețelelor neuronale – aici, clasificarea datelor – direct în cadrul browser-ului Web
playground.tensorflow.org
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization taxonomy
retinal scatterplot – aici: heat mapsecviz.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
profs.in
fo.uaic.ro/~busa
co
Structuri vizuale simple
percepții directe
recurgerea la 4 variabile[XYZR]: 3D retinal scatterplots, topografii 3D
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
o vizualizare 3D a densității populației dintr-un orașvia instrumentul Web Kepler – kepler.gl
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
co
Krona – vizualizare științifică exploratorie de tip pie charta datelor ierarhice (taxonomice): github.com/marbl/Krona
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
vizualizare 3D a unui atac ciberneticzones-maps.bid/network-attack-map/the-best-live-cyber-attack-maps-cyberwarzone.html
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Structuri vizuale simple
percepții complexe (articulated reading)
pot cauza probleme
de interpretare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization taxonomy
o trasare vizuală a atractivității versus vârstă(culoarea indică genul)
O’Connor & Biewald, 2009
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
covisualization 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
profs.in
fo.uaic.ro/~busa
co
Structuri vizuale simple
percepții complexe
figurări de rețele (grafuri)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
vizualizarea cartografică a tipurilor și volumului atacurilor cibernetice:
zones-maps.bid/network-attack-map.html
altă exemplificare: graphofthings.org
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
co
studiu de caz
hereistoday.com
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization taxonomy
Definitive Daft Punkthemaninblue.com/writing/perspective/2011/05/12/
studiu de caz
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Structuri vizuale compuse
compuneri folosind o singură axă [XYn]:matrici de permutare, coordonate paralele
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization taxonomy
o vizualizare paralelă bazată pe o coordonată a datelor oferite de un fișier de jurnalizare a unui firewall
context: security visualization – secviz.org
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Structuri vizuale compuse
compoziție vizuală recurgând la 2 axe [XY]: grafuri
vizualizarea ontologiilorowlgred.lumii.lv
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
covisualization taxonomy
vizualizarea de informații corelatewww.andreykurenkov.com/writing/fun-visualizations-of-stackoverflow/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
covisualization taxonomy
100 Years with the San Francisco Symphony (Adobe)thewhyaxis.info/music/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Structuri vizuale compuse
compunere recursivă
vizualizări 3D în 3D [(XYZ)XYZ]: lumi (virtuale) în cadrul altor lumi (virtuale)
context mai larg: realitatea mixtă (mixed reality)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
vizualizări holografice – HoloLens (Microsoft, 2016) www.microsoft.com/hololens/developers
Firefox Reality (Mozilla, 2018): mixedreality.mozilla.org
resurse de interes: webvr.rocks + next.reality.news
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
covisualization taxonomy
Poem Viewer – vizualizări imagistice (imagery lens)pentru explorarea datelor poetice
ovii.oerc.ox.ac.uk/PoemVis/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
covisualization 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 – aici, floricultură
exemplificări: mbostock.github.io/protovis/ex/brush.html
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
covisualization taxonomy
Gapminder – www.gapminder.org/tools
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
covisualization 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)
medium.com/@dominikus/the-superpower-of-interactive-datavis-a-micro-macro-view-4d027e3bdc71
selfiecity.net/selfiexploratory/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
coremarci
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
profs.in
fo.uaic.ro/~busa
coremarci
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
profs.in
fo.uaic.ro/~busa
coconclusions
chartjunk using a large area and a lot of “ink” (many symbols and lines)
to show only 5 hard-to-read numbers
exemple concrete: junkcharts.typepad.com
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
coremarci
Sfat pragmatic: etichetarea corespunzătoare
recurgerea la explicații, legende, convenții vizuale etc.
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
coconcluzii
History of Rock Musicwww.svds.com/rockandroll/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
coremarci
Sfat pragmatic: cunoașterea audienței
selectarea unor maniere specifice de vizualizare a datelor în funcție de (tipurile de) utilizatori
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
coconcluzii
studiu de caz
vizualizări 3D în cadrul navigatorului Webale anatomiei și fiziologiei corpului uman
human.biodigital.com
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
coremarci
“Never trust summary statistics alone; always visualize your data” (Alberto Cairo, 2016)
deși seturile de date (datasets) au aceleași caracteristici statistice (e.g., deviație standard, corelație Pearson),
vizualizările acestor seturi de date sunt diferite
detalii în J. Matejka, G. Fitzmaurice, “Same Stats, Different Graphs: Generating Datasets with Varied Appearance and Identical Statistics through Simulated Annealing”,
ACM SIGCHI Conference on Human Factors in Computing Systems, 2017www.autodeskresearch.com/publications/samestats
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
coinstrumente la nivel de client
Biblioteci de vizualizare 2D a datelor
D3.js (Data-Driven Documents) – d3js.org
extensii D3.js – github.com/wbkd/awesome-d3
Leaflet (mobile-friendly interactive maps) – leafletjs.com
Raphaël (vector graphics) – raphaeljs.com
Recline (building data apps) – okfnlabs.org/recline/
Sigma (graph drawing) – sigmajs.org
Vis (handling large amounts of dynamic data) – visjs.org
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
coinstrumente la nivel de client
Biblioteci de vizualizare 3D a datelorCesium (3D globes and maps) – cesiumjs.org
PhiloGL – www.senchalabs.org/philogl/
Three.js – threejs.org
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
coinstrumente la nivel de client
A se experimenta și…
Data Visualization Selected Toolsselection.datavisualization.ch/
Data Visualization Tools for the Webgithub.com/showcases/data-visualization
JS Visualization Librarieswww.javascripting.com/search?q=visualization
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
physical visualizationsreprezentările vizuale ale datelor pot fi chiar fizice
(eventual, generate de o imprimantă 3D)
alte studii de caz: dataphys.org/list/
Nathalie Miebach (2007) Leo Smith (2018)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
coconcluzii
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
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
coconcluzii
studiu de caz
Food Poisoning Outbreaks (Ruslan Kamolov, 2015)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
coconcluzii
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
profs.in
fo.uaic.ro/~busa
coconcluzii
studiu de caz
explicarea unei legi electorale prin intermediul vizualizării
RAW Graphsgithub.com/densitydesign/raw
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Data + Design – infoactive.co/data-design
Information is Beautiful – www.informationisbeautiful.net
Data Viz Project – datavizproject.com
Awesome Visualization Researchgithub.com/mathisonian/awesome-visualization-research
Data Visualization Catalogue – datavizcatalogue.com
Data Viz Done Right – www.datavizdoneright.com
Flowing Data – flowingdata.com
Visualizing Algorithms – bost.ocks.org/mike/algorithms/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
episodul viitor: limbajul JavaScript
![[CLIW] Web testing](https://static.fdocuments.in/doc/165x107/554fa089b4c90586258b495e/cliw-web-testing.jpg)
