BPCHART簡介 & 資料視覺化

上德，2022/3/28

1

B L U E P L A N E T @ 2 0 2 2

B L U E P L A N E T @ 2 0 2 2

Outline

1. 視覺化
2. 圖表類型
3. BPCHART

2

B L U E P L A N E T @ 2 0 2 2

一、視覺化

3

B L U E P L A N E T @ 2 0 2 2

50%

• 視覺是取得資訊的最重要通道，超過50%的人腦功能用於視覺的感知。
• 在電腦學科的分類中，利用人眼的感知能力對資料進行互動的可視表達以增強認知的技術，稱為「視覺化」。

​

​

Tips: �BANs (Big Ass Numbers)：將重要內容放大顯示

​

4

B L U E P L A N E T @ 2 0 2 2

資料視覺化的先驅：南丁格爾玫瑰圖

• 可被預防的死亡（藍色）其實遠遠大於因戰爭所導致的士兵折損率（紅色）。戰爭第一年就有超過4千名士兵死於斑疹傷寒、傷寒、霍亂，這個數字是戰爭死亡人數的十倍。次年，英國政府派出衛生委員會到戰地改善污水管、通風和醫療設備，使得死亡率馬上大幅降低。

5

B L U E P L A N E T @ 2 0 2 2

伊拉克戰爭造成的傷亡

6

B L U E P L A N E T @ 2 0 2 2

伊拉克戰爭：�死亡人數逐漸下降

• 同樣的資料，但不同的視覺和標題，傳達出了完全不一樣的訊息

Lies, damn lies, and statistics: How to take something positive from the UK’s EU referendum campaign

7

B L U E P L A N E T @ 2 0 2 2

國內新聞專題案例

8

B L U E P L A N E T @ 2 0 2 2

• 統計是客觀掌握資料趨勢的強大工具，但仍有些資料無法用統計來掌控，這也是必須進行資料視覺化最根本的原因之一。
• 英文知名統計學家 Frank Anscombe 提出的這組資料範例「Anscombe’s Quartet」，每一組資料集的平均值、變異數、相關系數完全相同，但視覺化後可看到其資料的「趨勢」是完全不同的。

​

9

B L U E P L A N E T @ 2 0 2 2

同樣是「平均50分」，趨勢卻是不同的

10

B L U E P L A N E T @ 2 0 2 2

每種「資料類型」有其適合的「視覺屬性」

11

B L U E P L A N E T @ 2 0 2 2

降低認知負荷

• 認知負荷與資料墨水比 (Data-Ink Ratio)

• 完形法則 (Gestalt Law)

圖表、圖形等整體表現使用的墨水量 (Total Ink)

顯示資料所使用的墨水量 (Data ink)

12

B L U E P L A N E T @ 2 0 2 2

13

B L U E P L A N E T @ 2 0 2 2

14

B L U E P L A N E T @ 2 0 2 2

小練習：哪個圖表設計較優？

A

B

15

B L U E P L A N E T @ 2 0 2 2

二、圖表類型

16

B L U E P L A N E T @ 2 0 2 2

17

B L U E P L A N E T @ 2 0 2 2

Abela的圖表分類表是一個簡易的「工具」。我依自己個人的喜歡整理出一張新的分類表，這個請大家當作參考就好，因為實際上是不可能分得完的，而且就我參考的每一本書分類方式也都不一樣。

推薦書藉

18

B L U E P L A N E T @ 2 0 2 2

Comparison

What would you like to show?

靜態

Distribution

Composition

Feature

隨時間改變

一個變數

兩個變數

少許項目

很多項目

少許時段

很多時段

兩個時段

一個/少許項目

很多項目

非週期性

週期性

一個變數

兩個變數

三個變數

少許項目

很多項目

靜態

隨時間改變

非週期性

週期性

少許時段

很多時段

比例

數量

比例

數量

單項比例

多項比例

階層比例

Variable Width Column Chart

Bar Chart

Packed Bubble Chart

Slope Chart

Column Chart

Line Chart

Line Chart

Cyclical Area Chart

Column Histogram Chart

Line Histogram Chart

Scatter Chart

Bubble Chart

Pie Chart

Waffle Chart

Tree Map Chart

Stacked 100% Column Chart

Stacked Column Chart

Stacked 100% Area Chart

Stacked Area Chart

Heat Map Chart

19

B L U E P L A N E T @ 2 0 2 2

正負值

名次

資料關聯方向

分向長條圖

排序長條圖

Directed Chart 有向圖

分向折線圖

分向堆疊長條圖

Bump Chart 凹凸圖

排序泡泡圖

實告股權結構圖

實告實質受益人圖

Feature

20

B L U E P L A N E T @ 2 0 2 2

What would you like to show?�→ 比較

→ 靜態

Variable Width Column Chart

→ 一個變數

• 少許項目

Bar Chart

• 很多項目

Packed Bubble Chart

• 兩個變數

21

B L U E P L A N E T @ 2 0 2 2

What would you like to show?�→ 比較

Slope Chart

→ 隨時間改變

• 一個/少許項目

Column Chart

• 很多項目

Line Chart

→ 少許時段

• 兩個時段

22

B L U E P L A N E T @ 2 0 2 2

What would you like to show?�→ 比較

Line Chart

→ 隨時間改變

• 非週期性

→ 很多時段

• 週期性

Cyclical Area Chart

23

B L U E P L A N E T @ 2 0 2 2

What would you like to show?�→ 分布

Column Histogram Chart

→ 一個變數

• 許多時段

Line Histogram Chart

• 兩個變數

• 三個變數

Scatter Chart

Bubble Chart

• 少許時段

24

B L U E P L A N E T @ 2 0 2 2

What would you like to show?�→ 結構

Pie Chart

• 多項比例

Waffle Chart

• 階層比例

Tree Map Chart

• 單項比例

→ 靜態

25

B L U E P L A N E T @ 2 0 2 2

What would you like to show?�→ 結構

Stacked 100% Column Chart

→ 隨時間改變

• 數量

Stacked Column Chart

→ 少許時段

• 比例

26

B L U E P L A N E T @ 2 0 2 2

What would you like to show?�→ 結構

Stacked 100% Area Chart

→ 隨時間改變

• 數量

Stacked Area Chart

Heat Map Chart

→ 很多時段

• 比例

→ 非週期性

• 週期性

27

B L U E P L A N E T @ 2 0 2 2

What would you like to show?�→ 特徵

分向長條圖

排序長條圖

Directed Chart 有向圖

• 名次

• 正負值

• 資料關聯方向

分向折線圖

分向堆疊長條圖

Bump Chart 凹凸圖

排序泡泡圖

實告股權結構圖

實告實質受益人圖

28

B L U E P L A N E T @ 2 0 2 2

三、BPCHART

29

B L U E P L A N E T @ 2 0 2 2

BPCHART 是什麼？

• 自行開發的前端圖表套件，主要技術是使用 D3.js 開發的「向量圖」圖表。布署在公司內部server上 (bpnpm)，他可以被安裝到公司使用的Vue、以及Nuxt專案當中。目前主要開發RD有上德、阿介。

​

• repo：https://gitlab.blueplanet.com.tw/RD/bp_chart
• 展示頁：https://bpchart.blueplanet.com.tw

​

30

B L U E P L A N E T @ 2 0 2 2

BPCHART 誕生的原因

1. 為了開發「客製化圖表」：蛛思圖表、蛛思Widget、實告股權結構圖。
2. 為了解決在不同專案當中進行圖表程式的「版本控制」：小蛛思專案（灃食、文史哲），客製化實告專案（星展）。

31

B L U E P L A N E T @ 2 0 2 2

適用情境

1. 客製化
2. 使用公司獨有的圖表

​

• 通用性質圖表，無開發時程急迫性

BPCHART是一個在開發產品所需「客製圖表」時，特定情境下的產物。隨著 BPCHART 慢慢的完善也「順便」開發了一些通用的圖表，但其完整度和穩定度來說確實離現成的套件還非常的遙遠，如果是要用在有時程急迫性的專案上，建議不如使用現成套件。

32

B L U E P L A N E T @ 2 0 2 2

BPCHART誕生時間軸

33

B L U E P L A N E T @ 2 0 2 2

介紹展示頁之前… 先插播一下…�來得有點突然的「JSON格式小教學」

支援的資料格式：

• 字串(String)
• 數字(Numbers)
• 布林數(Boolean)
• 陣列(Arrays)
• 物件(Object)
• NULL

34

B L U E P L A N E T @ 2 0 2 2

展示頁使用方式

輸入參數

互動的輸出資料

編輯模式

全螢幕

更新資料（編輯模式）

35

B L U E P L A N E T @ 2 0 2 2

參照對象

• 我自己「想像中」未來能有一個對外展示頁面，參照對象是類似 PlotDB一樣的網站，但不確定會是什麼樣的型式、或者有什麼商業上的應用？。

36

B L U E P L A N E T @ 2 0 2 2

儀表板

• 儀表板的使用者就是「閱聽者」，設計儀表板的時候，應該要思考：要給誰看？

5 Types of Dashboards

37

B L U E P L A N E T @ 2 0 2 2

大家可以想一想「蛛思」和「實告」各是哪種儀表板呢？

38

B L U E P L A N E T @ 2 0 2 2

「BPCHART展示頁」模組化儀表板設計

資料流模組

資料流模組

查詢頁

圖表列表Container

圖表

模組設定檔

圖表假資料

* 依設定檔決定要動態載入哪些圖表

39

B L U E P L A N E T @ 2 0 2 2

「蛛思」模組化儀表板設計

資料流模組

資料流模組

查詢頁

圖表列表Container

頁面資料流

圖表

模組設定檔

資料流模組

API

* 依設定檔決定要動態載入哪些圖表

* 依設定檔決定要使用哪些資料流模組

40

B L U E P L A N E T @ 2 0 2 2

「看得到的行為」才是「容易改變」的

41

B L U E P L A N E T @ 2 0 2 2

Thank you for listening

42

B L U E P L A N E T @ 2 0 2 2