Information visualization - introduction
Upcoming SlideShare
Loading in...5
×
 

Information visualization - introduction

on

  • 1,242 views

 

Statistics

Views

Total Views
1,242
Views on SlideShare
1,070
Embed Views
172

Actions

Likes
3
Downloads
42
Comments
0

1 Embed 172

http://pointcarre.vub.ac.be 172

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Information visualization - introduction Information visualization - introduction Presentation Transcript

    • Information Visualization Katrien Verbert Department of Computer Science Faculty of Science Vrije Universiteit Brussel katrien.verbert@vub.ac.be 20/02/14 pag. 1
    • overview 1.  Examples   2.  History   3.  Defini7on   4.  Principles   5.  Workflow   6.  Tools  and   APIs   7.  Course  overview                         20/02/14 pag. 2
    • Where people run? hJp://flowingdata.com/2014/02/05/where-­‐people-­‐run/     pag. 3 20/02/14
    • visual explorations of urban mobility hJp://senseable.mit.edu/visual-­‐explora7ons-­‐urban-­‐mobility/touching-­‐bus-­‐rides.html     20/02/14 pag. 4
    • professional network hJp://inmaps.linkedinlabs.com/network   pag. 5   20/02/14
    • Immersion hJps://immersion.media.mit.edu/demo#     pag. 6 20/02/14
    • Last.fm music history hJp://www.frederikseiffert.de/lasthistory/     pag. 7 20/02/14
    • Twitter sentiment hJp://www.csc.ncsu.edu/faculty/healey/ tweet_viz/tweet_app/     20/02/14 pag. 8
    • overview 1.  Examples   2.  History   3.  Defini7on   4.  Principles   5.  Workflow   6.  Tools  and   APIs   7.  Course  overview                         20/02/14 pag. 9
    • Napoleon’s army drawn by Minard (1781-1870) Source: http://www.napoleanic-literature.com, © John Schneider 20/02/14 pag. 10
    • •  Thickness of brown line is proportional to number of soldiers (422,00 soldiers started out). •  Black similarly encodes the retreat (10,000 returned). •  Crossing of Berezina river. •  Temperature plot at the bottom. Source: Information Visualization Course, Katy Börner, Indiana University
    • William Playfair … and the line/area chart based on time series 20/02/14 pag. 12
    • William Playfair …and the bar chart 20/02/14 pag. 13
    • Florence Nightingale’s diagram showing the dramatic reduction in death rates in the hospitals of Scutari following the changes she introduced Source: Nightingale (1858)
    • Map of Cholera by John Snow in 1854 •  •  •  link between cholera and water cholera occurred among those near the Broad Street water pump removing the handle of the pump ended the neighborhood epidemic Source: Information Visualization Course, Katy Börner 20/02/14 pag. 15
    • London Underground Map by Harry Beck in 1933 •  Harry Beck’s London Underground’s way finding system is an extraordinary example of directional signage. •  Note the stylized angles (90 and 45 degrees) and the regular spacing between station stops. Source: Information Visualization Course, Katy Börner 20/02/14 pag. 16
    • overview 1.  Examples   2.  History   3.  Defini7on   4.  Principles   5.  Workflow   6.  Tools  and   APIs   7.  Course  overview                         20/02/14 pag. 17
    • information visualization the use of computer-supported, interactive, visual representations of abstract data to amplify cognition [Card et al. 1999] 20/02/14 pag. 18
    • How many circles? Slide  source:  Joris  Klerkx   20/02/14 pag. 19
    • How many circles? Humans have advanced perceptual abilities Our brains makes us extremely good at recognizing visual patterns Slide  source:  Joris  Klerkx   20/02/14 pag. 20
    • Overview Visualization Scientific visualization   Slide  source:  John  Stasko                         Information visualization   20/02/14 pag. 21
    • Information visualization Concerned with data that does not have a well-defined representation in 2D or 3D space (i.e., “abstract data”) Introduction to Information Visualization - Fall 2013 Slide  source:  Robert  Putman   20/02/14 pag. 22
    • Scientific visualization Specifically concerned with data that has a well-defined representation in 2D or 3D space (e.g., from simulation mesh or scanner). Introduction to Information Visualization - Fall 2013 Slide  source:  Robert  Putman   20/02/14 pag. 23
    • Also: visual analytics hJp://www.visual-­‐analy7cs.eu/faq/   20/02/14 pag. 24
    • Focus: information visualization 20/02/14 pag. 25
    • overview 1.  Examples   2.  History   3.  Defini7on   4.  Principles   5.  Workflow   6.  Tools  and   APIs   7.  Course  overview                         20/02/14 pag. 26
    • some bad examples 20/02/14 pag. 27
    • What’s wrong with this graph? Source: Stephen Few 20/02/14 pag. 28
    • Bar values should start at zero Source: Stephen Few 20/02/14 pag. 29
    • Bad examples hJp://flowingdata.com/category/sta7s7cs/mistaken-­‐data/   Source: Joris Klerkx 20/02/14 pag. 30
    • Bad examples hJp://flowingdata.com/category/sta7s7cs/mistaken-­‐data/   Source: Joris Klerkx 20/02/14 pag. 31
    • What about 3D? Source: Stephen Few 20/02/14 pag. 32
    • But what if there is a 3rd variable Source: Stephen Few 20/02/14 pag. 33 20/0 PAG
    • How to display additional variables? Source: Stephen Few 20/02/14 pag. 34
    • What about pie charts? “Save the pies for dessert” (Stephen Few) Source: Stephen Few 20/02/14 pag. 35
    • What makes these graphics bad? 20/02/14 pag. 36
    • Summary of Tufte’s Principles "The success of a visualization is based on deep knowledge and care about the substance, and the quality, relevance and integrity of the content." (Tufte, 1983) •  Tell the truth –  Graphical integrity •  Do it effectively with clarity, precision... –  Design aesthetics Source: Information Visualization Course, Katy Börner, Indiana University 20/02/14 pag. 37
    • design aesthetics 20/02/14 pag. 38
    • design aesthetics: five principles 1.  2.  3.  4.  5.  Above all else show the data. Maximize the data-ink ratio, within reason. Erase non-data ink, within reason. Erase redundant data-ink. Revise and edit. 20/02/14 pag. 39
    • Above all else, show the data 20/02/14 pag. 40
    • Above all else, show the data 20/02/14 pag. 41
    • Data-ink ratio “A large share of ink on a graphic should present data information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic...” (Tufte, 1983) 20/02/14 pag. 42
    • Data-Ink Ratio Data-ink ratio = data-ink Total ink used to print graphic = Proportion of a graphic’s ink devoted to the non-redundant display of datainformation. = 1.0 – proportion of graphic that can be erased without the loss of information 20/02/14 pag. 43
    • Data-ink ratio 20/02/14 pag. 44
    • What is the data-ink ratio? 20/02/14 pag. 45
    • What is the data-ink ratio? < 0.05 20/02/14 pag. 46
    • What is the data-ink ratio of this graphic? < 0.001 20/02/14 pag. 47
    • Five Principles 1.  Above all else show the data. 2.  Maximize the data-ink ratio. –  Within reason –  Every bit of ink on a graphic requires a reason 3.  Erase non-data ink, within reason. 4.  Erase redundant data-ink. 5.  Revise and edit. 20/02/14 pag. 48
    • Maximize the data-ink ratio, within reason (Tufte) “A pixel is a terrible thing to waste.” (Shneiderman) Slide  source:  Chris  North,  Virginia  Tech   20/02/14 pag. 49
    • Five Principles 1.  2.  3.  4.  5.  Above all else show the data. Maximize the data-ink ratio, within reason. Erase non-data ink, within reason. Erase redundant data-ink. Revise and edit. 20/02/14 pag. 50
    • Erase non-data ink  source:  Joey  Cherdarchuk   20/02/14 pag. 51
    • Erase non-data ink  source:  Joey  Cherdarchuk   20/02/14 pag. 52
    • Erase non-data ink  source:  Joey  Cherdarchuk   20/02/14 pag. 53
    • Erase redundant data-ink  source:  Joey  Cherdarchuk   20/02/14 pag. 54
    • Erase non-data ink  source:  Joey  Cherdarchuk   20/02/14 pag. 55
    • Erase redundant data-ink  source:  Joey  Cherdarchuk   20/02/14 pag. 56
    • Erase redundant data-ink  source:  Joey  Cherdarchuk   20/02/14 pag. 57
    • Erase redundant data-ink 20/02/14 pag. 58
    • Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 59
    • Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 60
    • Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 61
    • Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 62
    • Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 63
    • Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 64
    • Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 65
    • Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 66
    • Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 67
    • Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 68
    • Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 69
    • Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 70
    • Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 71
    • Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 72
    • Revise and edit 20/02/14 pag. 73
    • Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 74
    • Revise and edit  source:  Joey  Cherdarchuk   20/02/14 pag. 75
    • “Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away” – Antoine de Saint-Exupery 20/02/14 pag. 76
    • graphical integrity 20/02/14 pag. 77
    • Pseudo-decline 20/02/14 pag. 78
    • Lie factor Size  of  effect  shown  in  graphic   Lie Factor = --------------------------Size  of  effect  in  data     Edward  Tu)e   The  Visual  Display  of   Quan7ta7ve  Informa7on   page  57   (27.5-­‐18.0)/18=53%  actual  increase   (5.3-­‐0.6)/0.6=783%  visual  increase   Lie  factor=783/53=14.8   20/02/14 pag. 79
    • Same data, simple graphic 20/02/14 pag. 80
    • Lie factor •  Use of area to portray 1D data can be confusing –  Area  has  2  dimensions     •  The ‘incredible’ shrinking family doctor –  Lie  factor  of  2.8   –  Plus  perspec7ve  distor7on   –  Plus  incorrect  horizontal  spacing   20/02/14 pag. 81
    • Lie factor •  Use of area to portray 1D data can be confusing –  Area  has  2  dimensions     •  The ‘incredible’ shrinking dollar •  A more accurate representation of the 1978 dollar would be about twice the size of the one in this chart 20/02/14 pag. 82
    • overview 1.  Examples   2.  History   3.  Defini7on   4.  Principles   5.  Workflow   6.  Tools  and   APIs   7.  Course  overview                         20/02/14 pag. 83
    • Workflow •  •  •  •  •  •  •  Acquire Parse Filter Mine Represent Refine Interact Adapted  from    Fry,  Visualizing  Data   Available  at:  hJp://it-­‐ebooks.info/book/143/     Introduction to Information Visualization - Fall 2013 20/02/14 pag. 84
    • Workflow •  Acquire [p. 7, Fry, Visualizing Data] Introduction to Information Visualization - Fall 2013 20/02/14 pag. 85
    • Workflow •  Parse [p. Introduction to Information Visualization - Fall 2013 8, Fry, Visualizing Data] 20/02/14 pag. 86
    • Workflow •  Filter/Mine Introduction to Information Visualization - Fall 2013 [p. 10, Fry, Visualizing Data] 20/02/14 pag. 87
    • Workflow •  Represent [p. 10, Fry, Visualizing Data] Introduction to Information Visualization - Fall 2013 20/02/14 pag. 88
    • Workflow •  Refine [p. Introduction to Information Visualization - Fall 2013 12, Fry, Visualizing Data] 20/02/14 pag. 89
    • Workflow •  Interact •  Demo [p. 12, Fry, Visualizing Data] Introduction to Information Visualization - Fall 2013 20/02/14 pag. 90
    • Not the entire story! 20/02/14 pag. 91
    • overview 1.  Examples   2.  History   3.  Defini7on   4.  Principles   5.  Workflow   6.  Tools  and   APIs   7.  Course  overview                         20/02/14 pag. 92
    • Visualization tools and APIs! •  •  •  •  •  •  •  Many Eyes http://www-958.ibm.com/software/data/cognos/manyeyes/ Ggplot2 http://ggplot2.org/ Tableau public http://www.tableausoftware.com/public/ Google Charts http://code.google.com/apis/chart/interactive/docs/gallery.html Simile Widgets http://www.simile-widgets.org/ Processing.js http://processingjs.org/ D3.js http://d3js.org/ 20/02/14 pag. 93
    • Many Eyes http://www-958.ibm.com/software/ data/cognos/manyeyes/" / name of department 20/02/14 pag. 94
    • Tableau public hJp://www.tableausocware.com/public/community     20/02/14 pag. 95
    • Google chart: treemap example hJps://developers.google.com/chart/ interac7ve/docs/gallery/treemap     20/02/14 pag. 96 20/0 PAG
    • Simile Widgets •  http://www.simile-widgets.org/ 20/02/14 pag. 97 20/0 PAG
    • Timeplot hJp://www.simile-­‐widgets.org/7meplot/docs/     20/02/14 pag. 98 20/0 PAG
    • Processing.js •  http://processingjs.org/ 20/02/14 pag. 99 20/0 PAG
    • D3.js! •  http://d3js.org/ •  demo: http://vimeo.com/29862153 20/02/14 pag. 100
    • D3 example treemap hJp://bl.ocks.org/mbostock/4063582     / name of department 20/02/14 pag. 101 20/0 PAG
    • D3 resources •  •  •  •  •  •  •  •  •  •  •  •  http://vimeo.com/m/35005701 - nice overview and run-through video/talk http://alignedleft.com/tutorials/d3/ - thorough d3 tutorials from an academic instructor and the author of the open OReilly book, "Interactive Data Visualization for the Web" (look for free preview link for the actual book draft https://github.com/mbostock/d3/wiki/Tutorials - big list of resources from the author of D3 https://github.com/mbostock/d3/wiki/API-Reference - well-done D3 documentation http://www.d3noob.org - free ebook with lots of tips and tricks, actively update http://www.jeromecukier.net/wp-content/uploads/2012/10/d3-cheat-sheet.pdf - cheat sheet for D3, also see parent site for blog post https://groups.google.com/forum/?fromgroups=#!forum/d3-js - D3 Google group http://bost.ocks.org/mike/selection/ - Guide to understanding selections, key part of D3. http://benclinkinbeard.com/talks/2012/NCDevCon/ - A talk, with interactive examples and code snippets, explaining d3 http://enjalot.github.com/dot-enter/ - A live-coding set of videos to walk through a lot of the basics http://enjalot.github.com/dot-append/ - A live-coding set of videos to walk through a lot of the basics (part 2) http://tributary.io/ - A fast prototyping lounge similar to CodePen to let you test your ideas out. Used by the enjalot fellow. Source: John Stasko 20/02/14 pag. 102
    • D3 support •  Active community online –  hJps://github.com/mbostock/d3/wiki   –  Including  Mike  Bostock  ocen  answering  ques7ons   •  In active development –  Though  the  cri7cal  features  are  unlikely  to  change   20/02/14 pag. 103
    • hJp://blog.profitbricks.com/39-­‐data-­‐visualiza7on-­‐tools-­‐for-­‐big-­‐data/   20/02/14 pag. 104
    • overview 1.  Examples   2.  History   3.  Defini7on   4.  Principles   5.  Workflow   6.  Tools  and   APIs   7.  Course  overview                         20/02/14 pag. 105
    • About me 20/02/14 pag. 106
    • About me 20/02/14 pag. 107
    • Teaching assistant •  Sandra Trullemans http://wise.vub.ac.be/sandra-trullemans 20/02/14 pag. 108
    • Required text book 20/02/14 pag. 109
    • Course goals   know  the     founda1ons   learn  the  principles  of   informa7on  visualiza7on                   Learn  about  exis1ng   techniques  and  systems     learn  about  exis7ng   techniques  and  systems,   and  their  effec7veness       develop  the  knowledge   to  select  appropriate   visualiza7on  techniques   for  par7cular  tasks         build       build  your  own     visualiza7ons     apply  theore7cal     founda7ons           20/02/14 pag. 110
    • Grading   Team  project   build  an  interac7ve  visualiza7on   in  teams                   Research  paper     present  research  paper  during   WPO  hours     +       prepare  3  ques7ons  about  a   second  paper           40%   20%   Exam     Oral  exam   Closed  book                   40%   20/02/14 pag. 111
    • Grading   Team  project   build  an  interac7ve  visualiza7on   in  teams                   Research  paper     present  research  paper  during   WPO  hours     +       prepare  3  ques7ons  about  a   second  paper           40%   20%   Exam     Oral  exam   Closed  book                   40%   20/02/14 pag. 112
    • Team project: an interactive visualization •  Teams of 3-4 •  Limited number of restrictions •  Be creative! 20/02/14 pag. 113
    • Team project •  hands-on experience of building interactive visualizations •  using D3 20/02/14 pag. 114
    • Inspiration •  •  Related courses KU Leuven: http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course1314 Berkeley: http://blogs.ischool.berkeley.edu/i247s13/ Columbia university: http://columbiadataviz.wordpress.com/student-work/   Other examples Information is beatiful: http://www.informationisbeautiful.net/2013/over-300-of-the-best-datavisualization/?utm_source=feedly Gap Minder World: http://www.gapminder.org/world Netflix Map http://www.nytimes.com/interactive/2010/01/10/nyregion/20100110netflix-map.html NYC Parking Map http://www.nytimes.com/interactive/2008/11/26/nyregion/ 20081128_PARKING.html How people spend their day http://www.nytimes.com/interactive/2009/07/31/business/20080801metrics-graphic.html 20/02/14 pag. 115
    • hJp://nycusefuldata.com/     20/02/14 pag. 116
    • hJp://bit.ly/1fqy8yy         20/02/14 pag. 117
    • Datasets hJp://websci14.org/#info   20/02/14 pag. 118 20/0 PAG
    • Team project milestones 1.  2.  3.  4.  5.  due  27  Feb.   Form teams due  13  March   Project proposal due  3  April   Intermediate presentation Final presentation Short report 22  May   due  29  May   20/02/14 pag. 119
    • Project proposal 1 page description of your intended project: –  mo7va7on   –  which  datasets  you  will  use   –  current  status.  If  available,  first  designs.   –  problems/ques7ons   due 13 March If you want earlier feedback, send us your proposal earlier ;-) 20/02/14 pag. 120
    • Intermediate and final presentation •  •  •  •  20 mins (15 mins presentations + 5 mins questions) What is your project about? Most important part final presentation: demo What have you learned when implementing the project? 20/02/14 pag. 121
    • Short report (max. 3 pages) Motivation Dataset Visualization design and implementation Reflection –  How  is  your  work  related  to  the  topics  taught  in  the  course?   –  If  you  would  start  over,  what  would  you  do  differently?   •  Effort –  How  much  effort  did  it  take  to  implement  the  project?     –  how  did  you  distribute  it  in  your  group?   •  •  •  •  20/02/14 pag. 122
    • Grading   Team  project   build  an  interac7ve  visualiza7on   in  teams                   Research  paper     present  research  paper  during   WPO  hours     +       prepare  3  ques7ons  about  a   second  paper           40%   20%   Exam     Oral  exam   Closed  book                   40%   20/02/14 pag. 123
    • Research paper •  Select papers from list available on pointcarré –  Present  a  paper  of  your  choice  in  class   –  Prepare  3  ques7on  about  a  second  paper   •  Topics: –  –  –  –  –  –  –  –  –  Trees   Hierarchies   Focus  +  context   Graphs   Time  series   Interac7on   Documents   Social  media   …   •  Individual assignment 20/02/14 pag. 124
    • Research presentation •  Selected papers available on PointCarré •  Select paper at: http://doodle.com/3ubzmy6fid4baqgk •  When all presentations are scheduled: select a second paper for questions. 20/02/14 pag. 125
    • Grading   Team  project   build  an  interac7ve  visualiza7on   in  teams                   Research  paper     present  research  paper  during   WPO  hours     +       prepare  3  ques7ons  about  a   second  paper           40%   20%   Exam     Oral  exam   Closed  book                   40%   20/02/14 pag. 126
    • Oral exam •  40% of the grade •  Closed book •  Material: –  Robert  Spence.  Informa7on  visualiza7on:  design  for  interac7on   –  Lecture  slides   –  Two  research  papers   •  Paper  from  presenta7on   •  Paper  you  asked  ques7ons  about   •  Example questions will be posted 20/02/14 pag. 127
    • Tentative schedule week   date   Lecture     14:00-­‐16:00   WPO   16:00-­‐18:00   23   20  Feb.   Introduc7on:  defini7on,  examples,   toolkits,  overview  assignments   24   27  Feb.   Percep7on  and  principles   25   6  March   Representa7on:  values  and  rela7ons   26   13  March   Presenta7on   presenta7ons   27   20  March   Interac7on   presenta7ons   28   27  March   Case  studies   presenta7ons   29   3  April   32   24  April   Informa7on  dashboards   presenta7ons   34   8  May   Visual  analy7cs   presenta7ons   35   15  May   No  lecture:  work  on  team  projects   36   22  May   Final  team  project  presenta7ons   Intermediate  team  project  presenta7ons   20/02/14 pag. 128
    • Contact Office     Katrien:  10F721   Sandra:  10G731e       Email     Katrien:  katrien.verbert@vub.ac.be   Sandra:  sandra.trullemans@vub.ac.be       20/02/14 pag. 129
    • Questions? 20/02/14 pag. 130
    • 5 minute paper What do YOU expect from this course? 20/02/14 pag. 131
    • Additional examples •  •  •  •  •  •  http://infosthetics.com/ http://visualizing.org http://www.visualcomplexity.com/vc/ http://visual.ly/ http://flowingdata.com http://www.infovis-wiki.net Introduction to Information Visualization - Fall 2013 20/02/14 pag. 132
    • Readings •  Chapter 1 – 2 20/02/14 pag. 133
    • The beauty of data visualization - David McCandless hJp://www.youtube.com/watch?v=5Zg-­‐C8AAIGg     20/02/14 pag. 134
    • Don’t forget Form teams by 27 February 20/02/14 pag. 135
    • Next lecture: perception and principles 20/02/14 pag. 136
    • References •  Stuart K. Card, Jock D. Mackinlay, and Ben Scheiderman, Academic Press, San Diego CA, 1999, p. 7 20/02/14 pag. 137