visualization and interactive data exploration
DESCRIPTION
TRANSCRIPT
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?
Master on Software Engineering Human-Computer Interaction
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.
Master on Software Engineering Human-Computer Interaction
WHY DO WE CREATE/NEED
VISUALIZATIONS?
Master on Software Engineering Human-Computer Interaction
https://www.flickr.com/photos/brewbooks/7358153986/
THE NEED FOR VISUALIZATIONS
• Record information
• Support reasoning about information (analyze)
• Convey information to others (present)
Master on Software Engineering Human-Computer Interaction
http://www.cs.berkeley.edu/~jfc/cs160/F12/lecs/lec23.pdf
WHAT CAN WE VISUALIZE ?
Master on Software Engineering Human-Computer Interaction
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
Master on Software Engineering Human-Computer Interaction
http://sigmajs.org/examples/gexf_example.html
DIKW MODEL
Master on Software Engineering Human-Computer Interaction
[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
Master on Software Engineering Human-Computer Interaction
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
Master on Software Engineering Human-Computer Interaction
Acquire Obtain the data, whether from a file
on a disk or a source over a network.
Master on Software Engineering Human-Computer Interaction
Parse Provide some structure for the data’s
meaning, and order it into categories.
Master on Software Engineering Human-Computer Interaction
Filter Remove all but the data of interest.
Master on Software Engineering Human-Computer Interaction
Mine Apply methods from statistics or data
mining as a way to discern patterns or
place the data in mathematical context.
Master on Software Engineering Human-Computer Interaction
Represent Choose a basic visual model, such as
a bar graph, list, or tree.
Master on Software Engineering Human-Computer Interaction
Refine Improve the basic representation to make
it clearer and more visually engaging.
Master on Software Engineering Human-Computer Interaction
Interact Add methods for manipulating the data
or controlling what features are visible.
Master on Software Engineering Human-Computer Interaction
KDD PROCESS
Master on Software Engineering Human-Computer Interaction
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
Master on Software Engineering Human-Computer Interaction
1D –DNA SEQUENCE
Master on Software Engineering Human-Computer Interaction
http://en.wikipedia.org/wiki/File:DNA_sequence.svg
TEMPORAL - MULTI-SERIES LINE CHART
Master on Software Engineering Human-Computer Interaction
2D -MAPS
Master on Software Engineering Human-Computer Interaction
3D - MOLECULE
Master on Software Engineering Human-Computer Interaction
https://www.flickr.com/photos/schoschie/92731168/
2D VS 3D
Master on Software Engineering Human-Computer Interaction
• 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
Master on Software Engineering Human-Computer Interaction
http://en.wikipedia.org/wiki/Iris_flower_data_set
TREE – PHYLOGENETIC TREE OF LIFE
Master on Software Engineering Human-Computer Interaction
http://www.jasondavies.com/tree-of-life/
TREE – TREE MAP
Master on Software Engineering Human-Computer Interaction
http://mbostock.github.io/d3/talk/20111018/treemap.html
NETWORK
Master on Software Engineering Human-Computer Interaction
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
Master on Software Engineering Human-Computer Interaction
INFOGRAPHICS
• manually drawn ;
• Specific to the data at hand;
• aesthetically rich;
• relatively data-poor.
Master on Software Engineering Human-Computer Interaction
http://www.visual.ly/big-data
DATA VISUALIZATION
• algorithmically drawn ;
• easy to regenerate with different data;
• often aesthetically barren;
• relatively data-rich.
Master on Software Engineering Human-Computer Interaction
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.
Master on Software Engineering Human-Computer Interaction
EXPLANATION DATA VISUALIZATIONS
• already know what the data has to say, and you
are trying to tell that story to somebody else.
Master on Software Engineering Human-Computer Interaction
INFORMATIVE VS. PERSUASIVE VS. VISUAL ART
Master on Software Engineering Human-Computer Interaction
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]
Master on Software Engineering Human-Computer Interaction
INTERACTION: OPERATIONS ON THE DATA
• sorting
• filtering
• browsing / exploring
• comparison
• characterizing trends and distributions
• finding anomalies and outliers
• finding correlation
• following path
Master on Software Engineering Human-Computer Interaction
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
Master on Software Engineering Human-Computer Interaction
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
Master on Software Engineering Human-Computer Interaction
Case Study - Weather
Master on Software Engineering Human-Computer Interaction
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
Case Study - Weather
Master on Software Engineering Human-Computer Interaction
http://forecast.io
Case Study - Weather
Master on Software Engineering Human-Computer Interaction
Case Study - Transportation
Master on Software Engineering Human-Computer Interaction
http://www.ratp-iasi.ro/harta.html
Small Experiment
Master on Software Engineering Human-Computer Interaction
Applications
Master on Software Engineering Human-Computer Interaction
http://mbostock.github.io/d3/talk/20111116/bundle.html
VISUALIZATION IN SOFTWARE ENGINEERING
Master on Software Engineering Human-Computer Interaction
http://www.ibm.com/developerworks/rational/library/content/RationalEdge/sep04/bell/
VISUALIZATION IN SOFTWARE ENGINEERING
Master on Software Engineering Human-Computer Interaction
Stefan Negru "SemaKoDE: Hybrid System for Knowledge Discovery in Sensor-based Smart
Environments" ICWE 2012
CREATING SPECTACLES
Master on Software Engineering Human-Computer Interaction
http://www.creativeapplications.net/featured/d3-spectacles-uva/
VISUALIZATION TECHNOLOGY
REVEALS A 5,500 YEAR OLD
MURDER MYSTERY
Master on Software Engineering Human-Computer Interaction
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
Master on Software Engineering Human-Computer Interaction
http://www.flickr.com/photos/interactiveinstitute/sets/72157632016757994/
VISUALIZATION OF PROTEIN
DYNAMICS AND SYSTEMS BIOLOGY
Master on Software Engineering Human-Computer Interaction
http://www.vis.uni-stuttgart.de/en/research/scientific-visualisation/visualization-of-
protein-dynamics-and-systems-biology.html/
VISUALIZATION OF ENRICHMENT OF
TUMOR MUTATIONS
Master on Software Engineering Human-Computer Interaction
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.
Master on Software Engineering Human-Computer Interaction
http://processing.org/
DEMO
Master on Software Engineering Human-Computer Interaction
THANK YOU
Stefan Negru
• http://blankdots.com
Master on Software Engineering Human-Computer Interaction