This slide is part of Python Data Visualization series event held by AIC x PyLadies TW. Part 1: Data visualization concepts

1. Data Vis
資料視覺化
# 概念
2018-05-11

2. 講者介紹
● 2017 Apr.：
NASA 駭客松技術系列 前導講座
● 2017 May：
LineBot Workshop 記帳機器人組
● 2017 June：
交大巨量資料分析技術與應用課程模組
邀請講座
● 2017 ~ Now：
PyLadies 美宣志工
● 2018 Mar.：
在 PyLadies 社群的程式學習與成長 講座

3. Topics
視覺
探索
圖表
類型
軟性
議題
動手
實做

4. 視覺探索
前注意力特徵
左右人類視覺接收訊息的探索能力

5. 視覺搜尋
1. Preattentive Stage
前注意力 階段
● Single-Feature Search
單一特徵 探索
2. Attentive Stage
注意力階段
● Conjunction Search
關聯 探索
1. 特徵：顏色・形式・動態・空間位置
2. 關聯：尋找具有兩個以上的特徵需要注意力介入

6. 單一特徵 探索 vs. 關聯 探索
● Ｑ1：請尋找 紅色的 X
● Ｑ2：請尋找 黑色的 Ｏ
● Ｑ3：請尋找 橘色的 ■

7. 前注意力特徵：Color 顏色
色相 彩度 明度
Author/Copyright holder: SharkD.
Copyright terms and licence: CC
BY-SA 3.0

8. 前注意力特徵：Form 形式

9. 前注意力特徵：Movement 動態
Flicker Motion

10. 前注意力特徵：Spatial Position 空間位置
Concave and Convex
Positioning
Stereoscopic Depth
Author/Copyright holder:
Pixabay. Copyright terms
and licence: Free to Use
2D positioning

11. 比大小

12. 更進一步的參考資料
● 資料視覺化之理論、賞析與實作
○ 2016 資料科學年會 康仕仲 教授
○ https://www.slideshare.net/tw_dsconf/ss-60041639

13. A Tour Through
the
Visualization
Zoo
Vis 大觀園 悠閒漫步行程
https://homes.cs.washington.edu/
~jheer//files/zoo/
Heer, Jeffrey, Michael Bostock, and
Vadim Ogievetsky. "A tour through
the visualization zoo." Commun.
ACM 53.6 (2010): 59-67
https://homes.cs.washington.edu/
~jheer//files/zoo/

14. Time-Series Data Zone
時間序列 區

15. Index Chart（上）vs.
Stacked Graph（下）
1. 何者較直接看出總量變化？
2. 何者較直接看出每類相對大小？
3. 何者較直接看出每類絕對數值？
4. 容易看出總量的絕對值嗎？

16. Stacked Graph（上）vs.
Small Multiples（下）
Note：每類別數值必須是正數才有意
義
1. 何者容易看出每個類別自己的變
化量？

17. Stacked Graph
zero-baseline（上）vs.
100%（下）
1. 何者較容易看出不同時間每個類
別所佔比例？
2. 何者較直接看出總量變化？

18. https://research.google.com/bigpicture/music/

19. Horizon Graph
Note：可以有負數
1. 何者呈現空間比較小？
2. 何者能比較快解讀數值？
3. 壓縮空間後是否犧牲掉區域細
節？

20. Statistical Distributions
Zone
統計分佈 區

21. ● 每個直線軸都是一個
資料維度
Parallel
Coordinates

22. Scatter plot matrix
● 兩兩維度的 scatter
plot
SPLOM

23. Parallel Graph（上）vs.
SPLOM（下）
1. 何者可以呈現三個以上變數的分
佈關係？

24. Map Zone
地圖 區

25. ● 可表現資料維度的視
覺元素：
線條的寬度
Flow Map

26. ● 顏色代表不同級距
Choropleth Maps
地區分佈

27. ● 只與該地區的統計資
料有關，與面積無關
Cartograms

28. Choropleth Maps（上）vs.
Cartograms（下）
1. 何者能夠直覺表達地理位置？
2. 何者「面積」與「顏色」都能自由拿
來表現「資料維度」？

29. ● 地圖上再用小圖表表
現統計資料
Graduated Symbol
Maps

30. Choropleth Maps（上）vs.
Graduated Symbol Maps
（下）
1. 何者能夠更直覺表達地理位置？
2. 何者自由拿來表現「資料維度」的
「視覺元素」比較多？

31. https://unfiltered.news/#/2018/05/08/tw

32. Hierarchy Zone
階層 區

33. root
leaf

34. root
leaf

35. Node-link diagrams
1. 何者較節省空間？

36. root
leaf

37. root
leaf

38. https://bl.ocks.org/kerryrodden/7090426

39. Adjacency Diagrams
Ｑ：何者較節省空間？

40. Node-link diagram（上）vs.
Adjacency Diagrams（下）
1. 何者多了「視覺元素：面積」呈現
「資料維度」？

41. root
leaf

42. https://www.thenewslens.com/article/50311

43. Adjacency Diagrams（上）
vs. Enclosure Diagrams
（下）
1. 何者「階層」較清楚？
2. 何者「構成」較清楚？

44. root
leaf

45. Enclosure Diagrams
Ｑ：何者「階層」較清楚？
Ｑ：何者「構成」較清楚？
Ｑ：何者空間利用較冗贅？

46. Network Zone
網路 區
在數學中又稱 Graph

47. Arc Diagrams
Force-Directed Layout

48. Force-directed Layout（上）
vs.
Arc Diagram
Note：Arc diagram 需要 node 順序優
化，線條才不會太亂
1. 何者「群聚」較清楚？
2. 何者「距離」較清楚？
3. 何者需要較大空間？

49. Matrix View

50. Arc Diagram（上）vs. Matrix
View（下）
Note：Matrix view 需要 node 順序優
化，避免「點」散落各地
1. 何者「群聚」較清楚？
2. 何者「距離」較清楚？
3. 何者需要較大空間？

51. Force-directed Layout（上）
vs.
Matrix View（下）
1. 何者「群聚」較清楚？
2. 何者「距離」較清楚？
3. 何者需要較大空間？
4. 何者用來表達「資料維度」的「視
覺元素」比較多？

52. Summary
● Time-Series Data
○ Index Charts
○ Stacked Graphs
○ Small Multiples
○ Horizon Graphs
● Statistical Distributions
○ SPLOM
○ Parallel Coordinates
● Networks
○ Force-directed Layouts
○ Arc Diagrams
○ Matrix Views
● Maps
○ Flow Maps
○ Choropleth Maps
○ Graduated Symbol Maps
○ Cartograms
● Hierarchies
○ Node-link Diagrams
○ Adjacency Diagrams
○ Enclosure Diagrams

53. 如何有系統地以「目
的」選擇圖表
https://datavizcatalogue.
com/index.html

54. 以前人為鏡
從「評論」學習資料視覺化

56. WTF 案例：
囧創意

57. Shattered
http://viz.wtf/post/166329900475/sh
attered-distribution
缺點：
● 困惑面積跟顏色指哪
個 dimension…
address%? BTC%?
● 只知道極端面積的差
別，不知道中間幾塊
誰大誰小
建議：砍掉重練（？）

58. Mushroom
http://viz.wtf/post/165940396261/mu
shroom-chart
缺點：
- Pie chart 是以面積給
人數值觀感，而非半
徑
- 分流只知道大中小，
無法知道比例
建議：基本的 flow chart ＋
互動模式

59. https://medium.com/@plotlygraphs/4-interactive-sankey-diagram-made-in-python-3057b9ee8616

60. 補充：Sankey Chart

61. WTF 案例：
程式 bug

62. Amazing y
http://viz.wtf/post/1596845181
73/y-axis-d%C3%A9j%C3%A0-v
u-twitter-probablymonty
缺點：
● Y 軸數字重複
建議：
● 工程師休息一下

63. 常見 WTF：
在 office 裡...

64. 3D Bar
http://viz.wtf/post/164260261516/impa
ct-categories-easy-presented
缺點：
● 3D圖難以對照精確數
值
● 顏色也很難分辨
建議：
● 改用 heatmap
● 採用互動，做位置優化
更好

65. http://viz.wtf/post/161589799318/lines-ahoy
缺點：
1. 太多顏色，單一顏色分佈無從看起
2. Y 軸數值差距甚大，數值小於百位數的看不出起伏
3. 3D 圖無法對齊隔線，無法精確判讀數字

66. Stacked Bar
http://viz.wtf/post/150780948819/ma
ths-enrolments-drop-to-lowest-rate-in-
50-years
缺點：
● 這張圖太多顏色
● Stacked bar 無法判讀
除了 0 起始位置以外
的顏色區塊佔多少
建議： Dancing Stacked
Bar

67. 3D Pie Chart

68. Too Many Lines
http://viz.wtf/post/161589799318/line
s-ahoy
缺點：
● 太多線，不知道要怎
麼追蹤、比較
● 顏色相似，很難對照
圖說

69. 以互動模式解除
限制

70. 以互動模式解除限制
● Zoom in/out
● Brushing and linking
● Dancing stacked bar
● Animation

71. 以互動模式解除限制
● Zoom in/out
● Brushing and linking
● Dancing stacked bar
● Animation

72. 以互動模式解除限制
● Zoom in/out
● Brushing and linking
● Dancing stacked bar
● Animation

73. 以互動模式解除限制
● Zoom in/out
● Brushing and linking
● Dancing stacked bar
● Animation

74. 在執行「辦公室美學向上」的種
種非技術問題
細心耐心，回歸基本面：溝通

75. 標題優化運動
● 文字輔助：
盡量是用一句完整
的話
● 標題是一個該採取
的行動而非只是分
類
● 強調佔整體10%的重
點
Before

76. 標題優化運動
● 文字輔助：
盡量是用一句完整
的話
● 標題是一個該採取
的行動而非只是分
類
● 強調佔整體10%的重
點
After
請同意僱用兩名全職員工
填補去年空出的職缺
兩位員工於五月離職。八月回報單
增量無法應付，至今進度落後。

77. 確認相關人士的關注點
● 多和團隊溝通討論
● 需要提案打破既定格式時，可以
○ 多提供幾種方案供人選擇
○ 同時秀出新舊圖表 比較優缺
○ 說服／拉攏 重要的決策者

78. Ｑ：我要做的是報表系統
監測時空資料，定時更新，不需要華麗轉身

79. Ａ：第四堂課Dashboard
敬請期待

80. Ｑ：我要做的是精緻解釋
資料靜態不會更新，圖片要吸人眼球

81. Ａ：接下來分享的主要是
Python 資料分析過程中的探
索式圖表
跟 Infographics 不太相關...
https://visual.ly/olympic-infographics

82. ● Data Analysis (EDA)
○ Matplotlib, Seaborn, Plotly
● Data Journalism
○ PlotDB
● Monitoring
○ Various data source input
■ Redash, Superset, Metabase
○ Time-series metrics data
■ Grafana, Kibana
不同的 使用情境 (Python, Open source)

83. 練習：生命之花
用 matplotlib 暖暖身
● Google Colab
https://bit.ly/2I7jVvS
● 上節課的講義（基本語法大抄）
：https://imatcha.github.io/PyLadies/DV_Day1_P
yBasic_20180504.html

85. 動動手活動
資料新聞觀摩
從各大資料新聞站台探索圖表：
● Google News Lab
● 紐約時報
● 報導者
● 關鍵評論網

86. QA & Contact
● Email: tsaiichi.1@gmail.com
● PyLadies Taiwan @ Facebook page