Informatie visualisatie: Les 5

Joris Klerkx - Erik Duval http://hci.cs.kuleuven.be joris.klerkx@cs.kuleuven.be

Human-Computer InteractionDept. ComputerwetenschappenKU Leuven

1

Tegen deze week• Individueel:

• Spreadsheet

• infovis van de week:

• Relevante infovis (inhoud, techniek, etc) voor je eigen project. Wat leer je eruit?

• Per team:

• Slides online plaatsen

• Blogpost - wat geleerd uit feedback, hoe rekening houden ermee? prioritiseer en maak planning

• Implementatie / data verzamelen

• Show & Tell - feedback per groep

• Focus op vragen over de data & de inzichten die je hoopt te winnen

2

A tour through the visualization zoo

Heer,J.,Bostock,M.,&Ogievetsjy,V.(2010,May).ATourthroughtheVisualizaConZoo-AsurveyofpowerfulvisualisaContechniques,fromtheobvioustotheobscure.ACMGraphics,8(5),hNps://queue.acm.org/detail.cfm?id=1805128

Time-series dataSets of values changing over time

Relative changes in time-series data

An index chart is an interactive line chart that shows percentage changes for a collection of time-series data based on a selected index point.

http

://ho

mes

.cs.

was

hing

ton.

edu/

~jhe

er//fi

les/

zoo/

ex/ti

me/

inde

x-ch

art.h

tml

Aggregated time-series data

A stream graph visually summates time-series values

http

://hc

i.sta

nfor

d.ed

u/jh

eer/fi

les/

zoo/

ex/ti

me/

stac

k.ht

ml

Time-series data

Time-series data

Small multiples: showing each series in its own chart.

http

://ho

mes

.cs.

was

hing

ton.

edu/

~jhe

er//fi

les/

zoo/

ex/ti

me/

mul

tiple

s.ht

ml

https://augmenthuman.wordpress.com/portfolio/visualizing-gaming-trends-on-steam/

http://bl.ocks.org/oyyd/859fafc8122977a3afd6

Day-Hours Heatmap

http://www.trulia.com/vis/tru247/

The horizon graph is a technique for increasing the data density of a time-series view while preserving resolution.

Sizing the Horizon: The Effects of Chart Size and Layering on the Graphical Perception of Time Series Visualizations Jeffrey Heer, Nicholas Kong, Maneesh Agrawala ACM Human Factors in Computing Systems (CHI), 2009. pp. 1303 - 1312. Best Paper Award PDF (442K)

http://homes.cs.washington.edu/~jheer//files/zoo/ex/time/horizon.html

http://www.perceptualedge.com/blog/?p=390

A year’s worth of stock prices for 50 separate stocks

Tijdens lezen artikel: ‘kippenvel’ ?

15

http://neuralengr.com/asifr/journals/

Publication counts over time

Statistical DistributionsReveal how a set of numbers is distributed and thus help an analyst better understand the statistical properties of the data

Histograms shows the prevalence of values grouped into bins

Histogram sliders

A stem-and-leaf plot bins numbers according to the first significant digit, and then stacks the values within each bin by the second significant digit.

http

://ho

mes

.cs.

was

hing

ton.

edu/

~jhe

er//fi

les/

zoo/

ex/s

tats

/ste

m-a

nd-le

af.h

tml

http://thesocietypages.org/graphicsociology/2012/11/18/stem-and-leaf-diagrams/

Box-and-whisker plot, which can convey statistical features such as the mean, median, quartile boundaries, or extreme outliers.

http://admin-apps.webofknowledge.com/JCR/help/h_boxplot.html

Statistical distribution of data

The Q-Q plot compares two probability distributions by graphing their quantiles against each other.

http://hci.stanford.edu/jheer/files/zoo/ex/stats/qqplot.html

Representing relationships/correlations among multiple variables.

A scatter plot matrix (SPLOM) uses small multiples of scatter plots showing a set of pairwise relations among variables

http://homes.cs.washington.edu/~jheer//files/zoo/ex/stats/splom.html

graphing every pair of variables in two dimensions

http://homes.cs.washington.edu/~jheer//files/zoo/ex/stats/parallel.html

MapsMostly based upon a cartographic projection: a mathematical function that maps the three-dimensional geometry of the Earth to a two-dimensional image

Other maps knowingly distort or abstract geographic features to tell a richer story or highlight specific data.

http://geoawesomeness.com/topics/web-maps/http://unfoldingmaps.orghttp://ffffound.com/home/tillnm/found/

• Google Maps - Well rounded, established mapping solution, especially for non-developers to get a basic map on the web, along with all the powers that Google is (in)famous for.

• OpenLayers - For situations when other mapping frameworks can’t solve your spatial analysis problems.

• Leaflet - Currently, easily the best mapping framework for general mapping purposes, especially if you don’t need the additional services that MapBox or CartoDB provide.

• MapBox - Fast growing and market changing mapping solution for when you want more control over map styling or have a need for services that others are not providing, such as detailed satellite images, geocoding or directions.

• Unfolding - to create interactive maps and geovisualizations in Processing and Javahttp://www.toptal.com/web/the-roadmap-to-roadmaps-a-survey-of-the-best-online-mapping-tools

Typical Mapping Tools

http://en.wikipedia.org/wiki/John_Snow

_(physician)#/media/File:Snow-cholera-map-1.jpg

John Snow, Cholera, 1854

Charles Joseph Minard, 1781-1870 Napoleon’s Russian Campaign

A flow map depicts the movement of a quantity in space and (implicitly) in time.

https://lirias.kuleuven.be/bitstream/123456789/461689/1/paper234_camera-ready.pdf

http://homes.cs.washington.edu/~jheer//files/zoo/ex/maps/choropleth.html

Choropleth Maps use color encoding to show aggregated data by geographical areas

Choropleth maps using 2 categories

http://www.colorado.edu/geography/gcraft/notes/cartocom/section6.html

Choropleth maps using 5 categories

http://www.colorado.edu/geography/gcraft/notes/cartocom/section6.html

Choropleth maps using 9 categories

http://www.colorado.edu/geography/gcraft/notes/cartocom/section6.html

Choropleth maps using different ranging methods

Equal Range

http://www.colorado.edu/geography/gcraft/notes/cartocom/section6.html

User Defined Range

http://www.colorado.edu/geography/gcraft/notes/cartocom/section6.html

Quantile Range

http://www.colorado.edu/geography/gcraft/notes/cartocom/section6.html

http://www.nieuwsblad.be/cnt/dmf20150603_01712465

Graduated Symbol Maps places symbols/glyphs over an underlying map

http

://ho

mes

.cs.

was

hing

ton.

edu/

~jhe

er//fi

les/

zoo/

ex/m

aps/

sym

bol.h

tml

Graduated Symbol Maps places symbols over an underlying map

A cartogram distorts the shape of geographic regions so that the area directly encodes a data variable

http

://ho

mes

.cs.

was

hing

ton.

edu/

~jhe

er//fi

les/

zoo/

ex/m

aps/

carto

gram

.htm

l

http://www.viewsoftheworld.net/?p=2541

http

://ca

rtogr

am.c

s.ar

izon

a.ed

u/in

dex.

htm

l

Another cartogram?

There is no perfect map

How could you actually compare sizes of different continents and countries?

https://www.youtube.com/watch?v=KUF_Ckv8HbE

HierachiesMost data can be organised into natural hierarchies

Special visualization techniques exist to leverage hierarchical structure, allowing rapid multiscale inferences: micro-observations of individual elements and macro-observations of large groups

Indented tree layout

http://homes.cs.washington.edu/~jheer//files/zoo/ex/hierarchies/indent.html

A node-link diagram with Reingold-Tilford algorithmht

tp://

hci.s

tanf

ord.

edu/

jhee

r/file

s/zo

o/ex

/hie

rarc

hies

/tree

.htm

l

The dendrogram (or cluster) algorithm places leaf nodes of the tree at the same level

Polar coordinates instead of cartesian coordinates

http

://ho

mes

.cs.

was

hing

ton.

edu/

~jhe

er//fi

les/

zoo/

ex/h

iera

rchi

es/c

lust

er-ra

dial

.htm

l

The adjacency diagram is a space-filling variant of the node-link diagram; rather than drawing a link between parent and child in the hierarchy, nodes are drawn as solid areas (either arcs or bars), and their placement relative to adjacent nodes reveals their position in the hierarchy

http

://ho

mes

.cs.

was

hing

ton.

edu/

~jhe

er//fi

les/

zoo/

ex/h

iera

rchi

es/ic

icle

.htm

l

The sunburst layout, shown in figure 4E, is equivalent to the icicle layout, but in polar coordinates. ht

tp://

hom

es.c

s.w

ashi

ngto

n.ed

u/~j

heer

//file

s/zo

o/ex

/hie

rarc

hies

/sun

burs

t.htm

l

Polar Area Diagram

Enclosure diagrams use containment rather than adjacency to represent the hierarchy

Squarified Treemaps - space filling http

://ho

mes

.cs.

was

hing

ton.

edu/

~jhe

er//fi

les/

zoo/

ex/h

iera

rchi

es/tr

eem

ap.h

tml

Circle-packing layoutNon - space filling

http

://hc

i.sta

nfor

d.ed

u/jh

eer/fi

les/

zoo/

ex/h

iera

rchi

es/p

ack.

htm

l

NetworksNon-hierarchical relationships between data points

https://queue.acm.org/detail.cfm?id=1805128

A force-directed layout where nodes are charged particles that repel each other, and links are dampened springs that pull related nodes together.

http

://hc

i.sta

nfor

d.ed

u/jh

eer/fi

les/

zoo/

ex/n

etw

orks

/forc

e.ht

ml

http

://ho

mes

.cs.

was

hing

ton.

edu/

~jhe

er//fi

les/

zoo/

ex/n

etw

orks

/arc

.htm

lAn arc diagram uses a one-dimensional layout of nodes, with circular arcs to represent links.

http://www.youtube.com/watch?v=wQpTM7ASc-w

T. Nagel, M. Maitan, E. Duval, A. Vande Moere, J. Klerkx, K. Kloeckl, and C. Ratti. Touching transport - a case study on visualizing metropolitan public transit on interactive tabletops. In AVI2014: 12th ACM International Working Conference on Advanced Visual Interfaces, pages 281–288, 2014.

http

://ho

mes

.cs.

was

hing

ton.

edu/

~jhe

er//fi

les/

zoo/

ex/n

etw

orks

/mat

rix.h

tml

Adjacency matrix: each value in row i and column j in the matrix corresponds to the link from node i to node j.

Chord diagrams show directed relationships among a group of entities. Relationship can be quantitative or binary

http://bl.ocks.org/mbostock/4062006 Ye L, Amberg J, Chapman D et al. 2013 Fish gut microbiota analysis differentiates physiology and behavior of invasive Asian carp and indigenous American fish The ISME journal

A Circo

http://circos.ca/guide/tables/img/guide-table-large.png

Choices of representation (e.g., matrix- diagram) and interactive parameterization (e.g., default sort order) can be critical to unearthing data quality issues that can otherwise undermine accurate analysis.

Facebook friends

Hee

r & K

ande

l, 20

12. I

nter

activ

e an

alys

is o

f big

dat

a. M

anag

es X

RDS:

Cro

ssro

ads,

The

AC

M

Mag

azin

e fo

r Stu

dent

s - B

ig D

ata,

19

(1),

50-5

4. h

ttp://

dl.a

cm.o

rg/c

itatio

n.cf

m?

id=2

3310

42.2

3310

58

Facebook friends

Hee

r & K

ande

l, 20

12. I

nter

activ

e an

alys

is o

f big

dat

a. M

anag

es X

RDS:

Cro

ssro

ads,

The

AC

M

Mag

azin

e fo

r Stu

dent

s - B

ig D

ata,

19

(1),

50-5

4. h

ttp://

dl.a

cm.o

rg/c

itatio

n.cf

m?

id=2

3310

42.2

3310

58

Facebook friends

Hee

r & K

ande

l, 20

12. I

nter

activ

e an

alys

is o

f big

dat

a. M

anag

es X

RDS:

Cro

ssro

ads,

The

AC

M

Mag

azin

e fo

r Stu

dent

s - B

ig D

ata,

19

(1),

50-5

4. h

ttp://

dl.a

cm.o

rg/c

itatio

n.cf

m?

id=2

3310

42.2

3310

58

Many(!!) more techniques are out there

e.g. check the visual index at https://github.com/mbostock/d3/wiki/Gallery

http://www.visual-literacy.org/periodic_table/periodic_table.html

https://eagereyes.org/blog/2009/

visualization-is-not-periodic-html

?68

Tegen volgende week• Individueel:

• Spreadsheet

• infovis van de week:

• Relevante infovis (inhoud, techniek, etc) voor je eigen project. Wat leer je eruit?

• Team:

• Vervolg implementatie

• Show-and-Tell - obv online visualisatie (cfr vorige slide)

• vooruitgang - problemen - planning - etc.

70