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

www.purl.org/net/busaco

Dezvoltarea aplicațiilor Webla nivel de client

◕vizualizarea datelor

o privire de ansamblu

“Above all else show the data.”

Edward R. Tufte

Cum redăm și interacționăm cu datele existente (procesate de software)?

caracteristici ale datelor: varietate, volum, dinamicitateadaptare după http://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

MBGBTBEB

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

DIKW (DataInformationKnowledgeWisdom)adaptare după S. Carpenter, 2008 și J. Liebowitz, 2012

Ce reprezintă vizualizarea datelor?

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

Data visualization

proces de asociere a informației la factori vizuali

“data visualization is expert storytelling” – Murray, 2013

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

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

How Music Travels – un experiment de vizualizare animată

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

discuție

Beneficii:realizarea de inferențe(contexte: inteligența artificială,

Web semantic)

decizii + predicții(context: învățare automată)

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)

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

www.ted.com/talks/hans_rosling_reveals_new_insights_on_poverty

discuție

Alte beneficii – adaptare după N. Chibana (2015):

reliefarea unor tendințe (trends)

plasarea datelor/informațiilor într-un context specific

oferirea de perspective asupra unui subiect/domeniu

stimularea imaginației utilizatorului

exemplificări la http://blog.visme.co/examples-data-visualizations/

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

www.purl.org/net/busacodata visualization

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

De-sig-ner

informative

visual art

persuasive

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

Design privind vizualizările datelor

Visualization

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

for visual sense making

www.purl.org/net/busacovisualization 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 Structuresscop: asocierea sistematică a relațiilor dintre date

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

eventual, folosind metafore

(revezi cursul anterior)

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

discuție

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)

discuție

poziționare 2D aliniată conform unei scale

poziționare 2D nealiniată

redare conform valorilor (length)

acuratețea comparațiilor dintre

valorile datelor

diversele maniere de vizualizare pot facilita percepțiile utilizatorului

(Cleveland & McGill, 1984) citați de Jerzy Wieczorek (2015)

http://civilstat.com/2015/10/statistical-graphics-and-visualization-course-materials/

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

The Internet Map – vizualizarea interactivă a utilizării unor domenii Internet pe baza datelor oferite de Alexa

http://internet-map.net/

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

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

eludează criteriul de expresivitate

http://pbfcomics.com/246/

(în loc de) pauză

Care sunt procesele implicateîn vizualizarea datelor?

www.purl.org/net/busacovisualization 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:https://github.com/caesar0301/awesome-public-datasets

http://datahub.io/

https://github.com/jdorfman/awesome-json-datasets

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” (noise reduction)

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? htt

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…

exemplificări variate: www.improving-visualisation.org/visuals

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

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

percepții complexe (articulated reading)

pot cauza probleme

de interpretare

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 (grafuri)

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

studiu de caz

http://hereistoday.com/

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

studiu de caz

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/

www.purl.org/net/busacoconcluzii

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)

studiu de caz

Web Trend Map (iA, 2007): http://ia.net/know-how/ia-trendmap-2007v2

studiu de caz

Food Poisoning Outbreaks (Ruslan Kamolov, 2015)http://www.visualizing.org/visualizations/food-poisoning-outbreaks

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

studiu de caz

compararea dimensiunii relative a unor entități via vizualizări interactive (Nikon, 2015): www.nikon.com/about/feelnikon/universcale/

vizualizare animată a producerii cafelei: www.bizbrain.org/coffee/

studiu de caz

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

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)

www.purl.org/net/busacoconclusions

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/

Sfat pragmatic: etichetarea corespunzătoare

recurgerea la explicații, legende, convenții vizuale etc.

History of Rock Musicwww.svds.com/rockandroll/

Sfat pragmatic: cunoașterea audienței

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

exemplu: www.improving-visualisation.org/case-studies/id=7

studiu de caz

vizualizări 3D în cadrul navigatorului Webale anatomiei și fiziologiei corpului uman

https://human.biodigital.com/

www.purl.org/net/busacoinstrumente la nivel de client

Biblioteci de vizualizare 2D a datelor

D3.js (Data-Driven Documents) – http://d3js.org/

extensii D3.js – https://github.com/wbkd/awesome-d3

Leaflet (mobile-friendly interactive maps) – leafletjs.com/

Raphaël – http://raphaeljs.com/

Recline – http://okfnlabs.org/recline/

Sigma (graph drawing) – http://sigmajs.org/

Vis – http://visjs.org/

Biblioteci de vizualizare 3D a datelorCesium – http://cesiumjs.org/

PhiloGL – http://www.senchalabs.org/philogl/

Three.js – http://threejs.org/

A se experimenta și…

Data Visualization Selected Toolshttp://selection.datavisualization.ch/

Data Visualization Tools for the Webhttps://github.com/showcases/data-visualization

JSter Visualization Librarieshttp://jster.net/search?q=visualization

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

www.purl.org/net/busacoresurse de studiat

WikiViz (tehnici, instrumente, exemple) – www.wikiviz.org

Data + Design – https://infoactive.co/data-design

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

Information is Beautiful – www.informationisbeautiful.net

Data Visualization – http://datavisualization.ch/

Visualizing Algorithms – http://bost.ocks.org/mike/algorithms/

Propuneți 2 soluții de vizualizare a datelor referitoare la orarul FII

http://profs.info.uaic.ro/~orar/

test scris #1 (T1)

episodul viitor:(re)găsirea resurselor Web

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

Design

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

Kober Dietlinde - Rezumat Torsiune Ansamblu

Ansamblu Termoventil Termovar Pliant

Introducere in Vizualizarea Datelor cu HTML5 Canvas

CLIW 2015-2016 (12/13) Performanța aplicaţiilor Web la nivel de client

2 Ansamblu Yamaha Ep2551068a1

8. Vizualizarea ediţiilor digitale - Digital Humanities ...mihaimaga.ro/dh/pdf/DH-08-vizual-beamer-Ro.pdf · Planul cursului: 8. Vizualizarea ediţiilor digitale Digital Humanitie‘

0. Imaginea de ansamblu

CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv

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

Servicii de tehnologie a informaţiei pentru controlul şi vizualizarea … · 2014-07-08 · Policy AdvicE notEs Servicii de tehnologie a informaţiei pentru controlul şi vizualizarea

CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Prezentarea de Ansamblu a BRD

ansamblu rezidential

Vizualizarea Curgerilor in Suflerie

plan ansamblu ogra

Plan de Situatie Ansamblu

MATEI PRIVIRE DE ANSAMBLU

PUZ - Ansamblu locuinte.pdf

Figura 5-5 Vizualizarea proceselor de data mining de catre ...

Instructiuni cu privire la vizualizarea Documentelor cu Informatii …d40b31b2-0a4c-460c-8f0d-cb6c6ca... · 2020. 10. 15. · Vizualizarea documentului ales se face prin accesarea