Visualization Principles andInteractive Data ExplorationMASTER ON SOFTWARE ENGINEERING HUMAN-COMPUTER INTERACTIONhttp://ww...
“Data is a precious thing and will lastlonger than the systems themselves.”Tim Berners-LeeMaster on Software Engineering H...
WHAT IS VISUALIZATION?Master on Software Engineering Human-Computer Interactionhttps://www.flickr.com/photos/michaelgallag...
Definition [www.oed.com]1.The action or fact of visualizing; the power or process offorming a mental picture or vision of ...
WHY DO WE CREATE/NEEDVISUALIZATIONS?Master on Software Engineering Human-Computer Interactionhttps://www.flickr.com/photos...
THE NEED FOR VISUALIZATIONS• Record information• Support reasoning about information (analyze)• Convey information to othe...
WHAT CAN WE VISUALIZE ?Master on Software Engineering Human-Computer Interactionhttps://www.flickr.com/photos/arenamontanu...
DATA,BIG DATAhttp://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 DATAMaster on Software Engineering Human-Computer Interactionhttp://sigmajs.org/examples/gexf_example.html
DIKW MODELMaster on Software Engineering Human-Computer Interaction[1] http://km4meu.wordpress.com/2010/02/06/settling-the...
FROM DATA TO INFORMATION TO KNOWLEDGEMaster on Software Engineering Human-Computer InteractionFrom Data to Knowledge. Visu...
SEVEN STAGES OF VISUALIZING DATA• Acquire• Parse• Filter• Mine• Represent• Refine• InteractVisualizing Data, Ben Fry, O’Re...
AcquireObtain the data, whether from a fileon a disk or a source over a network.Master on Software Engineering Human-Compu...
ParseProvide some structure for the data’smeaning, and order it into categories.Master on Software Engineering Human-Compu...
FilterRemove all but the data of interest.Master on Software Engineering Human-Computer Interaction
MineApply methods from statistics or datamining as a way to discern patterns orplace the data in mathematical context.Mast...
RepresentChoose a basic visual model, such asa bar graph, list, or tree.Master on Software Engineering Human-Computer Inte...
RefineImprove the basic representation to makeit clearer and more visually engaging.Master on Software Engineering Human-C...
InteractAdd methods for manipulating the dataor controlling what features are visible.Master on Software Engineering Human...
KDD PROCESSMaster on Software Engineering Human-Computer InteractionFayyad, U.M. 1996 - Knowledge discovery in data bases ...
DATA TYPE TAXONOMY• 1D e.g. DNA sequences• Temporal e.g. time series microarray expression• 2D e.g. distribution maps• 3D ...
1D –DNA SEQUENCEMaster on Software Engineering Human-Computer Interactionhttp://en.wikipedia.org/wiki/File:DNA_sequence.svg
TEMPORAL - MULTI-SERIES LINE CHARTMaster on Software Engineering Human-Computer Interaction
2D -MAPSMaster on Software Engineering Human-Computer Interaction
3D - MOLECULEMaster on Software Engineering Human-Computer Interactionhttps://www.flickr.com/photos/schoschie/92731168/
2D VS 3DMaster on Software Engineering Human-Computer Interaction• Actually quite controversial!• The general recommendati...
ND – IRIS CLUSTERSMaster on Software Engineering Human-Computer Interactionhttp://en.wikipedia.org/wiki/Iris_flower_data_set
TREE – PHYLOGENETIC TREE OF LIFEMaster on Software Engineering Human-Computer Interactionhttp://www.jasondavies.com/tree-o...
TREE – TREE MAPMaster on Software Engineering Human-Computer Interactionhttp://mbostock.github.io/d3/talk/20111018/treemap...
NETWORKMaster on Software Engineering Human-Computer Interactionhttp://mbostock.github.io/d3/talk/20111116/force-collapsib...
CLASSIFICATIONS OF VISUALIZATIONS• InfoGraphics vs. Data Visualization• Exploration vs. Explanation• Informative versus Pe...
INFOGRAPHICS• manually drawn ;• Specific to the data at hand;• aesthetically rich;• relatively data-poor.Master on Softwar...
http://www.visual.ly/big-data
DATA VISUALIZATION• algorithmically drawn ;• easy to regenerate with different data;• often aesthetically barren;• relativ...
http://arborjs.org/halfviz
EXPLORATORY DATA VISUALIZATIONS• is typically part of the data analysis phase, and isused to find the story the data has t...
EXPLANATION DATA VISUALIZATIONS• already know what the data has to say, and youare trying to tell that story to somebody e...
INFORMATIVE VS. PERSUASIVE VS. VISUAL ARTMaster on Software Engineering Human-Computer InteractionThe nature of the visual...
VISUAL INFORMATION-SEEKING MANTRA• Overview first, zoom and filter, then details-on-demand. [Shneiderman, 1996]Master on S...
INTERACTION: OPERATIONS ON THE DATA• sorting• filtering• browsing / exploring• comparison• characterizing trends and distr...
INTERACTION: TECHNIQUES TO SUPPORT OPERATIONS• Re-orderable matrices - sorting• Selecting a subset of the data items - bro...
CHECKLIST• Determine Your Goals and Supporting Data• Consider Your Reader• Select Axes, Layout, and Placement• Evaluate Yo...
Case Study - WeatherMaster on Software Engineering Human-Computer InteractionWednesday ThursdayMorning Afternoon Evening M...
Case Study - WeatherMaster on Software Engineering Human-Computer Interactionhttp://forecast.io
Case Study - WeatherMaster on Software Engineering Human-Computer Interaction
Case Study - TransportationMaster on Software Engineering Human-Computer Interactionhttp://www.ratp-iasi.ro/harta.html
Small ExperimentMaster on Software Engineering Human-Computer Interaction
ApplicationsMaster on Software Engineering Human-Computer Interactionhttp://mbostock.github.io/d3/talk/20111116/bundle.html
VISUALIZATION IN SOFTWARE ENGINEERINGMaster on Software Engineering Human-Computer Interactionhttp://www.ibm.com/developer...
VISUALIZATION IN SOFTWARE ENGINEERINGMaster on Software Engineering Human-Computer InteractionStefan Negru "SemaKoDE: Hybr...
CREATING SPECTACLESMaster on Software Engineering Human-Computer Interactionhttp://www.creativeapplications.net/featured/d...
VISUALIZATION TECHNOLOGYREVEALS A 5,500 YEAR OLDMURDER MYSTERYMaster on Software Engineering Human-Computer Interactionhtt...
VISUALIZATION TECHNOLOGYREVEALS A 5,500 YEAR OLDMURDER MYSTERYMaster on Software Engineering Human-Computer Interactionhtt...
VISUALIZATION OF PROTEINDYNAMICS AND SYSTEMS BIOLOGYMaster on Software Engineering Human-Computer Interactionhttp://www.vi...
VISUALIZATION OF ENRICHMENT OFTUMOR MUTATIONSMaster on Software Engineering Human-Computer Interactionhttp://ayasdi.com/
GEPHI - OPEN GRAPH VIZ PLATFORMMaster on Software Engineering Human-Computer Interactionhttp://gephi.org/
NODEBOX - CREATE GENERATIVE DESIGNMaster on Software Engineering Human-Computer Interaction http://nodebox.net/
PROCESSING - PROGRAMMING LANGUAGE ANDENVIRONMENT FOR PEOPLE WHO WANT TOCREATE IMAGES, ANIMATIONS, ANDINTERACTIONS.Master o...
DEMOMaster on Software Engineering Human-Computer Interaction
THANK YOUStefan Negru• stefan.negru@info.uaic.ro• http://blankdots.comMaster on Software Engineering Human-Computer Intera...
Visualization and interactive data exploration
Upcoming SlideShare
Loading in...5
×

Visualization and interactive data exploration

1,346

Published on

Published in: Technology, Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,346
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
53
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Visualization and interactive data exploration

  1. 1. Visualization Principles andInteractive Data ExplorationMASTER ON SOFTWARE ENGINEERING HUMAN-COMPUTER INTERACTIONhttp://www.aaronkoblin.com/work/flightpatterns/
  2. 2. “Data is a precious thing and will lastlonger than the systems themselves.”Tim Berners-LeeMaster on Software Engineering Human-Computer Interaction
  3. 3. WHAT IS VISUALIZATION?Master on Software Engineering Human-Computer Interactionhttps://www.flickr.com/photos/michaelgallagher/4188918232/
  4. 4. Definition [www.oed.com]1.The action or fact of visualizing; the power or process offorming a mental picture or vision of something notactually present to the sight; a picture thus formed.2.The action or process of rendering visible.Master on Software Engineering Human-Computer Interaction
  5. 5. WHY DO WE CREATE/NEEDVISUALIZATIONS?Master on Software Engineering Human-Computer Interactionhttps://www.flickr.com/photos/brewbooks/7358153986/
  6. 6. THE NEED FOR VISUALIZATIONS• Record information• Support reasoning about information (analyze)• Convey information to others (present)Master on Software Engineering Human-Computer Interactionhttp://www.cs.berkeley.edu/~jfc/cs160/F12/lecs/lec23.pdf
  7. 7. WHAT CAN WE VISUALIZE ?Master on Software Engineering Human-Computer Interactionhttps://www.flickr.com/photos/arenamontanus/365325243/
  8. 8. DATA,BIG DATAhttp://www.theatlantic.com/sponsored/ibm-cloud-rescue/archive/2012/09/big-data-as-a-service/262461/
  9. 9. http://www.receptivitygroup.com/2012/09/26/how-the-age-of-big-data-is-changing-luxury-marketing/
  10. 10. MAKING SENSE OF DATAMaster on Software Engineering Human-Computer Interactionhttp://sigmajs.org/examples/gexf_example.html
  11. 11. DIKW MODELMaster 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/
  12. 12. FROM DATA TO INFORMATION TO KNOWLEDGEMaster on Software Engineering Human-Computer InteractionFrom Data to Knowledge. Visualizations as transformation processes within the Data-Information-Knowledgecontinuum. Luca Masud et. all
  13. 13. SEVEN STAGES OF VISUALIZING DATA• Acquire• Parse• Filter• Mine• Represent• Refine• InteractVisualizing Data, Ben Fry, O’ReillyMaster on Software Engineering Human-Computer Interaction
  14. 14. AcquireObtain the data, whether from a fileon a disk or a source over a network.Master on Software Engineering Human-Computer Interaction
  15. 15. ParseProvide some structure for the data’smeaning, and order it into categories.Master on Software Engineering Human-Computer Interaction
  16. 16. FilterRemove all but the data of interest.Master on Software Engineering Human-Computer Interaction
  17. 17. MineApply methods from statistics or datamining as a way to discern patterns orplace the data in mathematical context.Master on Software Engineering Human-Computer Interaction
  18. 18. RepresentChoose a basic visual model, such asa bar graph, list, or tree.Master on Software Engineering Human-Computer Interaction
  19. 19. RefineImprove the basic representation to makeit clearer and more visually engaging.Master on Software Engineering Human-Computer Interaction
  20. 20. InteractAdd methods for manipulating the dataor controlling what features are visible.Master on Software Engineering Human-Computer Interaction
  21. 21. KDD PROCESSMaster on Software Engineering Human-Computer InteractionFayyad, U.M. 1996 - Knowledge discovery in data bases KDD process
  22. 22. 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. publicationsB. Shneiderman, The eyes have it: A task by data type taxonomy forinformation visualization, 1996Master on Software Engineering Human-Computer Interaction
  23. 23. 1D –DNA SEQUENCEMaster on Software Engineering Human-Computer Interactionhttp://en.wikipedia.org/wiki/File:DNA_sequence.svg
  24. 24. TEMPORAL - MULTI-SERIES LINE CHARTMaster on Software Engineering Human-Computer Interaction
  25. 25. 2D -MAPSMaster on Software Engineering Human-Computer Interaction
  26. 26. 3D - MOLECULEMaster on Software Engineering Human-Computer Interactionhttps://www.flickr.com/photos/schoschie/92731168/
  27. 27. 2D VS 3DMaster on Software Engineering Human-Computer Interaction• Actually quite controversial!• The general recommendation is to avoid3D in data visualization as it can presentproblems with occlusion and navigation• Most visualizations stay in the 2D or 2.5D
  28. 28. ND – IRIS CLUSTERSMaster on Software Engineering Human-Computer Interactionhttp://en.wikipedia.org/wiki/Iris_flower_data_set
  29. 29. TREE – PHYLOGENETIC TREE OF LIFEMaster on Software Engineering Human-Computer Interactionhttp://www.jasondavies.com/tree-of-life/
  30. 30. TREE – TREE MAPMaster on Software Engineering Human-Computer Interactionhttp://mbostock.github.io/d3/talk/20111018/treemap.html
  31. 31. NETWORKMaster on Software Engineering Human-Computer Interactionhttp://mbostock.github.io/d3/talk/20111116/force-collapsible.html
  32. 32. CLASSIFICATIONS OF VISUALIZATIONS• InfoGraphics vs. Data Visualization• Exploration vs. Explanation• Informative versus Persuasive vs. Visual ArtDesigning Data Visualization, Noah Iliinsky and Julie Steele,O’REILLYMaster on Software Engineering Human-Computer Interaction
  33. 33. INFOGRAPHICS• manually drawn ;• Specific to the data at hand;• aesthetically rich;• relatively data-poor.Master on Software Engineering Human-Computer Interaction
  34. 34. http://www.visual.ly/big-data
  35. 35. DATA VISUALIZATION• algorithmically drawn ;• easy to regenerate with different data;• often aesthetically barren;• relatively data-rich.Master on Software Engineering Human-Computer Interaction
  36. 36. http://arborjs.org/halfviz
  37. 37. EXPLORATORY DATA VISUALIZATIONS• is typically part of the data analysis phase, and isused to find the story the data has to tell.Master on Software Engineering Human-Computer Interaction
  38. 38. EXPLANATION DATA VISUALIZATIONS• already know what the data has to say, and youare trying to tell that story to somebody else.Master on Software Engineering Human-Computer Interaction
  39. 39. INFORMATIVE VS. PERSUASIVE VS. VISUAL ARTMaster on Software Engineering Human-Computer InteractionThe nature of the visualization depends on which relationship (between two of the threecomponents) is dominant
  40. 40. VISUAL INFORMATION-SEEKING MANTRA• Overview first, zoom and filter, then details-on-demand. [Shneiderman, 1996]Master on Software Engineering Human-Computer Interaction
  41. 41. INTERACTION: OPERATIONS ON THE DATA• sorting• filtering• browsing / exploring• comparison• characterizing trends and distributions• finding anomalies and outliers• finding correlation• following pathMaster on Software Engineering Human-Computer Interaction
  42. 42. INTERACTION: TECHNIQUES TO SUPPORT OPERATIONS• Re-orderable matrices - sorting• Selecting a subset of the data items - browsing• Linked views – comparison, correlation, differentperspectives• 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 - exploringMaster on Software Engineering Human-Computer Interaction
  43. 43. 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 ConsistencyMaster on Software Engineering Human-Computer Interaction
  44. 44. Case Study - WeatherMaster on Software Engineering Human-Computer InteractionWednesday ThursdayMorning Afternoon Evening Morning Afternoon EveningDescription Mostlycloudy.Cool.Widelyscatteredtstorms.More sunthan clouds.Mild.Scatteredshowers.Scatteredclouds.Mild.More sunthan clouds.CoolMore sunthan clouds.Pleasantlywarm.More sunthanclouds.Mild.Temperature 16 °C 23 °C 18 °C 11 °C 27 °C 18 °CComfort Level 16 °C 25 °C 18 °C 10 °C 27 °C 18 °CHumidity 85% 55% 81% 100% 36% 58%Visibility 15 km 5 km 4 km 15 km 24 km 19 kmChance ofRain 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/hhttp://www.timeanddate.com/weather/romania/iasi
  45. 45. Case Study - WeatherMaster on Software Engineering Human-Computer Interactionhttp://forecast.io
  46. 46. Case Study - WeatherMaster on Software Engineering Human-Computer Interaction
  47. 47. Case Study - TransportationMaster on Software Engineering Human-Computer Interactionhttp://www.ratp-iasi.ro/harta.html
  48. 48. Small ExperimentMaster on Software Engineering Human-Computer Interaction
  49. 49. ApplicationsMaster on Software Engineering Human-Computer Interactionhttp://mbostock.github.io/d3/talk/20111116/bundle.html
  50. 50. VISUALIZATION IN SOFTWARE ENGINEERINGMaster on Software Engineering Human-Computer Interactionhttp://www.ibm.com/developerworks/rational/library/content/RationalEdge/sep04/bell/
  51. 51. VISUALIZATION IN SOFTWARE ENGINEERINGMaster on Software Engineering Human-Computer InteractionStefan Negru "SemaKoDE: Hybrid System for Knowledge Discovery in Sensor-based SmartEnvironments" ICWE 2012
  52. 52. CREATING SPECTACLESMaster on Software Engineering Human-Computer Interactionhttp://www.creativeapplications.net/featured/d3-spectacles-uva/
  53. 53. VISUALIZATION TECHNOLOGYREVEALS A 5,500 YEAR OLDMURDER MYSTERYMaster on Software Engineering Human-Computer Interactionhttps://www.tii.se/media/news/swedish-visualization-technology-reveals-a-5500-year-old-murder-mystery
  54. 54. VISUALIZATION TECHNOLOGYREVEALS A 5,500 YEAR OLDMURDER MYSTERYMaster on Software Engineering Human-Computer Interactionhttp://www.flickr.com/photos/interactiveinstitute/sets/72157632016757994/
  55. 55. VISUALIZATION OF PROTEINDYNAMICS AND SYSTEMS BIOLOGYMaster on Software Engineering Human-Computer Interactionhttp://www.vis.uni-stuttgart.de/en/research/scientific-visualisation/visualization-of-protein-dynamics-and-systems-biology.html/
  56. 56. VISUALIZATION OF ENRICHMENT OFTUMOR MUTATIONSMaster on Software Engineering Human-Computer Interactionhttp://ayasdi.com/
  57. 57. GEPHI - OPEN GRAPH VIZ PLATFORMMaster on Software Engineering Human-Computer Interactionhttp://gephi.org/
  58. 58. NODEBOX - CREATE GENERATIVE DESIGNMaster on Software Engineering Human-Computer Interaction http://nodebox.net/
  59. 59. PROCESSING - PROGRAMMING LANGUAGE ANDENVIRONMENT FOR PEOPLE WHO WANT TOCREATE IMAGES, ANIMATIONS, ANDINTERACTIONS.Master on Software Engineering Human-Computer Interactionhttp://processing.org/
  60. 60. DEMOMaster on Software Engineering Human-Computer Interaction
  61. 61. THANK YOUStefan Negru• stefan.negru@info.uaic.ro• http://blankdots.comMaster on Software Engineering Human-Computer Interaction
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×