cliw 2015-2016 (5/13) vizualizarea datelor – o privire de ansamblu

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Dezvoltarea aplicațiilor Webla nivel de client

◕vizualizarea datelor

o privire de ansamblu

Dr.

Sab

in B

ura

ga


“Above all else show the data.”

Edward R. Tufte

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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

KB

MBGBTBEB

PBZB

YB

Dr.

Sab

in B

ura

ga


Realitate

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

Dr.

Sab

in B

ura

ga


www.worldometers.info

Dr.

Sab

in B

ura

ga


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


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

Dr.

Sab

in B

ura

ga


Ce reprezintă vizualizarea datelor?

Dr.

Sab

in B

ura

ga


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


Data visualization

proces de asociere a informației la factori vizuali

“data visualization is expert storytelling” – Murray, 2013

Dr.

Sab

in B

ura

ga


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


informa-tion

design

data per-ceptuali-

zation

data visuali-zation

scientific visuali-zation

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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

reducerea căutării informațiilor de interes

Dr.

Sab

in B

ura

ga



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

Dr.

Sab

in B

ura

ga



codificarea informațiilor în cadrul unui mediu interactiv

Dr.

Sab

in B

ura

ga



monitorizarea evoluției datelor/cunoștințelor

Dr.

Sab

in B

ura

ga


How Music Travels – un experiment de vizualizare animată

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

discuție

Dr.

Sab

in B

ura

ga


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



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)

Dr.

Sab

in B

ura

ga


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

www.ted.com/talks/hans_rosling_reveals_new_insights_on_poverty

discuție

Dr.

Sab

in B

ura

ga


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/

Dr.

Sab

in B

ura

ga


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


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


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

www.purl.org/net/busacodata visualization

ilustrarea fenomenelor optice – Isaac Newtonconform Robin (1992)

Dr.

Sab

in B

ura

ga


Origini

diagrame abstracte

privesc informații non-fizice

un exemplu timpuriu: Playfair (1786)

Dr.

Sab

in B

ura

ga


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


Origini

statistica

analiza exploratorie a datelor (multi-dimensionale)

Tukey (1977), Cleveland & McGill (1988)

Dr.

Sab

in B

ura

ga


Origini

vizualizarea științifică

instrumente software analitice

pentru analizarea riguroasă a seturilor de date masive

McCormick & DeFanti (1987)

Dr.

Sab

in B

ura

ga


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


Origini

interacțiunea om-calculator

noi interfețe + interacțiuni cu utilizatorul

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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


“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


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


Design privind vizualizările datelor

Dr.

Sab

in B

ura

ga


Visualization

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

for visual sense making

Dr.

Sab

in B

ura

ga

www.purl.org/net/busacovisualization modeling

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

Taylor & Francis, 2008

Dr.

Sab

in B

ura

ga


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)

Dr.

Sab

in B

ura

ga


Raw Data(seturi de) date de vizualizat,

disponibile în diverse formate – binare/textuale

Dr.

Sab

in B

ura

ga


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

eventual, pot implica diverse operații de filtrare

Dr.

Sab

in B

ura

ga


Data Tablestructuri de date convenabil alese:

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

Dr.

Sab

in B

ura

ga


Data Tablestructuri de date convenabil alese:

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

tabele de obiecte + atributele lor

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


pot fi considerate meta-date

Dr.

Sab

in B

ura

ga


Data Tablereprezentare funcțională (abstractă)

f (input variables) = output variables

Dr.

Sab

in B

ura

ga


Data Tablereprezentare funcțională (abstractă)

f (input variables) = output variables

Year (FilmID = 540) ≡ 1926

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga



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

Dr.

Sab

in B

ura

ga



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



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

pot fi folosiți operatorii aritmetici

Dr.

Sab

in B

ura

ga


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




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

Dr.

Sab

in B

ura

ga




quantitative similarity – variabile privind similaritatea

Dr.

Sab

in B

ura

ga




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

Dr.

Sab

in B

ura

ga


clase de variabile implicate în vizualizarea datelor

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga



e.g., variabilele cantitative pot avea asociate variabile ordinale

durata filmului [0, 400] min. → <SHORT, MEDIUM, LONG>

clase de valori

Dr.

Sab

in B

ura

ga



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

→ < The Wall, Star Wars, Brazil >

sortare

Dr.

Sab

in B

ura

ga


Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


Visual Structuresutilizarea unui vocabular de elemente vizuale:

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

Dr.

Sab

in B

ura

ga


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

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

Dr.

Sab

in B

ura

ga


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

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

eventual, folosind metafore

(revezi cursul anterior)

Dr.

Sab

in B

ura

ga


Visual Structuresspatial substrate

marksconnectionenclosure

retinal propertiestemporal encoding

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga



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


Dr.

Sab

in B

ura

ga



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



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

Dr.

Sab

in B

ura

ga


Visual Structuresmarcaje – marks

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

Dr.

Sab

in B

ura

ga


Visual Structurestipuri de marcaje – marks

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


discuție

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


Visual Structuresconectori & zone – connection & enclosure

zonele pot fi utilizate pentru ierarhii, contururi, diagrame Venn

Dr.

Sab

in B

ura

ga


Visual Structuresproprietăți perceptibile – retinal properties

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

Dr.

Sab

in B

ura

ga


po

dio

.co

m/s

ite/

crea

tive

-ro

uti

nes

Dr.

Sab

in B

ura

ga




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

transparență, poziționare (arrangement)

Dr.

Sab

in B

ura

ga


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/

Dr.

Sab

in B

ura

ga




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

230 (Action) → P (Red)

Dr.

Sab

in B

ura

ga


Visual Structurescodificare 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


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

conform necesităților aplicației / scopului utilizatorului

Dr.

Sab

in B

ura

ga


Viewspercepute de utilizatorul final

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

Dr.

Sab

in B

ura

ga


“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


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

http://internet-map.net/

Dr.

Sab

in B

ura

ga


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


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

eludează criteriul de expresivitate

Dr.

Sab

in B

ura

ga


http://pbfcomics.com/246/

(în loc de) pauză

Dr.

Sab

in B

ura

ga


Care sunt procesele implicateîn vizualizarea datelor?

Dr.

Sab

in B

ura

ga

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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


Parse

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

eventual, ordonarea lor în categorii de interes

Dr.

Sab

in B

ura

ga


Filter

păstrarea exclusiv a datelor de interes

poate implica eliminarea „zgomotului” (noise reduction)

Dr.

Sab

in B

ura

ga


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


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


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


Interact

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

Dr.

Sab

in B

ura

ga


mash-ups

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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


Am putea clasifica

metodele de vizualizare

a informațiilor? htt

p:/

/bl.o

cks.

org

/mb

ost

ock

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga



percepții directe

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

2D scatterplots – valori discrete…

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga



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

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

Dr.

Sab

in B

ura

ga



percepții directe

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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga



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



percepții complexe (articulated reading)

pot cauza probleme

de interpretare

Dr.

Sab

in B

ura

ga


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

O’Connor & Biewald, 2009

Dr.

Sab

in B

ura

ga



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


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



percepții complexe

figurări de rețele (grafuri)

Dr.

Sab

in B

ura

ga


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/

Dr.

Sab

in B

ura

ga



percepții complexe

reprezentarea timpului

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

Dr.

Sab

in B

ura

ga


studiu de caz

http://hereistoday.com/

Dr.

Sab

in B

ura

ga


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

studiu de caz

Dr.

Sab

in B

ura

ga


Structuri vizuale compuse

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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga



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

Dr.

Sab

in B

ura

ga



compunere recursivă

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

Dr.

Sab

in B

ura

ga


organizarea tuturor perechilor de informații corelate

Dr.

Sab

in B

ura

ga




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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga




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

Dr.

Sab

in B

ura

ga


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


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

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

Dr.

Sab

in B

ura

ga


„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

Dr.

Sab

in B

ura

ga


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


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

Dr.

Sab

in B

ura

ga


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


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/

Dr.

Sab

in B

ura

ga

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)

Dr.

Sab

in B

ura

ga


studiu de caz

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

Dr.

Sab

in B

ura

ga


studiu de caz

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

Dr.

Sab

in B

ura

ga


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


studiu de caz

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

Dr.

Sab

in B

ura

ga


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

studiu de caz

Dr.

Sab

in B

ura

ga


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


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

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/

Dr.

Sab

in B

ura

ga


Sfat pragmatic: etichetarea corespunzătoare

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

Dr.

Sab

in B

ura

ga


History of Rock Musicwww.svds.com/rockandroll/

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


studiu de caz

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

https://human.biodigital.com/

Dr.

Sab

in B

ura

ga

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/

Dr.

Sab

in B

ura

ga


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

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

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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga

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

Dr.

Sab

in B

ura

ga

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/

Dr.

Sab

in B

ura

ga


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

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

test scris #1 (T1)

Dr.

Sab

in B

ura

ga


episodul viitor:(re)găsirea resurselor Web