need for visualization artifacts from the future 6...
TRANSCRIPT
6 STEPS TO VISUALIZE INFORMATION
by Kristof Pelckmans
modified by N. Ruangchaijatupon forInformation Visualization Lecture
source: Wire Magazine 16 June 2008Artifacts from the futureneed for visualization 2
6 principles
3
6 principles
4
21 3
54 6
source: The Visual Display of Quantitative Information by Edward R. Tufte5
6 principles
data‐ink ratio
6
data – ink ratio = proportion of a graphic’s ink devoted tothe non‐redundant display of data
data – ink ratio = 1 – proportion of graphic that can beerased
7
1
2
need grid?make itlighter
source: train schedule by E.J. Marey8
1
2
standard Excelgrid and axis
9
6 principles
data‐ink ratio
10
di
Robert Shumann2d > 3d
source: The Visual Display of Quantitative Information by Edward R. Tufte
mens
ions
11
breakdown of car components2d > 4d
source: The Visual Display of Quantitative Information by Edward R. Tufte12
bullet chart5d
source: bullet chart by Stephen Few13
bullet chart5d
source: bullet chart by Stephen Few14
Boxplot
• บอ็กซ์พลอ็ต เป็นแผนภาพซึง่สามารถสรุปข้อมลู ตําแหน่งของมธัยฐาน การกระจายของข้อมลู ความสมมาตร และคา่ผิดปกติของข้อมลู (ถ้ามี) นํามาแสดงในแผนภาพเดียว
15
แนวชัน้นอกล่าง
แนวชัน้ในล่าง
ฮินจ์ล่าง มธัยฐาน ฮินจ์บน
ค่าประชิดล่าง ค่าประชิดบน
แนวชัน้ในบน
แนวชัน้นอกบน
ค่าผิดปกติน้อยค่าผิดปกติน้อยค่าผิดปกติมากค่าผิดปกติมาก
ค่าผิดปกติมาก
Boxplot (cont.)1. คํานวณหาคา่มธัยฐานซึง่จะแบง่ข้อมลูออกเป็นสองสว่นเทา่ๆ กนั จากนัน้คํานวณหาคา่
กึง่กลางของข้อมลูแตล่ะสว่น ซึง่เรียกวา่ ฮินจ์ลา่ง (Lower Hinge) และฮินจ์บน (Upper Hinge) โดยใช้วิธีเดียวกบัการหาคา่มธัยฐาน ข้อมลูถกูแบง่ออกเป็นสีส่ว่น
2. คํานวณหาคา่กระจายฮินจ์ (H‐spread) โดยใช้สมการตอ่ไปนี ้H‐spread = Upper Hinge – Lower Hinge
3. สร้างรูปสีเ่หลีย่มซึง่มีความกว้างเทา่กบัคา่กระจายฮินจ์ และลากเส้นแนวตัง้ในตําแหน่งมธัยฐาน
4. ที่ระยะหา่ง 1.5 x H‐spread จากขอบซ้ายของสีเ่หลีย่ม กําหนดเป็นแนวชัน้ใน (Inner Fence) และแนวชัน้นอก (Outer Fence)
5. ลากเส้นหนวดแมว (Whisker) ซึง่เป็นเส้นแนวนอนที่ลากออกจากขอบซ้ายของสีเ่หลีย่มไปยงัคา่น้อยที่สดุในแนวชัน้ในลา่ง และจากขอบขวาของสีเ่หลีย่มไปยงัคา่มากที่สดุในแนวชัน้ในบน
6. คา่ผิดปกติเลก็น้อย (Mild Outlier) จะอยูร่ะหวา่งแนวชัน้ในและแนวชัน้นอก7. คา่ผิดปกติมาก (Extreme Outlier) จะอยูน่อกแนวชัน้นอก 16
Boxplot by Matlab
17
6 principles
data‐ink ratio
18
dimensions
6 principles
data‐ink ratio
19
dimensions
size
http://en.wikipedia.org/wiki/Golden_ratio
golden ratio
20
source: Beautiful Evidence by Edward R. Tufte
small is beautiful ‐ sparklines
21source: http://en.wikipedia.org/wiki/Sparkline
sparklines
22
6 principles
data‐ink ratio
23
dimensions size
6 principles
data‐ink ratio
24
dimensions size
font
do not mix styles and cases!source: The Visual Display of Quantitative Information by Edward R. Tufte
25
1
2
emphasis here
26
6 principles
data‐ink ratio
27
dimensions size
font
6 principles
data‐ink ratio
28
dimensions size
font
coloremphasis here
eye does not focus on data
source: The Visual Display of Quantitative Information by Edward R. Tufte29
source: The Visual Display of Quantitative Information by Edward R. Tufte
get color inspiration from nature
30
use of contours
source: The Visual Display of Quantitative Information by Edward R. Tufte
1 2
31
1 out of 10 people perceive red and green like gray
source: Information Visualization: Perception for Design by Colin Ware32
33
6 principles
data‐ink ratio
34
dimensions size
font color
6 principles
data‐ink ratio
35
dimensions size
font color
open your eyes and be aware of
source: Excel 2007 sample graphs by Microsoft Excel Blog Team
source: Excel 2007 sample graphs by Microsoft Excel Blog Team
do not use 3d
use bar charts instead of pie charts
is this a dashboard?
source: Delcom International B.V.
simplicity and elegance are keys!source: Rolls‐Royce Motor Cars Ltd. source: airline dashboard by BonaVista Systems
books
The Visual Display of Quantitative Information Envisioning Information Visual Explanations
Information VisualizationInformation Dashboard DesignBeautiful Evidence
blogsexcelcharts.com/blog
visualisationmagazine.com/blogvisualthinkmap
peltiertech.com/WordPress
neoformix.com
blog.xlcubed.com
www.coolinfographics.com
www.juiceanalytics.com/writing
www.visualcomplexity.com/vc/blog
eagereyes.org
Google Charts
44
Google Charts (cont.1)Google Charts renders charts in HTML5/SVG to provide cross‐browser compatibility and cross‐platform portability to iPhones and Android. It also includes VML for supporting older IE versions.
It offers a decent number of charts which covers the most commonly used chart types like bar, area, pie and gauges. It is flexible and user friendly (because Google!). You can view this gallery to get an idea of various charts and the type of interactions to expect.
45 46
Google Charts (cont.2)
47
Google Charts (cont.3)
48
Piktochart.com