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/

DATA,

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.

Cool.

Widely

scattered

tstorms.

More sun

than clouds.

Mild.

Scattered

showers.

Scattered

clouds.

Mild.

More sun

than clouds.

Cool

More sun

than clouds.

Pleasantly

warm.

More sun

than

clouds.

Mild.

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/

DEMO


THANK YOU

Stefan Negru

• [email protected]

• http://blankdots.com


Technology

Visualization and interactive data exploration