INTRODUCTION TOInfographics& Data Visualisation<br />TrisnadiKurniawan / WEB DESIGNER<br />Delivering Awesome Web Applicat...
About Trisnadi<br />SSW Web DesignerUser Experience & Interface Design<br />ProjectsASP.NET, SharePoint, DotNetNuke<br />C...
<ul><li>80% of the brain is dedicated to visual processing
Visual processing is not new, its part of our history
Written language originated from drawing and sketching</li></li></ul><li>
deliver message<br />
deliver POWERFUL message<br />
Infographics≠ Data Visualisation<br />
visual representations of information, data or knowledge often used to support information, strengthen it and present it w...
visually display measuredquantities by means of the combined use of points, lines, a coordinate system, numbers, symbols, ...
More than simply translating a table of data into a visualisation<br />
It should be...<br />Quick<br />Accurate<br />Powerful<br />
Checklist<br />Show the data<br />AccurateDon’t distort the data<br />Make large data sets coherent<br />Serve a clear pur...
Examine the Data<br />
Data VisualisationPatterns<br />PROPORTIONS<br />CONTINUOUS<br />INDEPENDENT<br />HIERARCHIES<br />CORRELATIONS<br />NETWO...
Revealing the Data8 Preattentive Variables<br />
“Certain visual features operate ‘preattentively:’ they convey information before the viewer pays conscious attention”<br ...
+<br />1<br />682<br />605<br />4074<br />
Find all numbers greater than 1.0<br />
Find all numbers greater than 1.0<br />
Bad Exampleswhen infographics is less-than-helpful<br />
there’s more...<br />
INTERACTIONS<br />
VisualisationCategories<br />
Looking Forward<br />Descry (MIX Lab)http://www.visitmix.com/Lab/descry<br />Gapminderhttp://www.gapminder.org/<br />Googl...
IntroductionOverview, Definition, History, Examples<br />Data Visualisation PatternsBar charts, Line graphs, Stacked area ...
Questions?tristan@ssw.com.au<br />
References<br />Designing Interfaces by Jenifer Tidwellhttp://designinginterfaces.com<br />Picturing Excess by Chris Jorda...
Upcoming SlideShare
Loading in...5
×

Infographics & Data Visualisation

14,081

Published on

Published in: Design, Technology
6 Comments
147 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,081
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
6
Likes
147
Embeds 0
No embeds

No notes for slide
  • Trivia: this day in 1633 Galileo faced court over his heliocentric research
  • Depicts one million plastic cups, the number used on airline flights in the US every six hours.
  • 40 million paper cups a day
  • 410,000 (15 minutes)
  • Infographics is everywhereRoadway sign,Subway map,Brochure,Product manual,Instructions on prescription bottle,Assembly guide
  • The main goal of data visualization is its ability to visualize data, communicating information clearly and effectively. It doesn’t mean that data visualization needs to look boring to be functional or extremely sophisticated to look beautiful.
  • http://www.traumkrieger.de/virtualwater/
  • There are countless possibilities of how to visualize data; but there are many design patterns which are proven to be effective for specific types of data. The following section provides examples of data visualization patterns and a short rationale for when to use them.Independent quantities (bar charts)Comparing the values of independent variablesContinuous quantities (line graphs & stacked area)For data that is continuous, for example when visualizing data over a period of time.Proportions (pie & ring charts)Proportions are used when the data represents parts of a whole.Hierarchies (tree diagrams)Used when the data has a strict hierarchy that needs to be communicated.Networks (diagram map)Network visualizations are used when the most important feature of the visualization is to show which data is connected to each other, as opposed to how.CorrelationsThese are used when each piece of data has two quantifiable variables which can be plotted on a grid.CartographicFor data that is relevant to specific locations or regions which can be plotted on a map.There are more. Don’t limit your scope on these! (see next example)
  • “Certain visual features operate ‘preattentively:’ they convey information before the viewer pays conscious attention”
  • There is no visual aid to help us find the values greater than 1.0, forcing us to read all of the data and understand it. Now look at the following table.
  • StaticThe data visualization does not change over time, and offers no user interaction.AnimatedThe data visualization changes over time - using time as another dimension or variable.InteractiveThe user can interact with the visualization by altering what data is viewed and / or how it is viewed - however the results of interactions are not immediately visible.Direct manipulationThe user can interact with the visualization by altering what data is viewed and / or how it is viewed - and the result of all interactions are immediately visible.
  • Transcript of "Infographics & Data Visualisation"

    1. 1. INTRODUCTION TOInfographics& Data Visualisation<br />TrisnadiKurniawan / WEB DESIGNER<br />Delivering Awesome Web Applications<br />
    2. 2. About Trisnadi<br />SSW Web DesignerUser Experience & Interface Design<br />ProjectsASP.NET, SharePoint, DotNetNuke<br />ClientsWorleyParsons, NineMSN, Microsoft, Energy Australia<br />
    3. 3.
    4. 4. <ul><li>80% of the brain is dedicated to visual processing
    5. 5. Visual processing is not new, its part of our history
    6. 6. Written language originated from drawing and sketching</li></li></ul><li>
    7. 7.
    8. 8.
    9. 9.
    10. 10.
    11. 11.
    12. 12.
    13. 13.
    14. 14. deliver message<br />
    15. 15. deliver POWERFUL message<br />
    16. 16. Infographics≠ Data Visualisation<br />
    17. 17. visual representations of information, data or knowledge often used to support information, strengthen it and present it within a sensitive context.<br />infographics<br />
    18. 18.
    19. 19.
    20. 20.
    21. 21.
    22. 22.
    23. 23.
    24. 24. visually display measuredquantities by means of the combined use of points, lines, a coordinate system, numbers, symbols, words, shading and colour.<br />Data Visualisation<br />
    25. 25. More than simply translating a table of data into a visualisation<br />
    26. 26. It should be...<br />Quick<br />Accurate<br />Powerful<br />
    27. 27.
    28. 28. Checklist<br />Show the data<br />AccurateDon’t distort the data<br />Make large data sets coherent<br />Serve a clear purpose<br />Reveal the data at different levelsOverview vs Detailed<br />EngagingEncourage viewer to compare different pieces of data<br />
    29. 29. Examine the Data<br />
    30. 30. Data VisualisationPatterns<br />PROPORTIONS<br />CONTINUOUS<br />INDEPENDENT<br />HIERARCHIES<br />CORRELATIONS<br />NETWORKS<br />CARTOGRAPHICS<br />
    31. 31.
    32. 32. Revealing the Data8 Preattentive Variables<br />
    33. 33. “Certain visual features operate ‘preattentively:’ they convey information before the viewer pays conscious attention”<br />JeniferTidwell<br />
    34. 34.
    35. 35.
    36. 36.
    37. 37.
    38. 38.
    39. 39.
    40. 40.
    41. 41.
    42. 42. +<br />1<br />682<br />605<br />4074<br />
    43. 43. Find all numbers greater than 1.0<br />
    44. 44. Find all numbers greater than 1.0<br />
    45. 45.
    46. 46.
    47. 47.
    48. 48.
    49. 49. Bad Exampleswhen infographics is less-than-helpful<br />
    50. 50.
    51. 51.
    52. 52. there’s more...<br />
    53. 53. INTERACTIONS<br />
    54. 54. VisualisationCategories<br />
    55. 55.
    56. 56. Looking Forward<br />Descry (MIX Lab)http://www.visitmix.com/Lab/descry<br />Gapminderhttp://www.gapminder.org/<br />Google Visualisationhttp://code.google.com/apis/ajax/playground/?type=visualization<br />Digg Labshttp://labs.digg.com/stack/<br />
    57. 57. IntroductionOverview, Definition, History, Examples<br />Data Visualisation PatternsBar charts, Line graphs, Stacked area charts, Pie charts, Ring charts, Scatterplots, Bubble charts<br />Preattentive VariablesColour hue, Brightness, Saturation, Texture, Position, Orientation, Size, Shape<br />User InteractionStatic, Animated, Interactive, Direct Manipulation<br />In Summary<br />
    58. 58. Questions?tristan@ssw.com.au<br />
    59. 59. References<br />Designing Interfaces by Jenifer Tidwellhttp://designinginterfaces.com<br />Picturing Excess by Chris Jordanhttp://www.chrisjordan.com<br />Visualising Databy Joel Laumans http://piksels.com<br />MIX Descryhttp://www.visitmix.com/Lab/descry<br />Data Visualization: Modern Approach by Smashing Magazinehttp://www.smashingmagazine.com/2007/08/02/data-visualization-modern-approaches/<br />
    60. 60. Thank You!<br />Gateway Court Suite 10 81 - 91 Military Road Neutral Bay, Sydney NSW 2089 AUSTRALIA <br />ABN: 21 069 371 900 <br />Phone: + 61 2 9953 3000 Fax: + 61 2 9953 3105 <br />info@ssw.com.auwww.ssw.com.au <br />Delivering Awesome Web Applications<br />

    ×