CLIW 2017-2018 (4/12) Vizualizarea datelor – o privire de ansamblu

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web
la nivel de client
vizualizarea datelor
o privire de ansamblu
i.imgur.com/9VkFoH5.png

“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, dinamicitate
adaptare după http://blog.sqlauthority.com
data
variety
data
velocity
data
volume
real-time (stream)
interval (continuous)
batch
(atomic)
sparse
(discrete)
unstructured
RDBMS
semi-
struc-
tured
XML
multi-
media
JSON
CSV
bi-
nary
KB
MBGB
TBEB
PBZB
YB

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

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 (DataInformationKnowledgeWisdom)
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
R. Kosara, 2008 – 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
www.informationisbeautiful.net/visualizations/worlds-biggest-data-breaches-hacks/

monitorizarea evoluției datelor/cunoștințelor

Beneficii:
realizarea de inferențe
(contexte: inteligența artificială,
Web semantic)
decizii + predicții
(context: învățare automată)
www.r2d3.us/visual-intro-to-machine-learning-part-1/

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
Universcale (Nikon): www.nikon.com/about/sp/universcale/

oferirea de perspective asupra unui subiect/domeniu
V. Markovtsev, Daily commit activity on GitHub (2017) – blog.sourced.tech/post/activity_hours/

stimularea imaginației utilizatorului (“what if…?”)
www.lumbre.tv/projects/view/classified

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 înregistra
observații, a determina relații, a explica metodologia
unor experimente, a clasifica și conceptualiza fenomene

data visualization
ilustrarea fenomenelor optice – Isaac Newton
conform Robin (1992)

Origini
diagrame abstracte
vizează informații non-fizice

data visualization
un exemplu timpuriu: importuri/exporturi de mărfuri
W. Playfair, The Commercial and Political Atlas (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
eagereyes.org/blog/2010/the-difference-between-infographics-and-visualization

data visualization
“The nature of the visualization
depends on which relationship is dominant.”
N. Iliinsky & J. Steele, Designing Data Visualizations, O’Reilly, 2011
Data
User
De-
sig-
ner
informative
visual art
persuasive

data visualization
Data
User
De-
sig-
ner
informative
visual art
persuasive
data/info viz infographics
e.g., generative art
vezi și www.slideshare.net/busaco/generative-art-a-gentle-introduction

Design privind vizualizările datelor

Visualization
the mapping of data to visual form
that supports human interaction in a workplace
for visual sense making

Algorithm Visualizer – algo-visualizer.jasonpark.me

task
• questions
• goals
• assumptions
data
• physical data type
• conceptual data type
domain
• meta-data
• semantics
• conventions
image
• visual channel
• graphical
representations
processing
algorithms
mapping
visual encoding
vizualizarea datelor: privire de ansamblu
adaptare după Jeffrey Heer, Data Visualization (2017)
courses.cs.washington.edu/courses/cse442/17au/

raw
data
data
tables
visual
structs.
views

data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction
visualization modeling
Stuart Card, “Information Visualization”,
Human-Computer Interaction Handbook (2nd Edition),
Taylor & Francis, 2008

Raw Data
date inițiale, neprelucrate

Data Tables
structuri de date: relații + meta-date

Visual Structures
structuri vizuale: elemente grafice

Views
vizualizări (interactive) percepute de utilizator

Raw Data
(seturi de) date de vizualizat,
disponibile în diverse formate – binare/textuale
raw
data
data
tables
visual
structs.
views

data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction

Data Transformations
oferă vectori normalizați într-un spațiu N dimensional
eventual, pot implica diverse operații de filtrare
raw
data
data
tables
visual
structs.
views

data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction

Data Table
structuri de date convenabil alese:
relații (depinzând de variabilele considerate) și meta-date
raw
data
data
tables
visual
structs.
views

data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction

Data Table
structuri de date convenabil alese:
relații (depinzând de variabilele considerate) și meta-date
tabele de obiecte + atributele lor
raw
data
data
tables
visual
structs.
views

data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction

Data Table
exemplu pentru vizualizări de producții cinematografice
obiecte de bază = instanțe ale conceptului „film”
atribute (proprietăți) asociate fiecărui obiect – aici, film:
titlu, an al apariției, gen, durată, actori,…
raw
data
data
tables
visual
structs.
views

data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction

pot fi considerate
meta-date
FilmID 0083658 0088846 3841424 0770802
Title Blade Runner Brazil Under sandet Samsara
Director Ridley Scott Terry Gilliam Martin Zandvliet Ron Fricke
Actor Harrison Ford Jonathan Pryce Louis Hofmann N/A
Actress Sean Young Kim Greist N/A N/A
Year 1982 1985 2015 2011
Length 117 142 100 102
IMDB Popularity 8.2 8.0 7.8 8.5
Metascore 89 88 75 65
Genre Sci-Fi, Thriller Drama, Sci-Fi Drama, War Documentary

Data Table
reprezentare funcțională (abstractă)
f (input variables) = output variables
Year (FilmID = 3841424)2015
raw
data
data
tables
visual
structs.
views

data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction

Data Table
variabilele implică o scală de măsurare a valorii lor

Data Table
o variabilă nominală N este o mulțime neordonată
e.g., titluri de film { Blade Runner, Brazil, The Wall,…}
pot fi utilizați operatorii de (in)egalitate

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

Data Table
o variabilă cantitativă Q este un interval numeric
e.g., durata filmului [0, 420]
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

Visualization of 112 million-atom reactive molecular dynamics
simulation to study high-temperature oxidation of a silicon-carbide
nanoparticle on 786,432 IBM Blue Gene/Q cores
cacs.usc.edu/education/cs596.html

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

vizualizări cartografice 3D via Google Maps API
developers.google.com/maps/documentation/

Data Table
quantitative similarity – variabile vizând similaritatea

Data Table
quantitative time
ordinal time
variabile referitoare la timp

vizualizarea dinamicii tranzacțiilor
referitoare la monede virtuale (cryptocurrencies)
whalepool.io:8080/coinorama/  cryptomaps.org

Data Table
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 Table
anumite scale de valori pot fi alterate via transformări

Data Table
e.g., variabilele cantitative
pot avea asociate variabile ordinale
durata filmului [0, 420] min. → <SHORT, MEDIUM, LONG>
clase de valori

Data Table
e.g., variabilele nominale pot fi convertite la valori ordinale
titluri de filme { Samsara, Brazil, The Wall, Hugo }
→ < The Wall, Samsara, Hugo, Brazil >
sortare

Visual Mappings
crearea unor abstracțiuni analitice în scopul vizualizării
de la coordonate spațiale
la suprafețe ale unui „peisaj” informațional 2D/3D
raw
data
data
tables
visual
structs.
views

data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction

diverse exemplificări oferite de Explained Visually
http://setosa.io/ev/

Visual Structures
utilizarea unui vocabular de elemente vizuale:
substraturi spațiale + marcaje + proprietăți grafice
raw
data
data
tables
visual
structs.
views

data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction

Visual Structures
scop: asocierea sistematică a relațiilor dintre date
într-o formă vizuală
codificări vizuale (visual encodings)
raw
data
data
tables
visual
structs.
views

data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction
uzual, via metafore & idiomuri
(revezi cursul despre design Web)

Visual Structures
substrat spațial – spatial substrate
marcatori – marks
conectori & zone – connection & enclosure
proprietăți perceptibile – retinal properties
codificare temporală – temporal encoding

Visual Structures
spațiul liber disponibil (empty space) – i.e. container –
poate fi considerat ca având o structură metrică
tip de scală ↔ axe spațiale

Visual Structures
axe spațiale importante
U – valori nestructurate nicio axă
N – valori nominale regiune având sub-regiuni
O – valori ordinale ordinea sub-regiunilor e importantă
Q – valori cantitative o regiune are atașată o metrică

Visual Structures
axe spațiale lineare ori radiale
pot implica orice sisteme de coordonate spațiale folosite
e.g., recurgerea la coordonate carteziene

Visual Structures
axe spațiale lineare ori radiale
exemplificare:
utilizarea a 2 axe ortogonale cantitative
pentru vizualizarea popularității unui film în timp
Year → QX IMDB Popularity → QY

Visual Structures
marcaje – marks
entități vizibile ce apar în spațiu:
puncte, linii, arii, volume

Visual Structures
tipuri de marcaje – marks
puncte (points) ⬛ ⭐ ⚫
linii (lines)
arii (areas)
volume (volumes)
marcajele de tip punct și linie ocupă loc în spațiu
și pot avea asociate proprietăți – precum forma

discuție

Visual Structures
punctele și liniile pot fi folosite pentru a desemna
diverse structuri topologice – e.g., grafuri, arbori –
specificând relațiile dintre obiecte

Visual Structures
zonele pot fi utilizate
pentru ierarhii, contururi, diagrame Venn

figurarea unei
ierarhii de entități
aparținând
unor clase
enclosure diagram
bl.ocks.org/mbostock/4063530

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

Visual Structures
poziție, mărime, orientare, culoare, textură, formă
exemplu: folosirea culorii pentru a codifica genul filmului
FilmID (Genre) → P (Color)
posibile convenții: Drama ⬛ Sci-Fi ⬛ War ⬛

Dr.SabinBuragawww.purl.org/net/busacopodio.com/site/creative-routines

Visual Structures
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/

Visual Structures
codificare temporală – temporal encoding
date referitoare la timp ce trebuie vizualizate
versus
animație – asocierea dintre timp și valoarea unei variabile

View Transformations
oferă diverse maniere de vizualizare (reprezentări grafice)
conform necesităților aplicației / scopului utilizatorului
raw
data
data
tables
visual
structs.
views

data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction

Views
percepute de utilizatorul final
eventual, pot fi ajustate via diverși parametri grafici
(poziționare, scalare, decupare, rotire,…)
raw
data
data
tables
visual
structs.
views

data
transformations
visual
mappings
view
transformations
Data Visual Form
Human Interaction

“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
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

corelații incorecte – asocierile dintre date și forma vizuală
eludează criteriul de expresivitate

http://pbfcomics.com/comics/bee/
(în loc de) pauză

Care sunt procesele implicate
în vizualizarea datelor?
www.concerthotels.com/100-years-of-rock/

visualization processes
acquire obținerea datelor inițiale („brute”)
parse procesarea datelor
filter filtrări conform necesităților
mine obținerea datelor relevante
represent alegerea reprezentărilor vizuale
refine rafinarea soluțiilor de vizualizare
interact interacțiunea cu utilizatorul
conform Ben Fry, 2008

Acquire
obținerea datelor ce trebuie analizate și vizualizate
de studiat Tamara Munzner, Visualization Analysis & Design (2017)
http://www.cs.ubc.ca/~tmm/talks.html#vad17stat545

Surse deschise de date – exemplificări:
Academic Torrents
academictorrents.com
Awesome Public Datasets
github.com/caesar0301/awesome-public-datasets
Awesome JSON Datasets
github.com/jdorfman/awesome-json-datasets
Common Crawl
commoncrawl.org/the-data/
DataHub
datahub.io/dataset
Date guvernamentale vizând România
data.gov.ro/dataset

Parse
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)

Mine
aplicarea unor metode statistice și/sau vizând data mining
pentru 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)
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?
http://bl.ocks.org/mbostock

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 eagereyes.org/techniques/pie-charts
commons.wikimedia.org/wiki/File:World_Oil_Reserves_by_Country-pie_chart.svg

percepții directe
recurgerea la 2 variabile [XY]:
obiecte bidimensionale (histograme) – valori continue
2D scatterplots – valori discrete
…

exemplificare:
vizualizări 2D generate cu Google Data Studio
www.google.com/analytics/data-studio/

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

studiul comportamentului rețelelor neuronale – aici,
clasificarea datelor – direct în cadrul browser-ului Web
http://playground.tensorflow.org/

visualization taxonomy
retinal scatterplot – aici: heat map
http://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)

percepții complexe (articulated reading)
utilizarea a n variabile
[XYRn-2]: 2D retinal scatterplots
[XYZRn-1]: 3D retinal scatterplots

vizualizare 3D a relațiilor dintre traduceri de texte cu instrumentul
Tensor Flow (Google) – projector.tensorflow.org

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 explora și http://graphofthings.org/

percepții complexe
reprezentarea timpului
valori discrete vs. continue
e.g., calendar, timeline, momente vs. intervale, alternative

studiu de caz
http://hereistoday.com/

Definitive Daft Punk
daftpunk.themaninblue.com
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 firewall
context: security visualization – http://secviz.org/

compoziție vizuală recurgând la 2 axe [XY]: grafuri
vizualizarea ontologiilor
owlgred.lumii.lv/

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

vizualizarea de informații corelate
www.andreykurenkov.com/writing/fun-visualizations-of-stackoverflow/

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

100 Years with the San Francisco Symphony (Adobe)
thewhyaxis.info/music/

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

vizualizări holografice – HoloLens (Microsoft)
www.microsoft.com/hololens/developers

Structuri vizuale interactive
interogări dinamice – interactive queries
vizualizări imagistice – imagery (“magic”) lens
privire generală + detaliere – overview + detail
brushing and linking
extracț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
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 – aici, floricultură
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 – www.gapminder.org/tools

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 readings
prezentarea unor volume mari de date la densități mari
scop: obținerea unei priviri de ansamblu (to see the bigger picture)
medium.com/@dominikus/the-superpower-of-interactive-datavis-a-micro-macro-view-4d027e3bdc71
selfiecity.net/selfiexploratory/

remarci
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

remarci
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)

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

remarci
Sfat pragmatic: etichetarea corespunzătoare
recurgerea la explicații, legende, convenții vizuale etc.

concluzii
History of Rock Music
www.svds.com/rockandroll/

remarci
Sfat pragmatic: cunoașterea audienței
selectarea unor maniere specifice de vizualizare a datelor
în funcție de (tipurile de) utilizatori

concluzii
studiu de caz
vizualizări 3D în cadrul navigatorului Web
ale anatomiei și fiziologiei corpului uman
human.biodigital.com

remarci
“Never trust summary statistics alone;
always visualize your data” (Alberto Cairo, 2016)
deși seturile de date (datasets) au aceleași caracteristici
statistice (e.g., deviație standard, corelație Pearson),
vizualizările acestor seturi de date sunt diferite
detalii în J. Matejka, G. Fitzmaurice, “Same Stats, Different Graphs: Generating Datasets
with Varied Appearance and Identical Statistics through Simulated Annealing”,
ACM SIGCHI Conference on Human Factors in Computing Systems, 2017
www.autodeskresearch.com/publications/samestats

instrumente la nivel de client
Biblioteci de vizualizare 2D a datelor
D3.js (Data-Driven Documents) – d3js.org
extensii D3.js – github.com/wbkd/awesome-d3
Leaflet (mobile-friendly interactive maps) – leafletjs.com/
Raphaël (vector graphics) – raphaeljs.com
Recline (building data apps) – okfnlabs.org/recline/
Sigma (graph drawing) – sigmajs.org
Vis (handling large amounts of dynamic data) – visjs.org

Biblioteci de vizualizare 3D a datelor
Cesium (3D globes and maps) – cesiumjs.org
PhiloGL – www.senchalabs.org/philogl/
Three.js – threejs.org

A se experimenta și…
Data Visualization Selected Tools
selection.datavisualization.ch/
Data Visualization Tools for the Web
github.com/showcases/data-visualization
JS Visualization Libraries
www.javascripting.com/search?q=visualization
jster.net/search?q=visualization

visualization taxonomyremarcă:
reprezentările vizuale
ale datelor pot fi chiar
fizice (i.e. generate
de o imprimantă 3D)
www.3dprintmath.com

concluzii
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

concluzii
studiu de caz
Food Poisoning Outbreaks (Ruslan Kamolov, 2015)

concluzii
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

concluzii
studiu de caz
explicarea unei legi electorale prin intermediul vizualizării
RAW Graphs
github.com/densitydesign/raw

de studiat
WikiViz (tehnici, instrumente, exemple) – www.wikiviz.org
Data + Design – infoactive.co/data-design
Information is Beautiful – www.informationisbeautiful.net
Awesome Visualization Research
github.com/mathisonian/awesome-visualization-research
Flowing Data – flowingdata.com
Resurse privind vizualizarea și explorarea datelor:
tinyurl.com/kr8oxg5
Visualizing Algorithms – bost.ocks.org/mike/algorithms/

episodul viitor: limbajul JavaScript

CLIW 2017-2018 (4/12) Vizualizarea datelor – o privire de ansamblu

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to CLIW 2017-2018 (4/12) Vizualizarea datelor – o privire de ansamblu

Similar to CLIW 2017-2018 (4/12) Vizualizarea datelor – o privire de ansamblu (20)

More from Sabin Buraga

More from Sabin Buraga (20)

CLIW 2017-2018 (4/12) Vizualizarea datelor – o privire de ansamblu