整理了一些資料視覺化的概念，也加入了許多案例輔助

1. 資料視覺化：
資訊圖表在WEB開發上面的應
用
彭其捷

2. ABOUT ME
• 中正經濟系 > 中正資管系
• 交大資管所
• 資策會 前端工程師
• 卡米爾 專案經理

3. 我的著作

4. Q：科智為什麼需要深化視覺化
能力？

5. 大數據趨勢

6. 大數據的興起？

7. 資料視覺化的趨勢

8. Q：資料為什麼要視覺化？

9. 網頁存取的 LOG 黑盒子

10. GOOGLE ANALYTICS

11. 資訊浪費
• 思科公司（Cisco）稍早預測，今年將步入階位元組（zettabyte，ZB）時
代，網路產生的資料量達1ZB（10億TB）。
0
25
50
75
100
125
全部資料 實際擷取 有被分析 視覺化
4月
IDC 研究

13. 視覺化的原理？

14. 資料視覺化的爸媽
訊息設計 INFORMATION DESIGN

15. 資訊圖表類型一：故事型
簡報、雜誌、議題所使用，需要美美的，講清楚一件事情
數據背後可能是一段故事
視覺化互動網頁3D NASDAQ
http://graphics.wsj.com/3d-nasdaq/

16. 資訊圖表類型二：實驗型
用於研究用途，需真實反映數據的真實性與閱讀性
有時候是進階的使用者才有辦法閱讀
http://budget.g0v.tw/budget

17. 資訊圖表類型三：視覺效果型
確切數字不太重要，重點是要華麗

18. 資訊圖表類型四：互動型
衛福部（壽命剩餘預測）
http://iiqsw.mohw.gov.tw/dv/Life_expectancy.html
同樣的資料，不同使用者可以各取所需

19. http://www.datajournalismtw.com/#!privacy-and-terms/cdgb
「資料視覺化」是三種元素的疊加，既有傳統新聞具備的資料性、故事性
同時又透過視覺化設計吸引讀者
跨領域的學科

20. 資料視覺化的好處
• 製作某種強烈的印象
• 資料即時性
• 吸引人閱讀
• 快速理解資料
• 觀察到原本沒看到的訊息
• 找出資料的瑕疵

21. Q：為什麼視覺化可以製作強烈
的印象？

22. 因為圖+數字很有說服力

24. Q：為什麼視覺化能夠吸引人閱
讀？

25. 預測誰會當選奧斯卡最佳男主角
http://goo.gl/LrFBV2

26. 案例1：全球暖化數據

27. • 、
2015 Was the Hottest Year on Record
http://www.bloomberg.com/graphics/hottest-year-on-record/

28. 台灣水庫近期蓄水量圖
http://data.infographics.tw/viz/reservoir/

29. Q：為什麼視覺化能夠快速理解
資料？

30. 很好理解...

31. 銷售數據
請你告訴我：平均客單價超過 150 的時段？

32. 找到 NYC 最多的樹種
http://www.cloudred.com/labprojects/nyctrees/

33. Q：為什麼視覺化能夠觀察到原
本沒看到的訊息？

34. THIS CHART SHOWS WHO MARRIES CEOS, DOCTORS, CHEFS AND
JANITORS
http://www.bloomberg.com/graphics/2016-who-marries-whom/
職業數據加上婚姻數據

35. 各地區誤放颱風假比率有多高
？http://p.udn.com.tw/upf/newmedia/2015_data/20150930_udntyphoon/udntyphoon/index.html

36. Q：為什麼視覺化能夠更快找到
資料的問題？

38. 一目了然的概念

40. 資料視覺化的流程
(1) 瞭解這些人到底在意的是什麼？
製造服務化、客戶洞察
(2) 盤點擁有什麼資料？
(3) 挑選適合的視覺化圖表

41. http://www.datavizcatalogue.com/index.html

42. 每個圖表有他的個性
要先確認，想要知道什麼訊息？
長條圖
折線圖
一般表格
歷史圖表
泡泡圖
熱點圖
地圖
網路關係圖
圓餅圖

43. 一般是從要放什麼圖表開始
比較正確的情境是由需求來驅動
我想要看到
工廠的資料
是什麼樣資料呢
？
資料量的多寡呢
？
時間的長短呢？

44. 我想要知道數據隨著時間的變化
我想要知道資料分布的狀況
我想要看各單位相對佔比的改變
我想要同時看許多單位 (超過 50個) 的大小比較‘
我想要看各地區數據的差異
我想要觀察道路位置的數據資訊
我想要看在一個環境當中各個單位之間的關係
我想要同時比較不同單位的多維度資料
我想要看出這塊市場的數字比例
我想要同時看到不同資料的摘要資訊
我想要看到單純數字的比較
網路關係圖

45. 長條圖
我想要看到單純數字的比較
類比型的資訊

46. 折線圖我想要知道數據隨著時間的變化
連續的資料

47. LESS IS MORE

48. 橫的直條圖

49. 歷史圖表
HISTOGRAM
我想要知道資料分布的狀況
例如：都集中在哪些時段？

50. 一般表格我想要同時看到不同資料的摘要資訊
(而且資訊量蠻多的)

51. 泡泡圖我想要同時看許多單位 (超過 50個) 的
相對數字大小比較
關鍵議題

52. 細胞組織圖我想要看各單位相對佔比的改變
http://howmuch.net/articles/world-economy-as-a-living-organism

53. 熱點地圖我想要看各地區數據的差異

54. 我想要看各地區數據的差異 熱點道路圖
ttp://www.bloomberg.com/graphics/2016-metro-shutdown/

55. 網路關係圖我想要看在一個環境
當中各個單位之間的關係

56. 圓餅圖我想要看出這塊市場的數字比例
(例如：國家預算都分到哪些單位)

57. 雷達圖我想要同時比較不同單位的多維度資料
(例如：員工1 & 員工2的專長比較)
https://en.wikipedia.org/wiki/Radar_chart

58. 資料視覺化與前端工程

59. 前端工程
技術(處理資料) + 設計(合適的呈現方式) 的結合

60. 網頁使用圖表的幾個技巧
• 重點視覺 > 細部視覺
• 慎用動畫
• 後端 v.s. 前端
• 視覺化的同時提供證據
• 加強故事性
• 挑選合適的前端工具

61. 滿不一定好

62. 重點視覺 > 細部視覺

63. 慎用動畫
• 瀏覽器支援
度較低
• 行動裝置支
援較低

64. 圖表由：
後端產出
(重效能)
V.S.
前端產出
(重互動)

65. 視覺化的同時提供證據
人的慾望是無窮的
滑鼠滑上去想要看更多
點選想要看細節
HICHART
http://www.highcharts.com/

66. 加強故事性

67. 為視障者而設計
世界上大約有 8% 的男性人
口擁有某種形式的色盲，女性
約 0.5%。如果用台灣的人口數
來計算的話，色盲的人將近有
116 萬人

68. 挑選合適的
資料視覺化工具

69. http://www.slideshare.net/fitc_slideshare/the-future-of-data-visualization?qid=8c32b48d-7823-41c9-8c61-c81bae8af88f&v=&b=&from_search=1
彈性與複雜度成正比。價格與好用度成正比

70. 資料視覺化工具市佔率
http://www.randalolson.com/2016/03/11/what-data-visualization-tools-do-rdataisbeautiful-oc-creators-use/

71. D3.JS
較進階但是彈性很大

72. GOOGLE CHART
免費但沒有這麼華麗

73. TABLEAU
不用寫程式也可以做出各種好用的互動圖表

74. 一句話總結

75. 一張圖表要超過 2 秒才看得懂
太慢了！

76. THE END