Upload
joris-klerkx
View
278
Download
0
Embed Size (px)
Citation preview
Informatie visualisatie: Les 5
Joris Klerkx - Erik Duval http://hci.cs.kuleuven.be [email protected]
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
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