Transcript
Page 1: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Dezvoltarea aplicațiilor Webla nivel de client

Ⱑvizualizarea datelor

o privire de ansamblu

Page 2: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

“Above all else show the data.”

Edward R. Tufte

Page 3: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Realitate

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

Page 4: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

www.worldometers.info

Page 5: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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 citit www.softviscollection.org/intro/a-thousand-words/

Page 6: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Necesități

integrarea, simplificarea și monetizarea sistemelor informaționale existente și a volumelor masive

de date pe care acestea le dețin

datainformationknowledgewisdom

Page 7: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Ce reprezintă vizualizarea datelor?

Page 8: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Data vizualization

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

Page 9: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Data vizualization

proces de asociere a informației la factori vizuali

“data visualization is expert storytelling” – Murray, 2013

Page 10: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Data vizualization

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

Page 11: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

informa-tion

design

data per-ceptuali-

zation

data visuali-zation

scientific visuali-zation

Page 12: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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

Robert Kosara, 2008http://eagereyes.org/criticism/definition-of-visualization

Page 13: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Beneficii – adaptare după Card et al. (2009):

reducerea căutării informațiilor de interes

Page 14: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Beneficii – adaptare după Card et al. (2009):

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

Page 15: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Beneficii – adaptare după Card et al. (2009):

codificarea informațiilor în cadrul unui mediu interactiv

Page 16: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Beneficii – adaptare după Card et al. (2009):

monitorizarea evoluției datelor/cunoștințelor

Page 17: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

codata visualization

How Music Travels – un experiment de vizualizare animată

http://www.thomson.co.uk/blog/wp-content/uploads/infographic/interactive-music-map/

Page 18: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Beneficii – adaptare după Card et al. (2009):

realizarea de inferențe

Page 19: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

codata visualization

vezi Hans Rolins, “New insights on poverty”, TED 2007

www.ted.com/talks/hans_rosling_reveals_new_insights_on_poverty

Page 20: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Beneficii – adaptare după Card et al. (2009):

permiterea explorării spațiului valorilor parametrilor de vizualizare și facilitarea operațiilor

desfășurate de utilizatori

Page 21: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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

Page 22: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

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

imagini oferite de Wikimedia Commons

Page 23: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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

Page 24: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

codata visualization

ilustrarea fenomenelor optice – Isaac Newtonconform Robin (1992)

Page 25: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Origini

diagrame abstracte

privesc informații non-fizice

un exemplu timpuriu: Playfair (1786)

Page 26: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Origini

design vizual + grafice privind datele

principii de proiectare a vizualizării datelor (infovis)

Edward Tufte (1983, 1990, 1997)

Page 27: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Origini

statistica

analiza exploratorie a datelor (multi-dimensionale)

Tukey (1977), Cleveland & McGill (1988)

Page 28: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Origini

vizualizarea științifică

instrumente software analitice

pentru analizarea riguroasă a seturilor de date masive

McCormick & DeFanti (1987)

Page 29: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Origini

grafica computațională + inteligența artificială

proiectarea automată a prezentărilor vizuale ale datelor

Mackinlay (1986), Roth & Mattis (1990), Casner (1991)

Page 30: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Origini

interacțiunea om-calculator

noi interfețe & interacțiuni cu utilizatorul

Robertson, Card & Mackinlay (1989), Shneiderman (1992)

Page 31: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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

http://eagereyes.org/blog/2010/the-difference-between-infographics-and-visualization

Page 32: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

codata visualization

“The nature of the visualization depends on which relationship is dominant.”

N. Iliinsky & J. Steele, Designing Data Visualizations, O’Reilly, 2011

Page 33: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

codata visualization

“The nature of the visualization depends on which relationship is dominant.”

N. Iliinsky & J. Steele, Designing Data Visualizations, O’Reilly, 2011

infographicsdata/info viz

e.g., generative art

Page 34: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Design privind vizualizările datelor

Page 35: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Visualization

the mapping of data to visual formthat supports human interaction in a workplace

for visual sense making

Page 36: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Stuart Card, “Information Visualization”, Human-Computer Interaction Handbook (2nd Edition),

Taylor & Francis, 2008

Page 37: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

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)

Page 38: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Raw Data(seturi de) date de vizualizat,

disponibile în diverse formate – binare/textuale

Page 39: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Data Transformationsoferă vectori normalizați într-un spațiu n dimensional

eventual, pot implica diverse operații de filtrare

Page 40: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Data Tablestructuri de date convenabil alese:

relații (depinzând de variabilele considerate) și meta-date

Page 41: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Data Tablestructuri de date convenabil alese:

relații (depinzând de variabilele considerate) și meta-date

tabele de obiecte + atributele lor

Page 42: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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,…

Page 43: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

pot fi considerate meta-date

Page 44: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Data Tablereprezentare funcțională (abstractă)

f (input variables) = output variables

Page 45: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Data Tablereprezentare funcțională (abstractă)

f (input variables) = output variables

Year (FilmID = 540) = 1926

Page 46: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Data Tablevariabilele implică o scală de măsurare a valorii lor

Page 47: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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 { Star Wars, Brazil, The Wall,…}

pot fi utilizați operatorii de (in)egalitate

Page 48: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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 „<”

Page 49: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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, 400]

pot fi folosiți operatorii aritmetici

Page 50: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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

Page 51: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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

Page 52: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Data Tableîn funcție de natura vizualizării,

se poate recurge la subtipuri de date

quantitative similarity – variabile privind similaritatea

Page 53: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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)

Page 54: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

clase de variabile implicate în vizualizarea datelor

Page 55: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Data Tableanumite scale de valori pot fi alterate via transformări

Page 56: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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, 400] min. → <SHORT, MEDIUM, LONG>

clase de valori

Page 57: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Data Tableanumite scale de valori pot fi alterate via transformări

e.g., variabilele nominale pot fi convertite la valori ordinaletitluri de filme { Star Wars, Brazil, The Wall }

→ < The Wall, Star Wars, Brazil >

sortare

Page 58: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Page 59: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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

Page 60: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Visual Structuresutilizarea unui vocabular de elemente vizuale:

substraturi spațiale + marcaje + proprietăți grafice

Page 61: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Visual Structuresscop: asocierea sistematică a relațiilor dintre date

într-o formă vizualăcodificări vizuale (visual encodings)

Page 62: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Visual Structuresspatial substrate

marksconnectionenclosure

retinal propertiestemporal encoding

Page 63: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Visual Structuressubstrat spațial – spatial substrate

spațiul liber disponibil (empty space) poate fi considerat ca având o structură metrică

tip de scală ↔ axe spațiale

Page 64: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Visual Structuressubstrat spațial – spatial substrate

axe spațiale importante

U – valori nestructurate nicio axăN – valori nominale regiune având sub-regiuniO – valori ordinale ordinea sub-regiunilor e importantăQ – valori cantitative o regiune are atașată o metrică

Page 65: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Page 66: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Visual Structuressubstrat spațial – spatial substrate

axe spațiale lineare ori radiale

pot implica orice sisteme de coordonate spațiale folosite e.g., recurgerea la coordonate carteziene

Page 67: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Visual Structuressubstrat spațial – spatial substrate

axe spațiale lineare ori radiale

exemplificare: utilizarea a 2 axe ortogonale cantitative

pentru vizualizarea popularității unui film în timp

Year → QX Popularity → QY

Page 68: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Visual Structuresmarcaje – marks

entități vizibile ce apar în spațiu: puncte, linii, arii, volume

Page 69: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Visual Structurestipuri de marcaje – marks

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

Page 70: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Page 71: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Visual Structuresconectori & zone – connection & enclosure

punctele și liniile pot fi folosite pentru a desemna diverse structuri topologice – e.g., grafuri, arbori –

specificând relațiile dintre obiecte

Page 72: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Visual Structuresconectori & zone – connection & enclosure

zonele pot fi utilizate pentru ierarhii, contururi, diagrame Venn

Page 73: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Visual Structuresproprietăți perceptibile – retinal properties

poziție, mărime, orientare, culoare, textură, formă

Page 74: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Visual Structuresproprietăți perceptibile – retinal properties

poziție, mărime, orientare, culoare, textură, formă

aspecte de interes: claritate (crispness), rezoluție,

transparență, poziționare (arrangement)

Page 75: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Visual Structuresproprietăți perceptibile – retinal properties

poziție, mărime, orientare, culoare, textură, formă

exemplu: culoarea – cod vizual ilustrând genul filmuluiFilmID (Genre) → P (Color)

230 (Action) → P (Red)

Page 76: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Visual Structurescodificare temporală – temporal encoding

date referitoare la timp ce trebuie vizualizateversus

animație – asocierea dintre timp și valoarea unei variabile

Page 77: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

View Transformationsoferă diverse maniere de vizualizare (reprezentări grafice)

conform necesităților aplicației / scopului utilizatorului

Page 78: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

Viewspercepute de utilizatorul final

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

Page 79: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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

Page 80: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Expresivitate & 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

Page 81: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization modeling

FilmType (N) → Position (Q)asocierile dintre date și forma vizuală

eludează criteriul de expresivitate

Page 82: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Care sunt procesele implicateîn vizualizarea datelor?

Page 83: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization 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

Page 84: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization processes

Aquire

obținerea datelor ce trebuie analizate și vizualizate

surse deschise de date:http://ideasource.blankdots.com/2012/08/open-data-sources/

http://datahub.io/

Page 85: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization processes

Parse

obținerea unei/unor structuri convenabile privind semnificația datelor

eventual, ordonarea lor în categorii de interes

Page 86: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization processes

Filter

păstrarea exclusiv a datelor de interes

poate implica eliminarea „zgomotului”

Page 87: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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

Page 88: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization processes

Represent

alegerea unui (set de) model(e) vizual(e)

exemple tipice:recurgerea la chart-uri – bar graph, list, tree,…

Page 89: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization processes

Refine

îmbunătățirea suitei de reprezentări vizuale alese

e.g., tehnici de optimizare a clarității (percepției)

Page 90: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization processes

Interact

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

Page 91: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

mash-ups

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

Page 92: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization processes

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

Page 93: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Am putea clasifica metodele de vizualizare a informațiilor?

Page 94: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

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,…

Page 95: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

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

Page 96: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Structuri vizuale simple

percepții directe

recurgerea la 2 variabile [XY]:obiecte bidimensionale (histrograme) – valori continue

2D scatterplots – valori discrete…

Page 97: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

http://www.mathsisfun.com/data/histograms.html

Page 98: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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

Page 99: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization taxonomy

retinal scatterplot – aici: heat maphttp://secviz.org/content/user-behavior-a-heatmap

vizualizarea comportamentului utilizatorului (Y) în funcție de timp (X); culoarea (variabila R) indică

intensitatea activității desfășurate

Page 100: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Structuri vizuale simple

percepții directe

recurgerea la 4 variabile[XYZR]: 3D retinal scatterplots, topografii 3D

Page 101: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

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

Page 102: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Structuri vizuale simple

percepții complexe (articulated reading)

utilizarea a n variabile[XYRn-2]: 2D retinal scatterplots

[XYZRn-1]: 3D retinal scatterplots

pot cauza probleme

Page 103: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization taxonomy

o trasare vizuală a atractivității versus vârstăculoarea indică genul

O’Connor & Biewald, 2009

Page 104: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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

Page 105: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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

Page 106: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Structuri vizuale simple

percepții complexe

figurări de rețele

Page 107: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization 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/

Page 108: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Structuri vizuale simple

percepții complexe

reprezentarea timpului

valori discrete vs. continuee.g., calendar, timeline, momente vs. intervale, alternative

Page 109: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization taxonomy

Definitive Daft Punkhttp://themaninblue.com/writing/perspective/2011/05/12/

Page 110: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Structuri vizuale compuse

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

Page 111: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization taxonomy

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

Page 112: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Structuri vizuale compuse

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

Page 113: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Structuri vizuale compuse

compunere recursivă

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

Page 114: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization taxonomy

organizarea tuturor perechilor de informații corelate

Page 115: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Structuri vizuale compuse

compunere recursivă

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

Page 116: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization taxonomy

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

Page 117: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Structuri vizuale compuse

compunere recursivă

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

Page 118: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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)

Page 119: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization taxonomy

Poem Viewer – vizualizări imagistice (imagery lens)pentru explorarea datelor poetice

http://ovii.oerc.ox.ac.uk/PoemVis/

Page 120: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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

exemplificări: http://mbostock.github.io/protovis/ex/brush.html

Page 121: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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ă

Page 122: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

covisualization taxonomy

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

Page 123: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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

Page 124: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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)

http://larp601.wordpress.com/

Page 125: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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 (dataset)

vizualizare explicativă (explanatory visualization)transmiterea unor informații sau a unui punct de vedere

„țintind” un utilizator ori o clasă de utilizatori

Page 126: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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 (dataset)

vizualizare explicativă (explanatory visualization)transmiterea unor informații sau a unui punct de vedere

„țintind” un utilizator ori o clasă de utilizatori

Page 127: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

coconcluzii

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

Page 128: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

coconcluzii

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)

Page 129: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/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: http://junkcharts.typepad.com/

Page 130: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

coconcluzii

Sfat pragmatic: cunoașterea audienței

selectarea unor maniere specifice de vizualizare a datelor în funcție de (tipurile de) utilizatori

de explorat și http://www.visualisingdata.com/

Page 131: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

coresurse 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

Page 132: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

coresurse de studiat

WikiViz – tehnici, instrumente, exemple: www.wikiviz.org

Resurse privind vizualizarea și explorarea datelor: http://tinyurl.com/kr8oxg5

Data Visualization: http://datavisualization.ch/

Visualization & Visual Communication: http://eagereyes.org

Information is Beautiful: www.informationisbeautiful.net

Page 133: CLIW 2014—2015 (5/12): Vizualizarea datelor

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

episodul viitor: (re)găsirea resurselor Web


Recommended