• Save
Introduction to Information Visualization (Part 2)
Upcoming SlideShare
Loading in...5
×
 

Introduction to Information Visualization (Part 2)

on

  • 2,048 views

Critical Practice Information Design at Luca - Campus Sint Lukas Brussels

Critical Practice Information Design at Luca - Campus Sint Lukas Brussels

Statistics

Views

Total Views
2,048
Views on SlideShare
2,048
Embed Views
0

Actions

Likes
4
Downloads
0
Comments
1

0 Embeds 0

No embeds

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…
  • Please.. Could you send de file? alandey@gmail.com
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to Information Visualization (Part 2) Introduction to Information Visualization (Part 2) Presentation Transcript

  • Critical Practice II: DatavizLuca - Campus Sint-Lukas Brussela/prof. Andrew Vande MoereDepartment of Architecture, Urbanism & Planning - ASRO - KU Leuven------.----------@asro.kuleuven.be - http://infosthetics.com - @infosthetics
  • Prof. Hans Rosling - Talk at TED Conference 2006
  • information visualisation “... is the use of computer- supported, interactive, visual representations of abstract data to amplify cognition”Information Visualization Definition
  • “information visualisation is the use of computer-supported, interactive, visual representations of abstract data to amplify cognition”. automatic/automated algorithm. versus custom or hand-made (e.g. sketching!). facilitates dealing with highly ‘complex’ data
  • “information visualisation is the use of computer-supported, interactive, visual representations of abstract data to amplify cognition”. to make assumptions, test hypotheses. to allow individualized exploration scenarios. while and during the exploration itself
  • “Overview, zoom and filter, then details on demand” (Schneiderman’s Information Seeking Mantra)Subsets: sorting, filtering, browsing/ exploring, comparing, characterizing trends and distributions, finding trend, patterns, anomalies and outliers, ...
  • “Focus + Context” enables overview (context, at reduced detail) and detailed information (focus, in greater detail) simultaneously, without occlusion. It allows the user to show detailed informations linked with the context, by also having the possibility to focus on other informations by interacting with the system.Combined either via “Time” (sequentially” or “Space” (different portions of the screen estate).
  • “Brushing” is selecting a subset of the data items with an input device (mouse). This is usually done to highlight this subset, but it can also be done to delete it from the view or to de-emphasize it, if the user wants to focus on the other items. (Voigt, 2002)“Linking” causes the brush effect (highlighting, etc.) to be applied on those points in the other plots that represent the same data items.
  • “information visualisation is the use of computer-supported, interactive, visual representations of abstract data to amplify cognition”. just ‘representing’ values or conveying meaning?. guiding users, show example insights, highlighting. engagement? involvement? immersion?
  • “information visualisation is the use of computer-supported, interactive, visual representations of abstract data to amplify cognition”. data without natural representation. requires metaphor to be perceived. data is “mapped” in visual form
  • “information visualisation is the use of computer-supported, interactive, visual representations of abstract data to amplify cognition”. analytics versus communication. understanding/exploring - telling/persuading. goal: creating insights:
  • . What is Insight?. complex: combining data as synthesis. deep: builds over time, generates other questions. qualitative: not exact, uncertain, subjective, .... unexpected: unpredictable, creative, .... relevant: needs expertise around data, has impact“Towards Measuring Insight”, North, 2006
  • .Visualization for Exploration. e.g. information visualization, visual analytics, .... generating hypotheses during exploration. identifying unpredictable, unexpected, ... patterns.Visualization for Communication. e.g. infographics, visual storytelling, .... supporting hypotheses during explanation
  • Communication via Visualization (here: more geographical mapping)Small arms and Ammunitionhttp://workshop.chromeexperiments.com/projects/armsglobe/
  • Exploration via VisualizationGapMinder Worldhttp://www.gapminder.org/world
  • Communication via Visualization (here: more geographical mapping)“The 1 Million Block” - http://www.spatialinformationdesignlab.org/projects.php?id=16- http://www.spatialinformationdesignlab.org/MEDIA/PDF_04.pdf - http://www.spatialinformationdesignlab.org/MEDIA/ThePattern.pdf
  • The 1 Million Block
  • The 1 Million Block
  • ThemeRiver - pnl.gov - 1999http://vis.pnnl.gov/pdf/themeriver99.pdf
  • ThemeRiver - pnl.gov - 1999http://vis.pnnl.gov/pdf/themeriver99.pdf
  • Stacked Graphs – Geometry & Aesthetics - StreamGraphs - Lee Byron - 2007http://www.leebyron.com/else/streamgraph/
  • The Ebb and Flow of Movies - The New York Timeshttp://www.nytimes.com/interactive/2008/02/23/movies/20080223_REVENUE_GRAPHIC.html
  • From “research” in visualization to visualization “practice”
  • Movie Narrative Charts - Randall Munroe - xkcdhttp://xkcd.com/657/large/
  • zSoftware Evolution Storylines - Ogawa and Ma - 2010http://www.michaelogawa.com/research/storylines/
  • Software Evolution Storylines - Ogawa and Ma - 2010http://www.michaelogawa.com/research/storylines/
  • Design Considerations for Optimizing Storyline VisualizationsYuzuru Tanahashi and Kwan-Liu Ma - 2012http://ieeexplore.ieee.org/stamp/stamp.jsp?arnumber=06327274
  • Design Considerations for Optimizing Storyline VisualizationsYuzuru Tanahashi and Kwan-Liu Ma - 2012http://ieeexplore.ieee.org/stamp/stamp.jsp?arnumber=06327274
  • From visualization ‘exploration’ to visualization ‘research’
  • Information VisualizationPopularity1. Graphical Power2. Data “Addiction”3. Software / Tools Availability4. Data Availability5. Cross-Disciplinary Education6.Wide & Responsible Applications
  • Graphical Power
  • Graphical Power
  • Data Addiction
  • Data Addiction
  • Data Addiction
  • Software Tools AvailabilityMAX/MSP - http://cycling74.com
  • Software Tools AvailabilityProcessing - http://processing.org
  • Software Tools AvailabilityVVVV - http://vvvv.org
  • Software Tools AvailabilityOpenFrameWorks - http://openframeworks.cc
  • Software Tools AvailabilityMicrosoft Excel
  • Software Tools AvailabilityGoogle Chart Toolshttps://developers.google.com/chart/https://developers.google.com/chart/interactive/docs/examples
  • Software Tools AvailabilityD3.js - http://d3js.org/
  • Software Tools AvailabilityIBM Many Eyes - http://www-958.ibm.com/software/data/cognos/manyeyes/
  • Software Tools AvailabilityTableau Public - http://www.tableausoftware.com/public/
  • Software Tools AvailabilityVenngage - http://venngage.com/
  • Software Tools AvailabilityEaselly - http://www.easel.ly/
  • Software Tools AvailabilityInfogram - http://infogr.am/
  • Software Tools Matrix (especially Javascript libraries, not tools or software)http://selection.datavisualization.ch/
  • Data AvailabilityData Gov US - http://data.gov
  • Data AvailabilityData Gov UK - http://data.gov.uk
  • Data AvailabilityOpen Data London - http://data.london.gov.uk/
  • Data AvailabilityOpen Data Toronto - http://www.toronto.ca/open/
  • Data AvailabilityOpen Data San Francisco - http://datasf.org
  • Data AvailabilityOpen Data San Francisco - http://datasf.org
  • Data AvailabilityOpen Data Gent - http://data.gent.be/
  • Data AvailabilityOpen Data Brussels - http://www.brussel.be/artdet.cfm?id=7191
  • Stamen Travel Time Maps - Commuting Times versus Housing Priceshttp://www.mysociety.org/2007/more-travel-maps/morehousing
  • Cross-Disciplinary (Visualization) Education and ResearchComputer Science + Design + Statistics + Geography + Data MiningApplied to genomics, social sciences, economics, life sciences, sustainability, ...
  • data insight10010110 knowledge transfer data mapping mapping inversion visualisation comprehension ! visual transfer Visual Mapping Methodology
  • Web2DNAhttp://www.baekdal.com/web2dna/
  • Web2DNA Flickr Collectionhttp://www.flickr.com/photos/tags/web2dna/
  • Choice of “Metaphor”. can be potentially seemingly “useless”. yet receive a lot of interest. how to interpret “useful”?. persuasiveness of visual representations?
  • Visualization as a “Medium”. scientific visualization. data graphics. infographics. information design. data art
  • 1. (Scientific) Visualization
  • LineAO - Improved Three-Dimensional Line Renderinghttp://www.informatik.uni-leipzig.de/~ebaum/Publications/eichelbaum2012a/
  • DNA Coiling, Replication, Transcription and Translation - WEHIhttp://www.youtube.com/watch?v=DA2t5N72mgw
  • 2. Data GraphicsEurovizion - Ben Willershttp://lifeindata.site50.net/work/eurovizion/eurovizion.html
  • Statistical Atlases of the United States - 1870-1890http://www.handsomeatlas.com/
  • The Jobless Rate for People Like You - The New York Timeshttp://www.nytimes.com/interactive/2009/11/06/business/economy/unemployment-lines.html
  • Four Ways to Slice Obama’s 2013 Budget Proposal - The New York Timeshttp://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html
  • Spotlight on Profitability - Information is Beautiful Competition Entry (not winning...)http://www.informationisbeautifulawards.com/2012/02/hollywood-visualisation-challenge-design-shortlist/http://szucskrisztina.hu/images/holly.png
  • 2. Information Graphics
  • Starbucks Coffee Cup vs. Country Origins - Fast Food Revenue vs. Brands
  • Telenet Social Media Reporthttp://blog.telenet.be/wp-content/uploads/2012/01/Telenet-Social-Media-Report-20111.jpg
  • Year Report 2011 - http://feltron.com
  • Debtris - David McCandless / Information is Beautifulhttp://www.informationisbeautiful.net/2010/debtris/
  • 4. Data VisualizationOECD Better Life Index - Moritz Stefanerhttp://www.oecdbetterlifeindex.org/
  • Flight & Expulsion - Nice Onehttp://www.niceone.org/lab/refugees/
  • Take a Look at Health - Fathom Designhttp://visualization.geblogs.com/visualization/health_visualizer/
  • 5. Information DesignChromosome 14 - Ben Fry
  • We Feel Fine - Jonathan Harris and Sep Kamvarhttp://www.wefeelfine.org/
  • WorldShapin - Compare Countries through their Shape - Carlo Zapponi & Vasundhara Parakhhttp://www.worldshap.in/#/PH/BZ/KE/
  • Notabilia - Visualizing Deletion Discussions on Wikipedia - Moritz Stefanerhttp://notabilia.net/
  • 6. Information ArtDNA Portrait - dna11.com
  • Getting Lost - Marco Bagnihttp://vimeo.com/37031074
  • TextArc - An Alternative Way to View a Text - Brad Paleyhttp://www.textarc.org/
  • Poetry on the Road 6 - Boris Müllerhttp://www.esono.com/boris/projects/poetry06/
  • DoodleBuzz - A Typographic News Explorerhttp://www.doodlebuzz.com/
  • Name Trendshttp://nametrends.net/name.php?name=Andrew
  • Baby Name Wizard - Martin Wattenberghttp://www.babynamewizard.com/voyager#
  • 1. The Role of Interaction
  • Amazon Digital Cameras Treemap - The Hive Grouphttp://www.hivegroup.com/demos/amazon/499052.html
  • Newsmap - Marumishi - 2004http://newsmap.jp/ and http://marumushi.com/projects/newsmap
  • 2. The Role of Aesthetics
  • A Year in Iraq and Afghanistan - The New York Times - 2009http://www.nytimes.com/2011/01/30/opinion/30casualty-chart.html
  • Faces of the Fallen - Washington Post - 2009http://apps.washingtonpost.com/national/fallen/
  • UK Casualties in Afghanistan and Iraq - BBC News - 2009http://www.bbc.co.uk/news/uk-10634102
  • CNN Home and Away - CNN - Stamen Designhttp://edition.cnn.com/SPECIALS/war.casualties/
  • Monument - Caleb Larsen - 2006http://caleblarsen.com/
  • Monument - Caleb Larsen - 2006http://caleblarsen.com/
  • 3. The Role of Data Focus (~ Meaning)
  • Lau A. and Vande Moere A. (2007), "Towards a Model of Information Aesthetic Visualization",IEEE International Conference on Information Visualisation (IV07), pp. 87-92.
  • Aesthetic Effect in Data Visualization - Nick Cawthon and Andrew Vande Moere - 2007
  • Aesthetic Effect in Data Visualization - Nick Cawthon and Andrew Vande Moere - 2007
  • Aesthetic Effect in Data Visualization - Most Beautiful
  • Aesthetic Effect in Data Visualization - Least Beautiful
  • Aesthetic Effect in Data Visualization - Correct Responses
  • Aesthetic Effect in Data Visualization - Least Correct Responses
  • Aesthetic Effect in Data Visualization - Low Abandonment Rate
  • Aesthetic Effect in Data Visualization - High Abandonment Rate
  • “Reversible”“Factual”Gapminder (2007)Many Eyes (2007)OECD eXplorer (2009)
  • “Irreversible”“Meaningful” Bitalizer (2008) Poetry on the Road (2004) Texone (2005)
  • Partly “Reversible”Partly “Factual” Digg Swarm (2007) ReMap (2009) We Feel Fine (2006)
  • “Analytical” Style (ANA)
  • “Magazine” Style (MAG)
  • “Artistic” Style (ART)
  • Insight Analysis Rating (1 - 5) ANA MAG ART uncertain - confident 4.10 (1.11) 4.21 (0.87) 4.17 (0.95) difficult - easy 3.78 (1.17) 3.63 (1.29) 4.00 (1.24) shallow - deep 3.18 (1.10) 2.93 (1.08) 2.54 (1.17)shallow – deep (expert rating) 2.44 (0.78) 2.36 (0.70) 2.28 (0.64)
  • Insight Analysis Rating (1 - 5) ANA MAG ART ugly - beautiful 3.48 (0.85) 3.08 (1.03) 3.11 (1.02) obtrusive - fluid 3.27 (0.95) 3.08 (1.01) 2.80 (1.00) ambiguous - clear 3.39 (1.17) 1.98 (0.89) 2.00 (0.86)difficult - easy to understand 3.55 (1.04) 2.08 (1.07) 2.14 (1.07) intended inform – express 2.80 (1.15) 3.54 (1.18) 3.66 (1.06) useless - useful 3.61 (0.95) 2.70 (1.09) 2.45 (0.90) frustrating - enjoyable 3.43 (1.00) 2.54 (1.16) 2.34 (1.06) unusable - usable 3.77 (0.91) 2.78 (1.13) 2.64 (1.12) boring - engaging 3.43 (0.93) 3.10 (0.95) 2.80 (1.00) non-functional - functional 3.93 (0.82) 2.80 (1.18) 2.50 (1.13) tool - art 2.30 (1.07) 3.32 (1.19) 3.68 (0.93)
  • Lau A. and Vande Moere A. (2007), "Towards a Model of Information Aesthetic Visualization",IEEE International Conference on Information Visualisation (IV07), pp. 87-92.
  • Lau A. and Vande Moere A. (2007), "Towards a Model of Information Aesthetic Visualization",IEEE International Conference on Information Visualisation (IV07), pp. 87-92.
  • Sketchy Rendering for Information Visualization, Wood et al., 2012http://tobias.isenberg.cc/personal/papers/Wood_2012_SRI.pdf
  • Sketchy Rendering for Information Visualization, Wood et al., 2012http://tobias.isenberg.cc/personal/papers/Wood_2012_SRI.pdf
  • Our Irresistible Fascination with All Things Circularhttp://www.perceptualedge.com/articles/visual_business_intelligence/our_fascination_with_all_things_circular.pdf
  • Our Irresistible Fascination with All Things Circularhttp://www.perceptualedge.com/articles/visual_business_intelligence/our_fascination_with_all_things_circular.pdf
  • “Useful Junk? The Effects of Visual Embellishment on Comprehension andMemorability of Charts”, Bateman et al.,http://hci.usask.ca/uploads/173-pap0297-bateman.pdf
  • “Guidelines for designing information charts often state that the presentation shouldreduce ‘chart junk‘ – visual embellishments that are not essential to understanding thedata. In contrast, some popular chart designers wrap the presented data in detailed andelaborate imagery, raising the questions of whether this imagery is really asdetrimental to understanding as has been proposed, and whether thevisual embellishment may have other benefits. To investigate these issues, weconducted an experiment that compared embellished charts with plain ones, andmeasured both interpretation accuracy and long-term recall. We found that people‘saccuracy in describing the embellished charts was no worse than forplain charts, and that their recall after a two-to-three-week gap wassignificantly better. Although we are cautious about recommending that all charts beproduced in this style, our results question some of the premises of the minimalistapproach to chart design.”“Useful Junk? The Effects of Visual Embellishment on Comprehension andMemorability of Charts”, Bateman et al.,http://hci.usask.ca/uploads/173-pap0297-bateman.pdf
  • “Useful Junk? The Effects of Visual Embellishment on Comprehension andMemorability of Charts”, Bateman et al., http://hci.usask.ca/uploads/173-pap0297-
  • “The Chart Junk Debate”, Stephen Fewhttp://www.perceptualedge.com/articles/visual_business_intelligence/the_chartjunk_debate.pdf
  • “Benefitting InfoVis with Visual Difficulties”, Hullman et al.http://misc.si.umich.edu/publications/83
  • Many well-cited theories for visualization design state that a visual representation should beoptimized for quick and immediate interpretation by a user. Distracting elements likedecorative “chartjunk” or extraneous information are avoided so as not toslow comprehension. Yet several recent studies in visualization research provide evidencethat non-efficient visual elements may benefit comprehension and recall onthe part of users. Similarly, findings from studies related to learning from visual displays invarious subfields of psychology suggest that introducing cognitive difficulties tovisualization interaction can improve a user’s understanding of importantinformation. In this paper, we synthesize empirical results from cross-disciplinary researchon visual information representations, providing a counterpoint to efficiency-based designtheory with guidelines that describe how visual difficulties can be introduced to benefitcomprehension and recall. We identify conditions under which the application of visualdifficulties is appropriate based on underlying factors in visualization interaction like activeprocessing and engagement. We characterize effective graph design as a trade-off betweenefficiency and learning difficulties in order to provide Information Visualization (InfoVis)researchers and practitioners with a framework for organizing explorations of graphs forwhich comprehension and recall are crucial. We identify implications of this view for thedesign and evaluation of information visualizations.“Benefitting InfoVis with Visual Difficulties”, Hullman et al.http://misc.si.umich.edu/publications/83
  • “Benefitting InfoVis with Visual Difficulties”, Hullman et al.http://misc.si.umich.edu/publications/83
  • A Tour through theVisualization Zoohttp://queue.acm.org/detail.cfm?id=1805128
  • Design Study Methodology: Reflections from the Trenches and the StacksMichael Sedlmair, Miriah Meyer, Tamara Munzner, IEEE Infovis 2012http://www.cs.ubc.ca/nest/imager/tr/2012/dsm/
  • Design Study Methodology: Reflections from the Trenches and the StacksMichael Sedlmair, Miriah Meyer, Tamara Munzner, IEEE Infovis 2012http://www.cs.ubc.ca/nest/imager/tr/2012/dsm/
  • Design Study Methodology: Reflections from the Trenches and the StacksMichael Sedlmair, Miriah Meyer, Tamara Munzner, IEEE Infovis 2012http://www.cs.ubc.ca/nest/imager/tr/2012/dsm/
  • your techniqueDesign Study Methodology: Reflections from the Trenches and the StacksMichael Sedlmair, Miriah Meyer, Tamara Munzner, IEEE Infovis 2012http://www.cs.ubc.ca/nest/imager/tr/2012/dsm/
  • Design Study Methodology: Reflections from the Trenches and the StacksMichael Sedlmair, Miriah Meyer, Tamara Munzner, IEEE Infovis 2012http://www.cs.ubc.ca/nest/imager/tr/2012/dsm/
  • Narrative Visualization: Telling Stories with DataEdward Segel and Jeffrey Heerhttp://vis.stanford.edu/files/2010-Narrative-InfoVis.pdfGenres of Narrative Visualization, Balancing Author-Driven versus Reader-Driven Stories
  • Narrative Visualization: Telling Stories with DataEdward Segel and Jeffrey Heerhttp://vis.stanford.edu/files/2010-Narrative-InfoVis.pdf
  • “Welke supermarkt is het goedkoopst?”, De Standaard
  • “Winst van Bedrijven in Groeilanden”, De Standaard
  • “Evolutie Economische Groei”, 2 november 2012
  • “Ondernemersklimaat wereldwijd verbeterd”, De Standaard, 24 oktober 2012
  • “Negen Swing States”, Knack, 24 oktober 2012
  • “Hoeveel Jobs worden gecreeerd bij een indexsprong”, De Standaard
  • “4 Studiemethodes”, De Standaard Online, 10 september 2012
  • “MBA, een goudmijn voor uw carriere”, vacature.com
  • “Evolutie loonkosten in de technologiesector”, De Standaard
  • “Tarieven in België”, Knack, http://www.knack.be/infografiek-hoeveel-kost-een-mooi-lijf/
  • “500 jobs bedreigd”, Het Nieuwsblad, 27 oktober 2012
  • Thank you! Questions?------.----------@asro.kuleuven.be /// http://infosthetics.com /// @infosthetics