SlideShare a Scribd company logo
Post-­‐academic	
  course	
  Big	
  Data	
   	
   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
   	
   	
  	
  	
  
Post-­‐academic	
  course	
  Big	
  Data	
  
Joris Klerkx
Research Expert, PhD.
joris.klerkx@cs.kuleuven.be
@jkofmsk
Erik Duval
Professor
erik.duval@cs.kuleuven.be
@erikduval
Visualisatie - deel 2
Big Data - module 3
IVPV - Instituut voor PermanenteVorming
28-05-2015
To research, design, create and evaluate useful tools
that augment the human intellect
By	
   ‘augmen+ng	
  human	
   intellect’	
   we	
   mean	
   increasing	
   the	
   capability	
   of	
   a	
   man	
  to	
  approach	
  
a	
   complex	
   problem	
   situa+on,	
   to	
   gain	
   comprehension	
   to	
   suit	
   his	
   particular	
   needs,	
   and	
   to	
  
derive	
  solu+ons	
  to	
  problems	
  (Douglas	
  Engelbart,	
  1962).
Augment group - HCI research lab
Dept. Computerwetenschappen
KU Leuven
https://augmenthuman.wordpress.com
Music
Technology Enhanced
Learning
e-health
Research 2.0
Health
Media
(Consumption)
Technology Enhanced Learning
Science 2.0
https://augmenthuman.wordpress.com/
http://eng.kuleuven.be/datavislab/
Recap
Humans have advanced perceptual abilities
Humans have little short term memory
Externalize data by using interactive, visual encodings
Our brains makes us extremely good at recognizing visual patterns
Our brains remember relatively little of what we perceive
Before visualisation…
Data
- structure
time, hierarchy, network, 1D, 2D, nD, …
- questions
where, when, how often, …
- audience
domain & visualisation expertise, …
Audience vs purpose
Explore Explain
Lay person
Domain experts
Visual mapping
Encode data characteristics into visual form
Each mark (point, line, area,…) represents a data element
Think about relationships between elements (position)
“Simplicity is the ultimate sophistication.”
Leonardo daVinci
J. Mackinlay. Automating the design of graphical presentations of relational information. ACM Transactions On Graphics, 5(2):110–141, 1986.
Many ways to visualize
simple dataset
Some ways are more
effective than others,
depending on your
question at hand
http://gravyanecdote.com/visual-analytics/which-chart-should-you-use-to-show-this-data/
Information Visualisation is the use
of interactive visual
representations to amplify
cognition [Card. et. al]
Definition
Information visualization
significantly improves insight
generations and user productivity
Accelerates time to insight
Today
• Tour through the visualisation zoo
• Interactive Dynamics
• Is there too much data to visualize?
• Tools?
A tour through the
visualization zoo
Heer,	
  J.,	
  Bostock,	
  M.,	
  &	
  Ogievetsjy,	
  V.	
  (2010,	
  May).	
  A	
  Tour	
  through	
  the	
  VisualizaMon	
  Zoo	
  -­‐	
  A	
  survey	
  of	
  powerful	
  visualisaMon	
  
techniques,	
  from	
  the	
  obvious	
  to	
  the	
  obscure.	
  ACM	
  Graphics	
  ,	
  8	
  (5),	
  hTps://queue.acm.org/detail.cfm?id=1805128
Time-series data
Sets 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://homes.cs.washington.edu/~jheer//files/zoo/ex/time/index-chart.html
Aggregated time-series data
A stream graph visually summates time-series values
http://hci.stanford.edu/jheer/files/zoo/ex/time/stack.html
Time-series data
Time-series data
Small multiples: showing each series in its own chart.
http://homes.cs.washington.edu/~jheer//files/zoo/ex/time/multiples.html
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
http://neuralengr.com/asifr/journals/
Publication counts over time
Statistical Distributions
Reveal 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://homes.cs.washington.edu/~jheer//files/zoo/ex/stats/stem-and-leaf.html
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
Maps
Mostly 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.org
http://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 Java
http://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
A flow map depicts the movement of a quantity in space and (implicitly)
in time.
Charles Joseph Minard, 1781-1870
Napoleon’s Russian Campaign
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://homes.cs.washington.edu/~jheer//files/zoo/ex/maps/symbol.html
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://homes.cs.washington.edu/~jheer//files/zoo/ex/maps/cartogram.html
http://www.viewsoftheworld.net/?p=2541
http://cartogram.cs.arizona.edu/index.html
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
Hierachies
Most 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
A node-link diagram with Reingold-Tilford algorithm
http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/tree.html
The dendrogram (or cluster) algorithm places leaf nodes of the tree at the
same level
Polar coordinates instead of cartesian coordinates
http://homes.cs.washington.edu/~jheer//files/zoo/ex/hierarchies/cluster-radial.html
Indented tree layout
http://homes.cs.washington.edu/~jheer//files/zoo/ex/hierarchies/indent.html
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://homes.cs.washington.edu/~jheer//files/zoo/ex/hierarchies/icicle.html
The sunburst layout, shown in figure 4E, is equivalent to the
icicle layout, but in polar coordinates.
http://homes.cs.washington.edu/~jheer//files/zoo/ex/hierarchies/sunburst.html
Polar Area Diagram
Visualisation - techniques, interaction dynamics, big data
Enclosure diagrams use containment rather than adjacency to
represent the hierarchy
Squarified Treemaps - space filling
http://homes.cs.washington.edu/~jheer//files/zoo/ex/hierarchies/treemap.html
Visualisation - techniques, interaction dynamics, big data
Circle-packing layout
Non - space filling
http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/pack.html
Networks
Non-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://hci.stanford.edu/jheer/files/zoo/ex/networks/force.html
http://homes.cs.washington.edu/~jheer//files/zoo/ex/networks/arc.html
An 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 AdvancedVisual Interfaces, pages 281–288, 2014.
http://homes.cs.washington.edu/~jheer//files/zoo/ex/networks/matrix.html
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
Heer&Kandel,2012.Interactiveanalysisofbigdata.ManagesXRDS:Crossroads,TheACM
MagazineforStudents-BigData,19(1),50-54.http://dl.acm.org/citation.cfm?
id=2331042.2331058
Facebook friends
Heer&Kandel,2012.Interactiveanalysisofbigdata.ManagesXRDS:Crossroads,TheACM
MagazineforStudents-BigData,19(1),50-54.http://dl.acm.org/citation.cfm?
id=2331042.2331058
Facebook friends
Heer&Kandel,2012.Interactiveanalysisofbigdata.ManagesXRDS:Crossroads,TheACM
MagazineforStudents-BigData,19(1),50-54.http://dl.acm.org/citation.cfm?
id=2331042.2331058
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
When“static”visualizations are
not enough
Too many datapoints or variables
True understanding and insight generation require
interaction
Data is exploratory in nature
Interaction
Should contribute to successful analytic dialogues!
Support exploration at the rate of human thought!
Interactive Dynamics enables analysts
to explore large data sets (Task types)
Heer,	
  J.,	
  &	
  Shneiderman,	
  B.	
  (2012,	
  February).	
  InteracMve	
  Dynamics	
  for	
  Visual	
  Analysis.	
  Magazine	
  Queue	
  
-­‐	
  Microprocessors	
  ,	
  10	
  (2),	
  p.	
  30.	
  hTp://queue.acm.org/detail.cfm?id=2146416	
  
• Data & View Specification controls
• View Manipulation
• Process & Provenance
Data & View
Specification
Custom programming of a specific visualization component
Specific tools that use a chart typology (eg excel)
Data-flow graphs deconstruct the visualization process into fine-grained set of
operators (data import, transformation, layout, coloring, etc
Visualization construction using formal grammars (eg ggplot2, R, Prototvis, etc)
Data & View Specification controls serve to visually &
interactively encode data
Custom programming
“hacking”
Processing demo
google spreadsheets
Tools that use a chart typology (eg excel)
Excel for mac 2015
Tools that use a chart typology (eg excel)
http://www-969.ibm.com/software/analytics/manyeyes/
Cfr. http://gravyanecdote.com/visual-analytics/which-chart-should-you-use-to-show-
this-data/
Data-flow graphs deconstruct the visualization process into fine-grained set of
operators (data import, transformation, layout, coloring, etc
http://datacollider.io/
Let me know how this works for you ;)
View Manipulation
• Categorical/ordinal data
• radio buttons, checkboxes, scrollable lists,
hierachies, search boxes (with autocomplete)
• Ordinal, quantitative, and temporal data
• a standard slider (for a single threshold value) or a
range slider (for specifying multiple endpoints).
Filtering allows rapid and reversible
exploration of data subsets
Heer,	
  J.,	
  &	
  Shneiderman,	
  B.	
  (2012,	
  February).	
  InteracMve	
  Dynamics	
  for	
  Visual	
  Analysis.	
  Magazine	
  Queue	
  -­‐	
  Microprocessors	
  ,	
  10	
  (2),	
  p.	
  
30.	
  hTp://queue.acm.org/detail.cfm?id=2146416	
  
http://doug.cs.kuleuven.be/wittgenstein2/
http://localhost:63342/DataAnalysis/report/dre-userpaths_filters.html
http://www.trulia.com/vis/tru247/
Query controls can be further augmented with
visualizations of their own
Query controls can be further augmented with
visualizations of their own
Sorting enables popping up of
trends, clusters,…
• Choices in a toolbar
• Clicks on the header in a table
• Can be complicated in the case of multiple view
displays
http://terror.periscopic.com
https://augmenthuman.wordpress.com/portfolio/emotions-in-the-classroom/
Heer,	
  J.,	
  &	
  Shneiderman,	
  B.	
  (2012,	
  February).	
  InteracMve	
  Dynamics	
  for	
  Visual	
  Analysis.	
  Magazine	
  Queue	
  -­‐	
  Microprocessors	
  ,	
  10	
  (2),	
  p.	
  
30.	
  hTp://queue.acm.org/detail.cfm?id=2146416	
  
Select items to hightlight, filter or
manipulate them
• Mouse clicks, free-form lassos, area cursors
(‘brushes’), mouse hovering, etc
• depends on the device
• Various expressive power
• selections of a collection of items
• selections as queries over the data (eg drawing
rectangle -> range query)
Visualisation - techniques, interaction dynamics, big data
https://perswww.kuleuven.be/~u0074988/mapc/
Selection queries
https://augmenthuman.wordpress.com/portfolio/mapc_interactive_dashboard/
Select by slope and tolerance
Heer,	
  J.,	
  &	
  Shneiderman,	
  B.	
  (2012,	
  February).	
  InteracMve	
  Dynamics	
  for	
  Visual	
  Analysis.	
  Magazine	
  Queue	
  -­‐	
  Microprocessors	
  ,	
  10	
  (2),	
  p.	
  
30.	
  hTp://queue.acm.org/detail.cfm?id=2146416	
  
Mapping mouse gestures to query patterns
Heer,	
  J.,	
  &	
  Shneiderman,	
  B.	
  (2012,	
  February).	
  InteracMve	
  Dynamics	
  for	
  Visual	
  Analysis.	
  Magazine	
  Queue	
  -­‐	
  Microprocessors	
  ,	
  10	
  (2),	
  p.	
  
30.	
  hTp://queue.acm.org/detail.cfm?id=2146416	
  
Navigate to examine high-
mede patterns & low-level detail
• Overview first, zoom & filter, then details-on-demand
• Start with what you know, then grow
• Search, show context, expand on demand.
• Focus + Context
• Semantic Zooming
• Magical lenses
$
f con-
cation
n this
of the
zoom
what
isible,
e user
on the
more
rectly
3, for
ber of
dmark
Figure 4: Setting of the evaluation.
B. Vandeputte, E. Duval, and J. Klerkx. Interactive sensemaking in authorship networks. Proceedings of the ACM International
Conference on Interactive Tabletops and Surfaces, ITS11, pp. 246–247, 2011.
Overview first, zoom and filter, details on demand
B. Vandeputte, E. Duval, and J. Klerkx. Applying design principles in authorship networks-a case study. In CHI EA’12:
Proceedings of the 2012 ACM annual conference extended abstracts on Human Factors in Computing Systems, pages 741–
744, 2012. (https://www.youtube.com/watch?v=R5CeTEejdBA)
Start with what you know, then grow
Search, show context, expand on demand
http://sanfrancisco.crimespotting.org
Overview first, zoom and filter, details on demand
Viewport on the data: zooming & panning controls
Focus+context
Large hierarchies
https://philogb.github.io/jit/static/v20/Jit/Examples/Hypertree/example1.html
Limited screen space
Focus + Context
Semantic Zooming
Heer,	
  J.,	
  &	
  Shneiderman,	
  B.	
  (2012,	
  February).	
  InteracMve	
  Dynamics	
  for	
  Visual	
  Analysis.	
  Magazine	
  Queue	
  -­‐	
  Microprocessors	
  ,	
  10	
  (2),	
  p.	
  
30.	
  hTp://queue.acm.org/detail.cfm?id=2146416	
  
Magical Lenses
C. Tominski, S. Gladisch, U. Kister, R. Dachselt, and H. Schumann. A Survey on Interactive Lenses in Visualization. EuroVis State-of-the-Art Reports, Swansea, UK, Eurographics
Association, 2014.
Fisheye
C. Tominski, S. Gladisch, U. Kister, R. Dachselt, and H. Schumann. A Survey on Interactive Lenses in
Visualization. EuroVis State-of-the-Art Reports, Swansea, UK, Eurographics Association, 2014.
Coordinate views for linked, multi-
dimensional exploration
Enables seeing data from different perspectives
Multiple views can facilitate comparison
http://square.github.io/crossfilter/
https://perswww.kuleuven.be/~u0074988/mapc/
https://augmenthuman.wordpress.com/portfolio/mapc_interactive_dashboard/
Small multiples
https://queue.acm.org/detail.cfm?id=2146416
Heer,	
  J.,	
  &	
  Shneiderman,	
  B.	
  (2012,	
  February).	
  InteracMve	
  Dynamics	
  for	
  Visual	
  Analysis.	
  Magazine	
  Queue	
  -­‐	
  Microprocessors	
  ,	
  10	
  (2),	
  p.	
  
30.	
  hTp://queue.acm.org/detail.cfm?id=2146416	
  
Heer,	
  J.,	
  &	
  Shneiderman,	
  B.	
  (2012,	
  February).	
  InteracMve	
  Dynamics	
  for	
  Visual	
  Analysis.	
  Magazine	
  Queue	
  -­‐	
  Microprocessors	
  ,	
  10	
  (2),	
  p.	
  
30.	
  hTp://queue.acm.org/detail.cfm?id=2146416	
  
https://augmenthuman.wordpress.com/portfolio/an-interactive-visualization-of-butterfly-observations/
https://www.youtube.com/watch?v=NvqJi8NwLCI
Organize multiple windows & workspaces
• Tiled approaches (different widgets) allows to see
all information and selectors at once, minimizing
distracting scrolling or window operations, while
enabling analysts to concentrate on extracting and
reporting insights.
• Layout organization tools will become decisive
factors in creating effective user experience
Orchestrate attention and mentally integrate patterns among views
Heer,	
  J.,	
  &	
  Shneiderman,	
  B.	
  (2012,	
  February).	
  InteracMve	
  Dynamics	
  for	
  Visual	
  Analysis.	
  Magazine	
  Queue	
  -­‐	
  Microprocessors	
  ,	
  10	
  (2),	
  p.	
  
30.	
  hTp://queue.acm.org/detail.cfm?id=2146416	
  
Orchestrating visualizations over various devices
In-class display
Process & Provenance
Record analysis histories for
revisitation, review and sharing
Heer,	
  J.,	
  &	
  Shneiderman,	
  B.	
  (2012,	
  February).	
  InteracMve	
  Dynamics	
  for	
  Visual	
  Analysis.	
  Magazine	
  Queue	
  -­‐	
  Microprocessors	
  ,	
  10	
  (2),	
  p.	
  30.	
  hTp://queue.acm.org/detail.cfm?id=2146416	
  
Heer,	
  J.,	
  &	
  Shneiderman,	
  B.	
  (2012,	
  February).	
  InteracMve	
  Dynamics	
  for	
  Visual	
  Analysis.	
  Magazine	
  Queue	
  -­‐	
  Microprocessors	
  ,	
  10	
  (2),	
  p.	
  
30.	
  hTp://queue.acm.org/detail.cfm?id=2146416	
  
Annotate patterns to document
findings
Record, organize, and communicate insights gained
during visual exploration
Freeform graphical annotations without explicit tie to the
underlying data
Data-aware annotations
Heer,	
  J.,	
  &	
  Shneiderman,	
  B.	
  (2012,	
  February).	
  InteracMve	
  Dynamics	
  for	
  Visual	
  Analysis.	
  Magazine	
  Queue	
  -­‐	
  Microprocessors	
  ,	
  10	
  (2),	
  p.	
  
30.	
  hTp://queue.acm.org/detail.cfm?id=2146416	
  
Visualisation - techniques, interaction dynamics, big data
Share views and annotations to
enable collaboration
Real-world analysis is very much a social process
that may involve multiple interpretations,
discussion, and dissemination of results.
https://www.youtube.com/watch?v=g91_EBxVh3E
Heer,	
  J.,	
  &	
  Shneiderman,	
  B.	
  (2012,	
  February).	
  InteracMve	
  Dynamics	
  for	
  Visual	
  Analysis.	
  Magazine	
  Queue	
  -­‐	
  Microprocessors	
  ,	
  10	
  (2),	
  p.	
  
30.	
  hTp://queue.acm.org/detail.cfm?id=2146416	
  
http://www-969.ibm.com/software/analytics/manyeyes/ https://www.tableau.com/products
Many other tools!
Sharing datasets!
Guide users through analysis tasks or
stories
• Incorporate guided analytics to lead analysts
through workflows for common tasks.
• Narrative visualization
Heer,	
  J.,	
  &	
  Shneiderman,	
  B.	
  (2012,	
  February).	
  InteracMve	
  Dynamics	
  for	
  Visual	
  Analysis.	
  Magazine	
  Queue	
  -­‐	
  Microprocessors	
  ,	
  10	
  (2),	
  p.	
  
30.	
  hTp://queue.acm.org/detail.cfm?id=2146416	
  
Artikel - tekst
Visualisatie
Narrative
visualization
Interval 1 Interval 2 Interval 3 Interval 4
Interactive Dynamics: Summary
Heer,	
   J.,	
   &	
   Shneiderman,	
   B.	
   (2012,	
   February).	
   InteracMve	
   Dynamics	
   for	
   Visual	
   Analysis.	
   Magazine	
  
Queue	
  -­‐	
  Microprocessors	
  ,	
  10	
  (2),	
  p.	
  30.	
  hTp://queue.acm.org/detail.cfm?id=2146416	
  
Further notes
How much “big” data
can we visualise?
Petabytes? Exabytes? Yottabytes?!
Direct visualisation of big data ‘in the raw’ is
probably not so effective
Is there too much data to
visualize?
You only have so many pixels on a screen
Each pixel, one data point
E.g Typical hdtv screen contains 1920 * 1080 = 2.073.600 pixels
prysm.com
https://vimeo.com/49679699
What is big data?
Multiple data sources with varied data types
“Diverse” data
I talk geoJSON
i talk custom
xml
i talk apache
logs
millions of records
“Tall” data
Cluttered displays
Heer, J. & Kandel, S. (2012), Interactive Analysis of Big Data, XRDS, 19 (1)
Cluttered displays
Binned density scatterplot
Hexagonal instead of rectangular
Heer, J. & Kandel, S. (2012), Interactive Analysis of Big Data, XRDS, 19 (1)
Perceptual scalability of a display
should be limited by the chosen
resolution of the data, not the numbers
of records (Heer & Kandel, 2012)
Heer, J. & Kandel, S. (2012), Interactive Analysis of Big Data, XRDS, 19 (1)
Multi-variate data with 100s to 1000s of variables
“Wide” data
Visualizations might help reveal multidimensional patterns
Use the power of the machine to find a proxy in the data that
predicts the selected variables
Depending on their specific questions, domain experts might
select a subset of variables they are interested in
http://www.perceptualedge.com/blog/?p=2046
In this day of so-called Big Data,
organizations are scrambling to
implement new software and
hardware to increase the amount of
data that they collect and store.
In so doing they are unwittingly
making it harder to find the needles of
useful information in the rapidly
growing mounds of hay.
If you don’t know how to
differentiate signals from noise,
adding more noise only makes
matters worse.
Monday, June 1st, 2015
When we rely on data for decision making, how do we tell
what qualifies as a signal and what is merely noise?
In and of itself, data is neither. It is merely a collection of
facts.
When a fact is true, useful, and deserves a response, only
then is it a signal. When it isn’t, it’s noise. It’s that simple 

(Few, http://www.perceptualedge.com/blog/?p=2046, 2015)
Avoid the All-You-Can-Eat buffet! (Ben Fry)
Visual-information Seeking Mantra
Visual Analytics Mantra
Overview First, Zoom and Filter, Details-on-Demand
Analyze First, Show the Important, Zoom and Analyse
Further, Details-on-Demand
Ben Shneiderman
Daniel Keim
Interactive analysis tools can help
quell “big data” by augmenting our
ability to manipulate and reason
about it (Heer & Kandel, 2012)
Heer, J. & Kandel, S. (2012), Interactive Analysis of Big Data, XRDS, 19 (1)
In the face of a data deluge, what remains
relatively constant is our own cognitive ability
to make sense of the data and reach reliable,
informed decisions. Big data is of little help
when decoupled from sound judgment.
J. Heer
Heer, J. & Kandel, S. (2012), Interactive Analysis of Big Data, XRDS, 19 (1)
Large data is a wild beast and you’d better treat it
with the right tools. Visualization is a great tool to
convey what automatic data analysis algorithms
discover. And often it is a very challenging task!
What the algorithms spit is exciting new complex
data that requires creativity and knowledge as well.
E. Bertini
http://fellinlovewithdata.com/guides/how-do-you-visualize-too-much-data
▪ Interactive visualization of a million items

J.D. Fekete and C. Plaisant.
▪ Random Sampling as a Clutter Reduction Technique to Facilitate Interactive Visualisation of Large
Datasets

G. Ellis (part of it in collab. with yours truly).
▪ A Sampling Approach to Deal with Cluttered Information Visualizations

E. Bertini (my phd thesis).
▪ TreeJuxtaposer: Scalable Tree Comparison using Focus+Context with Guaranteed Visibility

T. Munzner, F. Guimbretiere, S. Tasiran, L. Zhang, and Y. Zhou.
▪ Beyond visual acuity: the perceptual scalability of information visualizations for large displays

B. Yost, Y. Haciahmetoglu, and C. North.
▪ Extreme visualization: squeezing a billion records into a million pixels

B. Shneiderman.
▪ Measuring Data Abstraction Quality in Multiresolution Visualization

Q. Cui, M. O. Ward, E. A. Rundensteiner, and J. Yang.
• imMens: Real-time Visual Querying of Big Data
Zhicheng Liu, Biye Jiang, Jeffrey Heer
Some papers about big data
visualisation
http://fellinlovewithdata.com/guides/how-do-you-visualize-too-much-data
Tools for visualisation
Visualisation - techniques, interaction dynamics, big data
http://selection.datavisualization.ch
Don’t start from the tool
Start from your data
and the questions about
your data
https://www.youtube.com/watch?v=vc1bq0qIKoA
The need for multidisciplinary teams
http://holisticsofa.com/
The Data Visualization Pyramid
POINTERS
• http://wearecolorblind.com/articles/quick-tips/
• http://infosthetics.com
• http://www.visualcomplexity.com/vc/
• http://bestario.org/research/remap
• ... (a lot more online! )
BOOKS
• “Readings in InformationVisualization: UsingVision toThink”,
Card, S et al.
• “Signals”,“Now i see”,“Show Me the Numbers”, Few, S.
• “Beautiful Evidence”,Tufte, E.
• “InformationVisualization. Perception for design”,Ware, C.
• BeautifulVisualization: Looking at Data through the Eyes of
Experts (Theory in Practice): Julie Steele, Noah Iliinsky
?
Joris Klerkx
Research Expert, PhD.
joris.klerkx@cs.kuleuven.be
@jkofmsk
https://augmenthuman.wordpress.com

More Related Content

PDF
Visualisation - introduction, guidelines, principles and design
PDF
Les 7 - informatie visualisatie - interactie
PDF
Visualisatie - Module 3 - Big Data
PDF
20160208 informatie visualisatie les 1
PDF
Workshop Designing Useful apps
DOCX
ICVRV_161[170]
PPTX
Computing for Human Experience [v4]: Keynote @ OnTheMove Federated Conferences
PDF
Love for science or 'Academic Prostitution' - DFD2014 version
Visualisation - introduction, guidelines, principles and design
Les 7 - informatie visualisatie - interactie
Visualisatie - Module 3 - Big Data
20160208 informatie visualisatie les 1
Workshop Designing Useful apps
ICVRV_161[170]
Computing for Human Experience [v4]: Keynote @ OnTheMove Federated Conferences
Love for science or 'Academic Prostitution' - DFD2014 version

Similar to Visualisation - techniques, interaction dynamics, big data (20)

PDF
Ashoka Future Forum - Workshop - Using Data for Impact #02
PPTX
Unit III.pptx
PDF
Information Visualization Workshop, ASIS&T 2015
PPTX
DATA VISUALIZATION.pptx
PDF
Visualisation; help understand and communicate
PDF
Practical Data Visualization
PPTX
Introduction to Data Visualization Slides
PDF
Introduction to Information Visualization (Part 2)
PDF
Data visualization tools & techniques - 1
PPTX
Data Visulalization
PDF
Handbook Of Data Visualization Springer Handbooks Of Computational Statistics...
PDF
12. Map Visualization .pdf
PDF
A Tour through the Data Vizualization Zoo - Communications of the ACM
PPTX
Information Visualisation – an introduction
PPT
chi03-tutorial.ppt
PDF
From Data to Visualization, what happens in between?
PPT
Visual Analytics in Big Data
PDF
Data Visualization Techniques
PPTX
Mastering Data Visualization: Charts, Graphs, and Maps Explained
PDF
Information Visualisation: Introduction
Ashoka Future Forum - Workshop - Using Data for Impact #02
Unit III.pptx
Information Visualization Workshop, ASIS&T 2015
DATA VISUALIZATION.pptx
Visualisation; help understand and communicate
Practical Data Visualization
Introduction to Data Visualization Slides
Introduction to Information Visualization (Part 2)
Data visualization tools & techniques - 1
Data Visulalization
Handbook Of Data Visualization Springer Handbooks Of Computational Statistics...
12. Map Visualization .pdf
A Tour through the Data Vizualization Zoo - Communications of the ACM
Information Visualisation – an introduction
chi03-tutorial.ppt
From Data to Visualization, what happens in between?
Visual Analytics in Big Data
Data Visualization Techniques
Mastering Data Visualization: Charts, Graphs, and Maps Explained
Information Visualisation: Introduction
Ad

More from Joris Klerkx (20)

PDF
Visualizing Reader Engagement
PDF
Les 9 - Informatie Visualisatie
PDF
Les 8 - informatie visualisatie
PDF
Les 4 informatie visualisatie
PDF
Les 2 - Informatie Visualisatie
PDF
Introduction - fundamentals of CHI
PDF
Bring your own idea - Visual learning analytics
PDF
Quantified Self - LICT workshop - KU Leuven
PDF
Learning Analytics - Door data gestuurd leren
PDF
DM2E - Europeana Cloud
PDF
User experience
PDF
Multimedia les - intro tot informatie visualisatie
PDF
JTELSS - pimp your learning analytics with proper visualisation techniques
PDF
the EMurgency project - LICT workshop on ICT in health
PDF
intro to information visualization
PDF
D3.js capita selecta
PDF
Workshop on visualization in tel
PDF
EMuRgency project - LICT Industrial affiliation day
PDF
44rd CEN WS/LT meeting PT interoperability of registries
PDF
44rd CEN WS/LT meeting PT social data
Visualizing Reader Engagement
Les 9 - Informatie Visualisatie
Les 8 - informatie visualisatie
Les 4 informatie visualisatie
Les 2 - Informatie Visualisatie
Introduction - fundamentals of CHI
Bring your own idea - Visual learning analytics
Quantified Self - LICT workshop - KU Leuven
Learning Analytics - Door data gestuurd leren
DM2E - Europeana Cloud
User experience
Multimedia les - intro tot informatie visualisatie
JTELSS - pimp your learning analytics with proper visualisation techniques
the EMurgency project - LICT workshop on ICT in health
intro to information visualization
D3.js capita selecta
Workshop on visualization in tel
EMuRgency project - LICT Industrial affiliation day
44rd CEN WS/LT meeting PT interoperability of registries
44rd CEN WS/LT meeting PT social data
Ad

Recently uploaded (20)

PDF
VCE English Exam - Section C Student Revision Booklet
PPTX
Lesson notes of climatology university.
PDF
RMMM.pdf make it easy to upload and study
PPTX
Microbial diseases, their pathogenesis and prophylaxis
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PDF
O7-L3 Supply Chain Operations - ICLT Program
PDF
Computing-Curriculum for Schools in Ghana
PDF
Sports Quiz easy sports quiz sports quiz
PPTX
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
PDF
Pre independence Education in Inndia.pdf
PPTX
Cell Structure & Organelles in detailed.
PDF
01-Introduction-to-Information-Management.pdf
PDF
O5-L3 Freight Transport Ops (International) V1.pdf
PDF
Classroom Observation Tools for Teachers
PPTX
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
PDF
Module 4: Burden of Disease Tutorial Slides S2 2025
PPTX
Pharmacology of Heart Failure /Pharmacotherapy of CHF
PPTX
Final Presentation General Medicine 03-08-2024.pptx
PDF
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
PDF
Black Hat USA 2025 - Micro ICS Summit - ICS/OT Threat Landscape
VCE English Exam - Section C Student Revision Booklet
Lesson notes of climatology university.
RMMM.pdf make it easy to upload and study
Microbial diseases, their pathogenesis and prophylaxis
human mycosis Human fungal infections are called human mycosis..pptx
O7-L3 Supply Chain Operations - ICLT Program
Computing-Curriculum for Schools in Ghana
Sports Quiz easy sports quiz sports quiz
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
Pre independence Education in Inndia.pdf
Cell Structure & Organelles in detailed.
01-Introduction-to-Information-Management.pdf
O5-L3 Freight Transport Ops (International) V1.pdf
Classroom Observation Tools for Teachers
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
Module 4: Burden of Disease Tutorial Slides S2 2025
Pharmacology of Heart Failure /Pharmacotherapy of CHF
Final Presentation General Medicine 03-08-2024.pptx
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
Black Hat USA 2025 - Micro ICS Summit - ICS/OT Threat Landscape

Visualisation - techniques, interaction dynamics, big data