la nivel de clientbusaco/teach/courses/cliw/...ga .ro / ~ co volum –cantitate mare de date...

profs.in

fo.uaic.ro/~busa

Dezvoltarea aplicațiilor Webla nivel de client

vizualizarea datelor

o privire de ansamblu

i.imgur.com/9VkFoH5.png

profs.in

fo.uaic.ro/~busa

“Above all else show the data.”

Edward R. Tufte

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

Realitate

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

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

volum – cantitate mare de datevelocitate – date procesate continuu în timp-real

varietate – date (ne-/semi-)structurate eterogene în formate multiple, provenind din surse diverseveracitate – incertitudine + neîncredere în date

validitate – relevanța datelorvolatilitate – modificarea constantă a datelor de intrare

valoare – aportul datelor și analiza acestora

profs.in

fo.uaic.ro/~busa

volum – cantitate mare de datevelocitate – date procesate continuu în timp-real

varietate – date (ne-/semi-)structurate eterogene în formate multiple, provenind din surse diverseveracitate – incertitudine + neîncredere în date

validitate – relevanța datelorvolatilitate – modificarea constantă a datelor de intrare

valoare – aportul datelor și analiza acestora

big datapreluarea și prelucrarea eficientă a datelor din

surse multiple (uzual, distribuite) – e.g., de la senzori, dispozitive (mobile), rețele de calculatoare,

aplicații sociale, echipamente etc.

profs.in

fo.uaic.ro/~busa

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/

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

Ce reprezintă vizualizarea datelor?

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

informa-tion

design

data per-ceptuali-

zation

data visuali-zation

scientific visuali-zation

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

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

reducerea căutării informațiilor de interes

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

codificarea informațiilor în cadrul unui mediu interactiv

www.informationisbeautiful.net/visualizations/worlds-biggest-data-breaches-hacks/

profs.in

fo.uaic.ro/~busa

Beneficii: monitorizarea evoluției datelor/cunoștințelor

1 ian. 2013(CSS: 35 KB, JS: 207 KB)

15 dec. 2015(CSS: 76 KB, JS: 363 KB)

statistici pentru desktop: httparchive.org/compare.php

1 oct. 2016(CSS: 76 KB, JS: 410 KB)

15 dec. 2017(CSS: 98 KB, JS: 504 KB)

profs.in

fo.uaic.ro/~busa

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

Web semantic)

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

profs.in

fo.uaic.ro/~busa

Beneficii: 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)

profs.in

fo.uaic.ro/~busa

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

reliefarea unor tendințe (trends)

www.populationpyramid.net

profs.in

fo.uaic.ro/~busa

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

Universcale (Nikon): www.nikon.com/about/sp/universcale/

profs.in

fo.uaic.ro/~busa

oferirea de perspective asupra unui subiect/domeniu

V. Markovtsev, Daily commit activity on GitHub (2017) – blog.sourced.tech/post/activity_hours/

profs.in

fo.uaic.ro/~busa

Alte beneficii – adaptare după N. Chibana (2015):stimularea imaginației utilizatorului (“what if…?”)

Anon (2018) – regizor: Andrew Niccol: www.imdb.com/title/tt5397194/

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

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

imagini oferite de Wikimedia Commons

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

codata visualization

ilustrarea fenomenelor optice – Isaac Newtonconform Robin (1992)

profs.in

fo.uaic.ro/~busa

Origini

diagrame abstracte

vizează informații non-fizice

profs.in

fo.uaic.ro/~busa

un exemplu timpuriu: importuri/exporturi de mărfuri W. Playfair, The Commercial and Political Atlas (1786)

profs.in

fo.uaic.ro/~busa

Origini

design vizual + grafice privind datele

principii de proiectare a vizualizării datelor (infovis)

Edward Tufte (1983, 1990, 1997)

profs.in

fo.uaic.ro/~busa

Origini

statistica

analiza exploratorie a datelor (multi-dimensionale)

Tukey (1977), Cleveland & McGill (1988)

profs.in

fo.uaic.ro/~busa

Origini

vizualizarea științifică

instrumente software analitice

pentru analizarea riguroasă a seturilor de date masive

McCormick & DeFanti (1987)

profs.in

fo.uaic.ro/~busa

Origini

grafica computațională + inteligența artificială

proiectarea automată a prezentărilor vizuale ale datelor

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

profs.in

fo.uaic.ro/~busa

Origini

interacțiunea om-calculator

noi interfețe + interacțiuni cu utilizatorul

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

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

“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

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

Design privind vizualizările datelor

profs.in

fo.uaic.ro/~busa

Visualization

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

for visual sense making

profs.in

fo.uaic.ro/~busa

Algorithm Visualizer – algo-visualizer.jasonpark.me

profs.in

fo.uaic.ro/~busa

task• questions• goals• assumptions

data• physical data type• conceptual data type

domain• meta-data• semantics• conventions

image• visual channel• graphical

representations

processingalgorithms

mappingvisual encoding

vizualizarea datelor: privire de ansambluadaptare după Jeffrey Heer, Data Visualization (2017)

courses.cs.washington.edu/courses/cse442/17au/

profs.in

fo.uaic.ro/~busa

raw data

datatables

visualstructs.

views data

transformationsvisual

mappingsview

transformations

Data Visual Form

Human Interaction

visualization modeling

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

Taylor & Francis, 2008

profs.in

fo.uaic.ro/~busa

Raw Datadate inițiale, neprelucrate

Data Tablesstructuri de date: relații + meta-date

Visual Structuresstructuri vizuale: elemente grafice

Viewsvizualizări (interactive) percepute de utilizator(i)

profs.in

fo.uaic.ro/~busa

covisualization modeling

Raw Data(seturi de) date de vizualizat,

disponibile în diverse formate – binare/textuale

raw data

datatables

visualstructs.

views data

mappingsview

transformations

Data Visual Form

Human Interaction

profs.in

fo.uaic.ro/~busa

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

eventual, pot implica diverse operații de filtrare

raw data

datatables

visualstructs.

views data

mappingsview

transformations

Data Visual Form

Human Interaction

profs.in

fo.uaic.ro/~busa

Data Tablestructuri de date convenabil alese:

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

raw data

datatables

visualstructs.

views data

mappingsview

transformations

Data Visual Form

Human Interaction

profs.in

fo.uaic.ro/~busa

Data Tablestructuri de date convenabil alese:

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

tabele de obiecte + atributele lor

raw data

datatables

visualstructs.

views data

mappingsview

transformations

Data Visual Form

Human Interaction

profs.in

fo.uaic.ro/~busa

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

raw data

datatables

visualstructs.

views data

mappingsview

transformations

Data Visual Form

Human Interaction

profs.in

fo.uaic.ro/~busa

pot fi considerate meta-date

FilmID 0083658 0088846 1189073 0103767

Title Blade Runner Brazil La piel que habito Baraka

Director Ridley Scott Terry Gilliam Pedro Almodóvar Ron Fricke

Actor Harrison Ford Jonathan Pryce Antonio Banderas N/A

Actress Sean Young Kim Greist Elena Anaya N/A

Year 1982 1985 2011 1992

Length 117 142 120 96

IMDB Popularity 8.2 8.0 7.6 8.6

Metascore 89 88 70 N/A

Genre Sci-Fi, Thriller Drama, Sci-Fi Drama, Thriller Documentary

profs.in

fo.uaic.ro/~busa

Data Tablereprezentare funcțională (abstractă)

f (input variables) = output variables

TopRatedMovies (FilmID = 0062622)91

raw data

datatables

visualstructs.

views data

mappingsview

transformations

Data Visual Form

Human Interaction

2001: A Space Odyssey este un film SF bine cotat

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

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

pot fi folosiți operatorii aritmetici

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

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 corescacs.usc.edu/education/cs596.html

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

quantitative similarity – variabile vizând similaritatea

profs.in

fo.uaic.ro/~busa

quantitative timeordinal time

variabile referitoare la timp

profs.in

fo.uaic.ro/~busa

vizualizarea dinamicii tranzacțiilor referitoare la monede virtuale (cryptocurrencies)

whalepool.io:8080/coinorama/ cryptomaps.org

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

clase de variabile implicate în vizualizarea datelor

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

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

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

clase de valori

profs.in

fo.uaic.ro/~busa

e.g., variabilele nominale pot fi convertite la valori ordinale

titluri de filme { Gattaca, Brazil, The Wall, Minority Report }→ < The Wall, Minority Report, Gatacca, Brazil >

sortare

profs.in

fo.uaic.ro/~busa

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

raw data

datatables

visualstructs.

views data

mappingsview

transformations

Data Visual Form

Human Interaction

profs.in

fo.uaic.ro/~busa

diverse exemplificări oferite de Explained Visuallysetosa.io/ev/

profs.in

fo.uaic.ro/~busa

Visual Structuresutilizarea unui vocabular de elemente vizuale:

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

raw data

datatables

visualstructs.

views data

mappingsview

transformations

Data Visual Form

Human Interaction

profs.in

fo.uaic.ro/~busa

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

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

raw data

datatables

visualstructs.

views data

mappingsview

transformations

Data Visual Form

Human Interaction

uzual, via metafore + idiomuri(revezi cursul despre design Web)

profs.in

fo.uaic.ro/~busa

Visual Structures

substrat spațial – spatial substratemarcatori – marks

conectori și zone – connection & enclosureproprietăți perceptibile – retinal propertiescodificare temporală – temporal encoding

profs.in

fo.uaic.ro/~busa

Visual Structures

substrat spațial – spatial substrate

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

tip de scală ↔ axe spațiale

profs.in

fo.uaic.ro/~busa

Visual Structures

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ă

profs.in

fo.uaic.ro/~busa

Visual Structures

axe spațiale lineare ori radiale

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

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

Visual Structures

marcaje – marks

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

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

discuție

profs.in

fo.uaic.ro/~busa

Visual Structures

conectori și 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

profs.in

fo.uaic.ro/~busa

Visual Structures

conectori și zone – connection & enclosure

zonele pot fi utilizate pentru ierarhii, contururi, diagrame Venn

profs.in

fo.uaic.ro/~busa

enclosure diagrambl.ocks.org/mbostock/4063530

figurarea unei ierarhii de entități

aparținând unor clase

profs.in

fo.uaic.ro/~busa

Visual Structures

proprietăți perceptibile – retinal properties

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

profs.in

fo.uaic.ro/~busa

Visual Structures

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

exemplu: folosirea culorii pentru a codifica genul filmuluiFilmID (Genre) → P (Color)

posibile convenții: Drama ⬛ Sci-Fi ⬛ War ⬛

profs.in

fo.uaic.ro/~busa

profs.in

fo.uaic.ro/~busa

Visual Structures

aspecte de interes: claritate (crispness)

rezoluție transparență

poziționare (arrangement)

profs.in

fo.uaic.ro/~busa

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)

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

profs.in

fo.uaic.ro/~busa

Visual Structures

codificare temporală – temporal encoding

date referitoare la timp ce trebuie vizualizateversus

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

profs.in

fo.uaic.ro/~busa

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

conform necesităților aplicației / scopului utilizatorului

raw data

datatables

visualstructs.

views data

mappingsview

transformations

Data Visual Form

Human Interaction

profs.in

fo.uaic.ro/~busa

Viewspercepute de utilizatorul final

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

raw data

datatables

visualstructs.

views data

mappingsview

transformations

Data Visual Form

Human Interaction

profs.in

fo.uaic.ro/~busa

“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

profs.in

fo.uaic.ro/~busa

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

internet-map.net

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

http://pbfcomics.com/comics/bee/

(în loc de) pauză

profs.in

fo.uaic.ro/~busa

Care sunt procesele implicateîn vizualizarea datelor?

www.concerthotels.com/100-years-of-rock/

profs.in

fo.uaic.ro/~busa

covisualization 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

profs.in

fo.uaic.ro/~busa

Acquire

obținerea datelor ce trebuie analizate și vizualizate

de studiat prezentările Tamarei Munzner (2018)www.cs.ubc.ca/~tmm/talks.html

profs.in

fo.uaic.ro/~busa

Surse deschise de date disponibile pe Web – exemplificări:Academic Torrents

academictorrents.com

Awesome Public Datasetsgithub.com/caesar0301/awesome-public-datasets

Awesome JSON Datasetsgithub.com/jdorfman/awesome-json-datasets

Common Crawlcommoncrawl.org/the-data/

DataHubdatahub.io/dataset

Kaggle Datasetswww.kaggle.com/datasets

profs.in

fo.uaic.ro/~busa

covisualization processesDate deschise oferite de companii – exemple:

GitHub Archivewww.gharchive.org

Google BigQuery Public Datasetscloud.google.com/bigquery/public-data/

Microsoft Azure: Public Datasetsdocs.microsoft.com/azure/sql-database/sql-database-public-data-sets

Registry of Open Data on Amazon Web Servicesregistry.opendata.aws

profs.in

fo.uaic.ro/~busa

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

eventual, ordonarea lor în categorii de interes

profs.in

fo.uaic.ro/~busa

Filter

păstrarea exclusiv a datelor de interes

poate implica eliminarea „zgomotului” (noise reduction)

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

Represent

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

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

profs.in

fo.uaic.ro/~busa

Refine

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

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

profs.in

fo.uaic.ro/~busa

Interact

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

profs.in

fo.uaic.ro/~busa

mash-ups

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

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

Am putea clasifica

metodele de vizualizare

a informațiilor?

profs.in

fo.uaic.ro/~busa

Structuri vizuale simple

percepții directe (direct reading)

utilizarea unei singure variabile [X]:liste, trasări de puncte (1D scatterplots),

pie charts, donut charts, distribuții, box plots,…

profs.in

fo.uaic.ro/~busa

discuție

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

profs.in

fo.uaic.ro/~busa

percepții directe

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

2D scatterplots – valori discrete…

profs.in

fo.uaic.ro/~busa

exemplificare:vizualizări 2D generate cu Google Data Studio

www.google.com/analytics/data-studio/

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

studiul comportamentului rețelelor neuronale – aici, clasificarea datelor – direct în cadrul browser-ului Web

playground.tensorflow.org

profs.in

fo.uaic.ro/~busa

covisualization taxonomy

retinal scatterplot – aici: heat mapsecviz.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

profs.in

fo.uaic.ro/~busa

percepții directe

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

profs.in

fo.uaic.ro/~busa

o vizualizare 3D a densității populației dintr-un orașvia instrumentul Web Kepler – kepler.gl

profs.in

fo.uaic.ro/~busa

percepții complexe (articulated reading)

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

[XYZRn-1]: 3D retinal scatterplots

profs.in

fo.uaic.ro/~busa

Krona – vizualizare științifică exploratorie de tip pie charta datelor ierarhice (taxonomice): github.com/marbl/Krona

profs.in

fo.uaic.ro/~busa

vizualizare 3D a unui atac ciberneticzones-maps.bid/network-attack-map/the-best-live-cyber-attack-maps-cyberwarzone.html

profs.in

fo.uaic.ro/~busa

percepții complexe (articulated reading)

pot cauza probleme

de interpretare

profs.in

fo.uaic.ro/~busa

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

O’Connor & Biewald, 2009

profs.in

fo.uaic.ro/~busa

percepții complexe

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

hyperbolic trees, TreeMaps, cone trees

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

percepții complexe

figurări de rețele (grafuri)

profs.in

fo.uaic.ro/~busa

vizualizarea cartografică a tipurilor și volumului atacurilor cibernetice:

zones-maps.bid/network-attack-map.html

altă exemplificare: graphofthings.org

profs.in

fo.uaic.ro/~busa

percepții complexe

reprezentarea timpului

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

profs.in

fo.uaic.ro/~busa

studiu de caz

hereistoday.com

profs.in

fo.uaic.ro/~busa

Definitive Daft Punkthemaninblue.com/writing/perspective/2011/05/12/

studiu de caz

profs.in

fo.uaic.ro/~busa

Structuri vizuale compuse

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

profs.in

fo.uaic.ro/~busa

o vizualizare paralelă bazată pe o coordonată a datelor oferite de un fișier de jurnalizare a unui firewall

context: security visualization – secviz.org

profs.in

fo.uaic.ro/~busa

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

vizualizarea ontologiilorowlgred.lumii.lv

profs.in

fo.uaic.ro/~busa

compunere recursivă

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

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

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

context mai larg: realitatea mixtă (mixed reality)

profs.in

fo.uaic.ro/~busa

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

Firefox Reality (Mozilla, 2018): mixedreality.mozilla.org

resurse de interes: webvr.rocks + next.reality.news

profs.in

fo.uaic.ro/~busa

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)

profs.in

fo.uaic.ro/~busa

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

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

profs.in

fo.uaic.ro/~busa

„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: mbostock.github.io/protovis/ex/brush.html

profs.in

fo.uaic.ro/~busa

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

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

agregare selectivă

profs.in

fo.uaic.ro/~busa

Gapminder – www.gapminder.org/tools

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

micro-macro readingsprezentarea 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/

profs.in

fo.uaic.ro/~busa

coremarci

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

profs.in

fo.uaic.ro/~busa

coremarci

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)

profs.in

fo.uaic.ro/~busa

coconclusions

chartjunk using a large area and a lot of “ink” (many symbols and lines)

to show only 5 hard-to-read numbers

exemple concrete: junkcharts.typepad.com

profs.in

fo.uaic.ro/~busa

coremarci

Sfat pragmatic: etichetarea corespunzătoare

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

profs.in

fo.uaic.ro/~busa

coconcluzii

History of Rock Musicwww.svds.com/rockandroll/

profs.in

fo.uaic.ro/~busa

coremarci

Sfat pragmatic: cunoașterea audienței

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

profs.in

fo.uaic.ro/~busa

coconcluzii

studiu de caz

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

human.biodigital.com

profs.in

fo.uaic.ro/~busa

coremarci

“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, 2017www.autodeskresearch.com/publications/samestats

profs.in

fo.uaic.ro/~busa

coinstrumente 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

profs.in

fo.uaic.ro/~busa

Biblioteci de vizualizare 3D a datelorCesium (3D globes and maps) – cesiumjs.org

PhiloGL – www.senchalabs.org/philogl/

Three.js – threejs.org

profs.in

fo.uaic.ro/~busa

A se experimenta și…

Data Visualization Selected Toolsselection.datavisualization.ch/

Data Visualization Tools for the Webgithub.com/showcases/data-visualization

JS Visualization Librarieswww.javascripting.com/search?q=visualization

profs.in

fo.uaic.ro/~busa

physical visualizationsreprezentările vizuale ale datelor pot fi chiar fizice

(eventual, generate de o imprimantă 3D)

alte studii de caz: dataphys.org/list/

Nathalie Miebach (2007) Leo Smith (2018)

profs.in

fo.uaic.ro/~busa

coconcluzii

Scopuri principale ale vizualizării informațiilor

vizualizare exploratorie(exploratory visualization)

descoperirea tiparelor, tendințelor ori sub-problemelor în cadrul unei mulțimi de date

profs.in

fo.uaic.ro/~busa

coconcluzii

studiu de caz

Food Poisoning Outbreaks (Ruslan Kamolov, 2015)

profs.in

fo.uaic.ro/~busa

coconcluzii

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

profs.in

fo.uaic.ro/~busa

coconcluzii

studiu de caz

explicarea unei legi electorale prin intermediul vizualizării

RAW Graphsgithub.com/densitydesign/raw

profs.in

fo.uaic.ro/~busa

Data + Design – infoactive.co/data-design

Information is Beautiful – www.informationisbeautiful.net

Data Viz Project – datavizproject.com

Awesome Visualization Researchgithub.com/mathisonian/awesome-visualization-research

Data Visualization Catalogue – datavizcatalogue.com

Data Viz Done Right – www.datavizdoneright.com

Flowing Data – flowingdata.com

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

profs.in

fo.uaic.ro/~busa

episodul viitor: limbajul JavaScript

la nivel de clientbusaco/teach/courses/cliw/...ga .ro / ~ co volum –cantitate mare de date...

Documents

cliw 2015-2016 (9/13) ingineria dezvoltării aplicațiilor...

name birth date death date name birth date death · pdf...

upcoming date - claytonkendallhosting.com · upcoming date...

· typhoid usp 2 oate anthrax mm and 2 week week date date...

as of date start date end date€¦ · legal name as of...

ticket template word€¦ · web view[your. event name]...

· tipul înregistrare (record pascal, structurate...

cliw 2015-2016 (1/13) interacțiune web: concepte, context,...

mmmmmmmmmm tu. tu. tu. tu. tu. tu. tu. tu. tu. tu ... ·...

unit 7 lesson 1 · unit 7 lesson 2 sequencing with scrat...

cliw 2015-2016 (6/13) (re)găsirea resurselor web. de la...

cliw 2014—2015 (2/12): arhitectura navigatorului web

produsele structurate erste group pe bursa de valori

cliw 2015-2016 (11/13) programare web. api-uri javascript...

ionescu, alexandra politic în ......partidele politice se...

cliw 2015-2016 (13/13) perspective web la nivel de client....

unit 8 lesson 1unit 8 lesson 27 virtual pet with sprite lab...

la nivel de clientbusaco/teach/courses/cliw/... ·...

ch · web viewname date class name date class name date...

he c p 9/11 m s c -...