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

www.purl.org/net/busa

Dezvoltarea aplicațiilor Webla nivel de client

Ⱑvizualizarea datelor

o privire de ansamblu

“Above all else show the data.”

Edward R. Tufte

Realitate

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

www.worldometers.info

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/

Necesități

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

de date pe care acestea le dețin

datainformationknowledgewisdom

Ce reprezintă vizualizarea datelor?

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

Data vizualization

proces de asociere a informației la factori vizuali

“data visualization is expert storytelling” – Murray, 2013

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

informa-tion

design

data per-ceptuali-

zation

data visuali-zation

scientific visuali-zation

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

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

reducerea căutării informațiilor de interes

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

codificarea informațiilor în cadrul unui mediu interactiv

monitorizarea evoluției datelor/cunoștințelor

codata visualization

How Music Travels – un experiment de vizualizare animată

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

realizarea de inferențe

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

www.ted.com/talks/hans_rosling_reveals_new_insights_on_poverty

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

desfășurate de utilizatori

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

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

imagini oferite de Wikimedia Commons

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

ilustrarea fenomenelor optice – Isaac Newtonconform Robin (1992)

Origini

diagrame abstracte

privesc informații non-fizice

un exemplu timpuriu: Playfair (1786)

Origini

design vizual + grafice privind datele

principii de proiectare a vizualizării datelor (infovis)

Edward Tufte (1983, 1990, 1997)

Origini

statistica

analiza exploratorie a datelor (multi-dimensionale)

Tukey (1977), Cleveland & McGill (1988)

Origini

vizualizarea științifică

instrumente software analitice

pentru analizarea riguroasă a seturilor de date masive

McCormick & DeFanti (1987)

Origini

grafica computațională + inteligența artificială

proiectarea automată a prezentărilor vizuale ale datelor

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

Origini

interacțiunea om-calculator

noi interfețe & interacțiuni cu utilizatorul

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

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

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

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

“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

Design privind vizualizările datelor

Visualization

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

for visual sense making

covisualization modeling

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

Taylor & Francis, 2008

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)

Raw Data(seturi de) date de vizualizat,

disponibile în diverse formate – binare/textuale

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

eventual, pot implica diverse operații de filtrare

Data Tablestructuri de date convenabil alese:

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

Data Tablestructuri de date convenabil alese:

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

tabele de obiecte + atributele lor

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

pot fi considerate meta-date

Data Tablereprezentare funcțională (abstractă)

f (input variables) = output variables

Data Tablereprezentare funcțională (abstractă)

f (input variables) = output variables

Year (FilmID = 540) = 1926

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

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 „<”

o variabilă cantitativă Q este un interval numerice.g., durata filmului [0, 400]

pot fi folosiți operatorii aritmetici

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

quantitative geographical – variabile spațiale ce specifică anumite coordonate geografice

quantitative similarity – variabile privind similaritatea

unstructured scale – variabile având valori speciale, indicând prezența/absența (e.g., error flag)

clase de variabile implicate în vizualizarea datelor

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

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

→ < The Wall, Star Wars, Brazil >

sortare

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

Visual Structuresutilizarea unui vocabular de elemente vizuale:

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

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

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

Visual Structuresspatial substrate

marksconnectionenclosure

retinal propertiestemporal encoding

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

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ă

axe spațiale lineare ori radiale

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

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

Visual Structuresmarcaje – marks

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

Visual Structurestipuri de marcaje – marks

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

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

Visual Structuresconectori & zone – connection & enclosure

zonele pot fi utilizate pentru ierarhii, contururi, diagrame Venn

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)

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

230 (Action) → P (Red)

Visual Structurescodificare temporală – temporal encoding

date referitoare la timp ce trebuie vizualizateversus

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

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

conform necesităților aplicației / scopului utilizatorului

Viewspercepute de utilizatorul final

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

“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

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

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

eludează criteriul de expresivitate

Care sunt procesele implicateîn vizualizarea datelor?

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

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/

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

eventual, ordonarea lor în categorii de interes

Filter

păstrarea exclusiv a datelor de interes

poate implica eliminarea „zgomotului”

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

Represent

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

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

Refine

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

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

Interact

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

mash-ups

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

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

Am putea clasifica metodele de vizualizare a informațiilor?

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

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

percepții directe

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

2D scatterplots – valori discrete…

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

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

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

percepții directe

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

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

percepții complexe (articulated reading)

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

[XYZRn-1]: 3D retinal scatterplots

pot cauza probleme

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

O’Connor & Biewald, 2009

percepții complexe

arbori (utilizați la indicarea ierarhiilor):node and link trees, enclosure trees,

hyperbolic trees, TreeMaps, cone trees

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

percepții complexe

figurări de rețele

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/

percepții complexe

reprezentarea timpului

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

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

Structuri vizuale compuse

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

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

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

compunere recursivă

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

organizarea tuturor perechilor de informații corelate

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

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

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

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)

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

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

„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

Suplimentar, pot fi figurate reprezentări luând în calcul implicarea utilizatorilor

metode bazate pe date:filtrare în funcție de context

agregare selectivă

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

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

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/

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

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

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

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)

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/

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/

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

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

episodul viitor: (re)găsirea resurselor Web

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

Technology

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

CLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScript

KMBT C224-20161024090519aplicatiilor si platformelor software in domeniul Earth Science, realitate virtuala, realitate imbunatatita, prelucrarea si vizualizarea datelor spatiale masive.

CLIW 2014—2015 (10/12): Programare Web. Suita de tehnologii HTML5

CLIW 2014—2015 (1/12): Interacţiune Web: concepte, context, studii de caz

CLIW 2014—2015 (2/12): Arhitectura navigatorului Web

CLIW 2015-2016 (3/13) Design Web. Interacțiune, utilizabilitate, metodologii de proiectare

[CLIW] Web testing

CLIW 2014—2015 (6/12): Căutarea resurselor Web

Servicii de tehnologie a informaţiei pentru controlul şi vizualizarea ...

Shakti Gawain - Vizualizarea Creativă

Introducere in Vizualizarea Datelor cu HTML5 Canvas

Introducerea, editarea şi formatarea datelor în Calc · CIORNĂ - bazată pe software nefinalizat Introducerea datelor în Calc Introducerea datelor în Calc Introducerea datelor

Cliw ( w · 2016-03-10 · Cliw ( w,-w (& rU ) Oo^a, SepWUr-Ifec^W tovf IS3»+ ... Ï 2 K Ç- Jo. X-l

CLIW 2014—2015 (3/12): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare

CLIW 2015-2016 (2/13) Arhitectura navigatorului Web

Laborator - Folosirea Wireshark-ului pentru vizualizarea ...cisco.ctcnvk.ro/RS1Romana/course/files/3.3.3.4 Lab... · Laborator - Folosirea Wireshark-ului pentru vizualizarea Traficului

Analiza datelor

Ghidul utilizatorului · Imprimarea documentelor și a fotografiilor de pe dispozitiv 55 Vizualizarea informațiilor despre memorie și despre spațiul de stocare 56 Vizualizarea

Shakti Gawain Vizualizarea Creativă

toivanengroup.com · 2020. 3. 12. · RALA CliW' cgvg, STEAMRATOR WIT.700 . HeatWork' HeatWork' TOWANEN STEAMRATOR MHT -700 LUOTETTAVA KUMPPANI Titaajavastuu.fi RALA CliW' cgvg, STEAMRATOR