Visualisation - techniques, interaction dynamics, big data

Post-­‐academic  course  Big  Data                                                                        

Post-­‐academic  course  Big  Data  

Joris KlerkxResearch Expert, [email protected]@jkofmsk

Erik [email protected]@erikduval

Visualisatie - deel 2Big Data - module 3IVPV - Instituut voor Permanente Vorming28-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. ComputerwetenschappenKU Leuvenhttps://augmenthuman.wordpress.com

Music

Technology Enhanced Learning

e-health

Research 2.0

HealthMedia

(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

- structuretime, 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 da Vinci

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

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

.wik

iped

ia.o

rg/w

iki/J

ohn_

Snow

_(ph

ysic

ian)

#/m

edia

/File

:Sno

w-c

hole

ra-m

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

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

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

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

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

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

://do

ug.c

s.ku

leuv

en.b

e/w

ittge

nste

in2/

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)

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

$

are just by visually looking for the largest number of con-nected nodes. These larger clusters can be a first indicationof where high profile authors are located. However, in thisstate, neither the names of the authors nor the titles of thepapers are visible yet.

When the user wants to look into more details, he can zoomin to a specific part of the publication space. This is whatFigure 3 depicts. The author names become clearly visible,so that the user can identify a particular author. The usercan also click on paper nodes to get more information on thepaper. To make it easier to identify which authors are moreprolific in the field, the node size of the author is directlyproportional to his number of publications. In Figure 3, forexample, author Martin Wolpers has the largest number ofpublications and is a good candidate to use as a landmarkin the exploration process.

4. EVALUATIONIn this section, we describe how we have evaluated our firstiteration. Subsections 4.1 and 4.2 elaborate on the setupof the evaluation. Subsection 4.3 discusses the results ofthe evaluation and finally, in subsection 4.4, we draw ourconclusions from this evaluation.

4.1 DescriptionTo evaluate the application, we deployed our tabletop in themain hall of the ECTEL 2010 conference [42]. This roomwas the main location for co�ee breaks and figure 4 illus-trates the tabletop setup.The evaluation was conceived as a formative evaluation, inorder to gather feedback on the design and implementationof the application from real users in a real life scenario. Wefollowed the think aloud method, where the participantsverbally describe their thoughts during the evaluation. Inthis way, the participants reveal their view on the systemand possibly their misconceptions [28]. It started o� withgeneral questions (age, gender, profession, vision and leftor right handed) about the participants together with theirbackgrounds. The participants were introduced to the ap-plication by asking them if they could explain what theysaw. We also asked them one basic content-related ques-tion to get them started: “Find author x and find out howmany papers he wrote in ECTEL 2007”. When needed, theparticipants were given extra explanation about the appli-cation. After this, the evaluation continued with tasks theyhad to perform. For each task, we noted whether the tasksucceeded, how fluently the task was performed and whetherthe participant needed help or not. Finally, the participantswere asked for some general feedback and they filled in asmall questionnaire about usefulness and ease of use. Eachevaluation took between 20 and 30 minutes.

4.2 ParticipantsThere was a total of 11 participants, aged between 27 and 60.All participants were researchers, right handed and all butone had corrected vision. Only 3 of the participants con-sidered that they had a bit of experience with multitouchinteraction, the other 8 said they had a lot of experience.Regarding experience towards tabletops or multitouch wallshowever, only one person described himself as experienced.To find out how experienced the participants were in the

Figure 4: Setting of the evaluation.

Figure 5: An overview of the number of papers theparticipants have written

research area, they were asked about their years of experi-ence in the Technology Enhanced Learning (TEL) researcharea, the number of papers published and how many of thempublished in TEL. Half of the participants claimed to haveup to 3 years of experience and the other half claimed tohave many years of experience. On average, the partici-pants have published around 32 papers, from which 16 inthe TEL area. Three participants have published more than60 papers, from which 20 or more in the TEL area. Fig-ure 5 shows in detail the number of published papers perparticipant.

4.3 ResultsIn this section, we describe the results of the evaluation.These results are grouped in three parts. First, we reporton the tasks the participants had to perform, second, wesummarize the most important feedback, and third, we takea look at the results from the questionnaire.

4.3.1 Tasks

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 viewsHeer,  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 annotationsHeer,  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  

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 screenEach 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 displaysBinned 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

http

://se

lect

ion.

data

visu

aliz

atio

n.ch

Don’t start from the tool

Start from your dataand 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 Information Visualization: Using Vision to Think”,

Card, S et al.

• “Signals”, “Now i see”, “Show Me the Numbers”, Few, S.

• “Beautiful Evidence”, Tufte, E.

• “Information Visualization. Perception for design”, Ware, C.

• Beautiful Visualization: Looking at Data through the Eyes of Experts (Theory in Practice): Julie Steele, Noah Iliinsky

?Joris KlerkxResearch Expert, [email protected]@jkofmsk

https://augmenthuman.wordpress.com