Infographics & Data Visualisation

INTRODUCTION TOInfographics& Data Visualisation
TrisnadiKurniawan / WEB DESIGNER
Delivering Awesome Web Applications

About Trisnadi
SSW Web DesignerUser Experience & Interface Design
ProjectsASP.NET, SharePoint, DotNetNuke
ClientsWorleyParsons, NineMSN, Microsoft, Energy Australia

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

deliver message

deliver POWERFUL message

Infographics≠ Data Visualisation

visual representations of information, data or knowledge often used to support information, strengthen it and present it within a sensitive context.
infographics

visually display measuredquantities by means of the combined use of points, lines, a coordinate system, numbers, symbols, words, shading and colour.
Data Visualisation

More than simply translating a table of data into a visualisation

It should be...
Quick
Accurate
Powerful

Checklist
Show the data
AccurateDon’t distort the data
Make large data sets coherent
Serve a clear purpose
Reveal the data at different levelsOverview vs Detailed
EngagingEncourage viewer to compare different pieces of data

Examine the Data

Data VisualisationPatterns
PROPORTIONS
CONTINUOUS
INDEPENDENT
HIERARCHIES
CORRELATIONS
NETWORKS
CARTOGRAPHICS

Revealing the Data8 Preattentive Variables

“Certain visual features operate ‘preattentively:’ they convey information before the viewer pays conscious attention”
JeniferTidwell

+
1
682
605
4074

Find all numbers greater than 1.0

Bad Exampleswhen infographics is less-than-helpful

there’s more...

INTERACTIONS

VisualisationCategories

Looking Forward
Descry (MIX Lab)http://www.visitmix.com/Lab/descry
Gapminderhttp://www.gapminder.org/
Google Visualisationhttp://code.google.com/apis/ajax/playground/?type=visualization
Digg Labshttp://labs.digg.com/stack/

IntroductionOverview, Definition, History, Examples
Data Visualisation PatternsBar charts, Line graphs, Stacked area charts, Pie charts, Ring charts, Scatterplots, Bubble charts
Preattentive VariablesColour hue, Brightness, Saturation, Texture, Position, Orientation, Size, Shape
User InteractionStatic, Animated, Interactive, Direct Manipulation
In Summary

Questions?tristan@ssw.com.au

References
Designing Interfaces by Jenifer Tidwellhttp://designinginterfaces.com
Picturing Excess by Chris Jordanhttp://www.chrisjordan.com
Visualising Databy Joel Laumans http://piksels.com
MIX Descryhttp://www.visitmix.com/Lab/descry
Data Visualization: Modern Approach by Smashing Magazinehttp://www.smashingmagazine.com/2007/08/02/data-visualization-modern-approaches/

Thank You!
Gateway Court Suite 10 81 - 91 Military Road Neutral Bay, Sydney NSW 2089 AUSTRALIA
ABN: 21 069 371 900
Phone: + 61 2 9953 3000 Fax: + 61 2 9953 3105
info@ssw.com.auwww.ssw.com.au
Delivering Awesome Web Applications

http://www.techgig.com	291
http://datanauta.com	155
http://minkunkim.blogspot.kr	49
http://www.slideshare.net	46
http://erodriguezgar.posterous.com	12
http://www.etceter.com	10
http://www.scoop.it	8
http://www.linkedin.com	8
http://www.symbaloo.com	5
https://twimg0-a.akamaihd.net	5
http://pinterest.com	4
http://10.150.200.57	4
http://twitter.com	3
http://blog.naver.com	3
http://www.minkunkim.blogspot.kr	2
url_unknown	2
https://twitter.com	2
http://www.m.techgig.com	1
http://feeds.feedburner.com	1
http://escuchandodatos.wordpress.com	1

Infographics & Data Visualisation

by trisnadi

Accessibility

Categories

Upload Details

Usage Rights

20 Embeds 612

Statistics