visualization and interactive data exploration

Visualization Principles and

Interactive Data Exploration

MASTER ON SOFTWARE ENGINEERING HUMAN-COMPUTER INTERACTION

http://www.aaronkobl in.com/work/f l ightpatterns/

“Data is a precious thing and will last

longer than the systems themselves.”

Tim Berners-Lee

Master on Software Engineering Human-Computer Interaction

WHAT IS VISUALIZATION?

https://www.flickr.com/photos/michaelgallagher/4188918232/

Definition [www.oed.com]

1.The action or fact of visualizing; the power or process of

forming a mental picture or vision of something not

actually present to the sight; a picture thus formed.

2.The action or process of rendering visible.

WHY DO WE CREATE/NEED

VISUALIZATIONS?

https://www.flickr.com/photos/brewbooks/7358153986/

THE NEED FOR VISUALIZATIONS

• Record information

• Support reasoning about information (analyze)

• Convey information to others (present)

http://www.cs.berkeley.edu/~jfc/cs160/F12/lecs/lec23.pdf

WHAT CAN WE VISUALIZE ?

https://www.flickr.com/photos/arenamontanus/365325243/

BIG DATA

http://www.theatlantic.com/sponsored/ibm-cloud-rescue/archive/2012/09/big-

data-as-a-service/262461/

http://www.receptivitygroup.com/2012/09/26/how-the-age-of-big-data-is-

changing-luxury-marketing/

MAKING SENSE OF DATA

http://sigmajs.org/examples/gexf_example.html

DIKW MODEL

[1] http://km4meu.wordpress.com/2010/02/06/settling-the-eternal-semantic-debate-what-is-

knowledge-what-is-information/

FROM DATA TO INFORMATION TO KNOWLEDGE

From Data to Knowledge. Visualizations as transformation processes within the Data-Information-Knowledge

continuum. Luca Masud et. all

SEVEN STAGES OF VISUALIZING DATA

• Acquire

• Parse

• Filter

• Mine

• Represent

• Refine

• Interact

Visualizing Data, Ben Fry, O’Reilly

Acquire Obtain the data, whether from a file

on a disk or a source over a network.

Parse Provide some structure for the data’s

meaning, and order it into categories.

Filter Remove all but the data of interest.

Mine Apply methods from statistics or data

mining as a way to discern patterns or

place the data in mathematical context.

Represent Choose a basic visual model, such as

a bar graph, list, or tree.

Refine Improve the basic representation to make

it clearer and more visually engaging.

Interact Add methods for manipulating the data

or controlling what features are visible.

KDD PROCESS

Fayyad, U.M. 1996 - Knowledge discovery in data bases KDD process

DATA TYPE TAXONOMY

• 1D e.g. DNA sequences

• Temporal e.g. time series microarray expression

• 2D e.g. distribution maps

• 3D e.g. Anatomical structures

• nD e.g. Fisher’s Iris data set

• Trees e.g Linnean taxonomies, phylogenies

• Networks e.g. Metabolic pathways

• Text and documents e.g. publications

B. Shneiderman, The eyes have it: A task by data type taxonomy for

information visualization, 1996

1D –DNA SEQUENCE

http://en.wikipedia.org/wiki/File:DNA_sequence.svg

TEMPORAL - MULTI-SERIES LINE CHART

2D -MAPS

3D - MOLECULE

https://www.flickr.com/photos/schoschie/92731168/

2D VS 3D

• Actually quite controversial!

• The general recommendation is to avoid

3D in data visualization as it can present

problems with occlusion and navigation

• Most visualizations stay in the 2D or 2.5D

ND – IRIS CLUSTERS

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

TREE – PHYLOGENETIC TREE OF LIFE

http://www.jasondavies.com/tree-of-life/

TREE – TREE MAP

http://mbostock.github.io/d3/talk/20111018/treemap.html

NETWORK

http://mbostock.github.io/d3/talk/20111116/force-collapsible.html

CLASSIFICATIONS OF VISUALIZATIONS

• InfoGraphics vs. Data Visualization

• Exploration vs. Explanation

• Informative versus Persuasive vs. Visual Art

Designing Data Visualization, Noah Iliinsky and Julie Steele, O’REILLY

INFOGRAPHICS

• manually drawn ;

• Specific to the data at hand;

• aesthetically rich;

• relatively data-poor.

http://www.visual.ly/big-data

DATA VISUALIZATION

• algorithmically drawn ;

• easy to regenerate with different data;

• often aesthetically barren;

• relatively data-rich.

http://arborjs.org/halfviz

EXPLORATORY DATA VISUALIZATIONS

• is typically part of the data analysis phase, and is

used to find the story the data has to tell.

EXPLANATION DATA VISUALIZATIONS

• already know what the data has to say, and you

are trying to tell that story to somebody else.

INFORMATIVE VS. PERSUASIVE VS. VISUAL ART

The nature of the visualization depends on which relationship (between two of the three

components) is dominant

VISUAL INFORMATION-SEEKING MANTRA

• Overview first, zoom and filter, then details-

on-demand. [Shneiderman, 1996]

INTERACTION: OPERATIONS ON THE DATA

• sorting

• filtering

• browsing / exploring

• comparison

• characterizing trends and distributions

• finding anomalies and outliers

• finding correlation

• following path

INTERACTION: TECHNIQUES TO SUPPORT OPERATIONS

• Re-orderable matrices - sorting

• Selecting a subset of the data items - browsing

• Linked views – comparison, correlation, different

perspectives

• Linking

• Overview and detail

• Eccentric labeling

• Zooming – dealing with complexity/amount of data

• Focus & context - dealing with complexity/amount of data

• Fisheye

• Hyperbolic

• Animated transitions - keeping context

• Dynamic queries - exploring

CHECKLIST

• Determine Your Goals and Supporting Data

• Consider Your Reader

• Select Axes, Layout, and Placement

• Evaluate Your Encoding Entities – stop using color for encoding

• Reveal the Data’s Relationships

• Choose Titles, Tags, and Labels

• Analyze Patterns and Consistency

Case Study - Weather

Wednesday Thursday

Morning Afternoon Evening Morning Afternoon Evening

Description Mostly

cloudy.

Widely

scattered

tstorms.

More sun

than clouds.

Scattered

showers.

Scattered

clouds.

More sun

than clouds.

More sun

than clouds.

Pleasantly

More sun

clouds.

Temperature 16 °C 23 °C 18 °C 11 °C 27 °C 18 °C

Comfort Level 16 °C 25 °C 18 °C 10 °C 27 °C 18 °C

Humidity 85% 55% 81% 100% 36% 58%

Visibility 15 km 5 km 4 km 15 km 24 km 19 km

Chance of

Rain 5% 45% 45% 0% 10% 0%

Wind Speed 13 km/h 11 km/h 8 km/h 5 km/h 6 km/h 8 km/h

http://www.timeanddate.com/weather/romania/iasi

http://forecast.io

Case Study - Transportation

http://www.ratp-iasi.ro/harta.html

Small Experiment

Applications

http://mbostock.github.io/d3/talk/20111116/bundle.html

VISUALIZATION IN SOFTWARE ENGINEERING

http://www.ibm.com/developerworks/rational/library/content/RationalEdge/sep04/bell/

VISUALIZATION IN SOFTWARE ENGINEERING

Stefan Negru "SemaKoDE: Hybrid System for Knowledge Discovery in Sensor-based Smart

Environments" ICWE 2012

CREATING SPECTACLES

http://www.creativeapplications.net/featured/d3-spectacles-uva/

VISUALIZATION TECHNOLOGY

REVEALS A 5,500 YEAR OLD

MURDER MYSTERY

https://www.tii.se/media/news/swedish-visualization-technology-reveals-a-5500-year-

old-murder-mystery

VISUALIZATION TECHNOLOGY

REVEALS A 5,500 YEAR OLD

MURDER MYSTERY

http://www.flickr.com/photos/interactiveinstitute/sets/72157632016757994/

VISUALIZATION OF PROTEIN

DYNAMICS AND SYSTEMS BIOLOGY

http://www.vis.uni-stuttgart.de/en/research/scientific-visualisation/visualization-of-

protein-dynamics-and-systems-biology.html/

VISUALIZATION OF ENRICHMENT OF

TUMOR MUTATIONS

http://ayasdi.com/

GEPHI - OPEN GRAPH VIZ PLATFORM

Master on Software Engineering Human-Computer Interaction http://gephi.org/

NODEBOX - CREATE GENERATIVE DESIGN

Master on Software Engineering Human-Computer Interaction http://nodebox.net/

PROCESSING - PROGRAMMING LANGUAGE AND

ENVIRONMENT FOR PEOPLE WHO WANT TO

CREATE IMAGES, ANIMATIONS, AND

INTERACTIONS.

http://processing.org/

THANK YOU

Stefan Negru

• stefan.negru@info.uaic.ro

• http://blankdots.com

visualization and interactive data exploration

Technology

3dseavizkit: an interactive spatiotemporal visualization

collaborative interactive visualization – exploratory...

scsva: an interactive tool for big data visualization and...

china: interactive exploration

parallel computation and interactive visualization of time...

interactive visualization and exploration of network data...

interactive visualization of state transition systems -...

ferster introduction interactive visualization

interactive illustrative visualization of hierarchical

microflow interactive visualization

visualization iii- interactive 3d graphics

interactive visualization on mobile+cloud

15 interactive data visualization for mitigation planning...

interactive visualization of statistical information

interactive timeline for vector field visualization -...

interactive lenses for visualization: an extended survey ·...

interactive visualization of cvs data

interactive visualization of three-dimensional segmented...

plotcon nyc: the architecture of jupyter: protocols for...

visualization for event sequences exploration