Your SlideShare is downloading. ×
0
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Information visualisation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Information visualisation

932

Published on

Slides for Information Visualisation Unit of HCICourse.com

Slides for Information Visualisation Unit of HCICourse.com

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

  • Be the first to like this

No Downloads
Views
Total Views
932
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. information visualisation Alan Dix
  • 2. example Map your moveswhere New Yorkers move (10 years data)distorted mapcircle = moves for one zip codered – outblue – inoverlaidhttp://moritz.stefaner.eu/projects/map%20your%20moves/
  • 3. example Map your movesinteractive: selecting a zip code shows where movements to/fromalso hiding: what you don’t show also importanthttp://moritz.stefaner.eu/projects/map%20your%20moves/
  • 4. what is visualistion? making data easier to understand using direct sensory experience especially visual!but can have aural, tactile ‘visualisation’
  • 5. direct sensory experience N.B. sensory rather than linguisitic sort of right/left brain stuff!but ... may include text, numbers, etc.
  • 6. visualising in text alignment - numbersthink purpose! 532.56 179.3 256.317which is biggest? 15 73.948 1035 3.142 497.6256
  • 7. visualising in text alignment - numbersvisually: 627.865 long number = big number 1.005763 382.583 2502.56align decimal points 432.935or right align integers 2.0175 652.87 56.34
  • 8. visualising in text TableLenslike a ‘spreadsheet’ ...... but some rows squashed to one pixel highnumbers become small histogram bars
  • 9. visualising in text TableLensN.B. also an example of focus+context focus some rows in full detail context whole dataset can also be seen in overview
  • 10. especially visual visual cortex is 50% of the brain! ... but disability, context, etc.,may mean non-visual forms needed
  • 11. why visualisation? for the data analystscientist, statistician, possibly you! for the data consumeraudience, client, reader, end-user
  • 12. why visualisation? understandingconsumer focus on well understood, simple representations rhetoric
  • 13. why visualisation? to help others see what the analyst understanding has already seen consumer infographics rhetoric data journalismhttp://www.guardian.co.uk/news/datablog/2010/oct/18/deficit-debt-government-borrowing-data
  • 14. why visualisation? the business plan hockey stick! understandingconsumer rhetoric to persuade readers of particular point lies, damn lies, (and not others!) and graphs
  • 15. why visualisation? understandinganalyst powerful, often novel visualisations, training possible exploration
  • 16. why visualisation? to make more clear understanding particular aspects of data consumer confirming hypotheses noticing exceptions exploration e.g. box plots ingraph from: Measurement of the neutrino velocity with the OPERA detector in the CNGS
  • 17. why visualisation? seeking the unknown avoiding the obvious understanding wary of happenstanceconsumer exploration to find new things that have not been previously considered
  • 18. a brief history of visualisation from 2500 BC to 2012
  • 19. a brief history ...static visualisation – the first 2500 yearsinteractive visualisation – the glorious ’90sand now? – web and mass data – visual analytics
  • 20. static visualisation from clay tablets to TufteMesopotamian tablets
  • 21. static visualisation from clay tablets to TufteMesopotamian tablets10th Century time line
  • 22. static visualisation from clay tablets to TufteMesopotamian tablets10th Century time line1855 Paris-Lyon train timetable
  • 23. static visualisation from clay tablets to TufteMesopotamian tablets10th Century time line1855 Paris-Lyon train timetableExcel etc.
  • 24. static visualisationread Tufte’s books ... – The Visual Display of Quantitative Information – Envisioning Information – Visual Explanations
  • 25. interactive visualisationearly 1990s growing graphics power – 3D graphics – complex visualisations – real-time interaction possible
  • 26. ... and nowloads of dataweb visualisationdata journalismhttp://www.guardian.co.uk/news/datablog/2010/oct/18/deficit-debt-government-borrowing-datahttp://www-958.ibm.com/software/data/cognos/manyeyes/
  • 27. and visual analytics!
  • 28. visualisation in context
  • 29. plain visualisationdata visualisation
  • 30. visual analyticsdata visualisation processing direct interaction
  • 31. the big picture organisational action social & political contextworld ? decisiondata visualisation processing direct interaction
  • 32. designing visualisation
  • 33. choosing representationsvisualisation factors – visual ‘affordances’ what we can see • what we can see – objectives, goals and tasks • what we need to see what we need to see – aesthetics what we like to see • what we like to see
  • 34. trade-off visualisation factors – visual affordances – objectives, goals and tasks – aesthetics static representation ⇒ trade-off interaction reduces trade-offinteraction reduces trade-off– stacking histogram, overview vs. detail, etc. etc.vs. –stacking histogram, overview detail, etc. etc.
  • 35. relaxing constraintsnormal stacked histogramgood for: – overall trend – relative proportions – trend in bottom category ?bad for others – what is happening to bananas?
  • 36. make your own (iii) relaxing constraintsinteractive stacking histograms ... or ... dancing histograms dancing histogramsnormal histogramnormal histogram except ... except ...
  • 37. make your own (iii) relaxing constraintsinteractive stacking histograms ... or ... dancing histogramsnormal histogram except ...hover over cell to show detail
  • 38. make your own (iii) relaxing constraintsinteractive stacking histograms ... or ... dancing histogramsnormal histogram except ...hover over cell to reveal detailclick on legend to change baseline demonstration
  • 39. kinds of interactionhighlighting and focusdrill down and hyperlinksoverview and contextchanging parameterschanging representationstemporal fusion
  • 40. Shneiderman’s visualisation mantra overview first, zoom and filter, then details on demand overview on demand details zoom and filter using slidershttp://www.sapdesignguild.org/community/book_people/visualization/controls/FilmFinder.htm
  • 41. classic visualisations
  • 42. displaying groups/clustersnumeric attributes – use average or regioncategorical attributes – show values of attributes common to clustertext, images, sound – no sensible ‘average’ to display – use typical documents/images – central to cluster ... or spread within cluster
  • 43. using clusters the scatter/gather browsertake a collection of documentsscatter: – group into fixed number of clusters – displays clusters to usergather: – user selects one or more clusters – system collects these togetherscatter: – system clusters this new collection ...
  • 44. displaying clusters scatter-gather browserkeywords (created by clustering algorithm) ‘typical’ documents (with many cluster keywords)
  • 45. hierarchical datahierarchies are everywhere! – file systems – organisation charts – taxonomies – classification trees – ontologies – xml
  • 46. problems with trees ...hard to fit text labels width grows rapidly overlapping low level nodes
  • 47. use 3D?cone tree – use stacked circles of subtrees
  • 48. good use of 3Dstill have occlusion ...but ‘normal’ in 3Dshadows help todisambiguatebut text labelsdifficult
  • 49. cone trees →cam treeshorizontal layout makes labels readablesmall things matter!
  • 50. disect 2D space - treemapstakes tree of items with some ‘size’ – e.g. file hierarchy, financial accountsalternatively divides space horizontally/vertically foreach level, proportionate to total size x [6] y [3] x x/a – 4 y/c [1] x/b – 2 x/a [4] y y/d [1] y/c – 1 y/d – 1 x/b [2] y/e [1] y/e – 1 http://www.cs.umd.edu/hcil/treemap-history/
  • 51. treemaps (2)later variants improved the shape and appearanceof maps
  • 52. treemaps (3)plus algorithms for vast data sets, for thumbnailimages, etc. etc.
  • 53. distort space ...tree branching factor b: – number of nodes at depth d = bdEuclidean 2D space: – amount of space at radius r = 2πr – not enough space!non-Euclidean hyperbolic space: – exponential space at radius rhyperbolic browser – lays out tree in hyperbolic space – then uses 2D representation of hyperbolic space
  • 54. multiple attributesoften data items have several attributese.g. document: – type (journal, conference, book) – date of publication – author(s) – multiple keywords (perhaps in taxonomy) – citation count – popularity
  • 55. traditional approach ... boolean queries>new query?type=‘journal’ and keyword=‘visualisation’=query processing complete - 2175 resultslist all (Y/N)>N>refine query refine: type=‘journal’ and keyword=‘visualisation’+author=‘smith’=query processing complete - 0 results
  • 56. faceted browsing e.g. HiBrowse (one of the earliest) multiple selection boxes – ‘or’ within box - ‘and’ between boxeskeywords authors typesdigital libraries all 173 all 173HCI 173 catarci 53 book formal models dix 9 conference interaction 157 jones 17 journal 173 task analysis shneiderman 153 other visualisation 39 smith 0 web wilson 22 (keyword=‘interaction’ or ‘visualisation’) and type=‘journal’
  • 57. HiBrowse (ii) shows how many items with particular value – e.g. 39 documents with keyword=‘visualisation’ and type=‘journal’ e.g. 39 documents with keyword=‘visualisation’ and type=‘journal’keywords authors typesdigital libraries all 173 all 173HCI 173 catarci 53 book formal models dix 9 conference interaction 157 jones 17 journal 173 task analysis shneiderman 153 other visualisation 39 smith 0 web wilson 22
  • 58. HiBrowse (iii) can predict the effect of refining selection – e.g. selecting‘smith’ would give empty resultresult e.g. selecting ‘smith’ would give emptykeywords authors typesdigital libraries all 173 all 173HCI 173 catarci 53 book formal models dix 9 conference interaction 157 jones 17 journal 173 task analysis shneiderman 153 other visualisation 39 smith 0 web wilson 22
  • 59. HiBrowse (iv) refining selection updates counts in real timekeywords authors typesdigital libraries all 173 45 39 all 173 45 39HCI 173 45 39 catarci 53 19 18 book 6 formal models dix 9 1 conference interaction 157 jones 17 5 3 journal 173 39 task analysis shneiderman 153 24 21 other visualisation 45 39 smith 0 web wilson 22 8 7
  • 60. starfield (i)scatter plot for two attributescolour/shape codes for moreadjust rest with slidersdots appear/disappear as slider values changedynamic filtering
  • 61. starfield (ii)when few enough points more details appear
  • 62. Influence Explorer (i)developed for engineering modelslike Starfield ...but sliders show histogramhow many in category (like HiBrowse)... and how many ‘just miss’ red = full match black = all but one attribute greys = fewer matching attr’s
  • 63. Influence Explorer (ii)some versions highlight individual itemsin each histogramsimilar technique hasbeen used to matchmultiple taxonomicclassifications
  • 64. Information ScentStarfield shows what is currently selected • explore using trial and errorHiBrowse and Influence Explorer show what would happenPirolli et al. call this Information Scent – things in the interface that help you know what actions to take to find the information you want
  • 65. very large datasetstoo many points/lines to seesolutions ...space-filling single-pixel per item Keim’s VisDrandom selection (see Geoff Ellis’ thesis)clustering visualise groups not individuals

×