OrbCharts 公開發表會
上德
2025-02-25(二) 02:25PM
B L U E P L A N E T
2019
Widget
2020
BpChart
2021
股權結構圖
2023
大改版
2024
從視覺化到資料
2022
資料視覺化
2
B L U E P L A N E T
2019 Widget
3
B L U E P L A N E T
蛛思
4
B L U E P L A N E T
D3.js (Data Driven Documents)
5
原始資料(JSON)
呈現資料
玫瑰圖
連接線
連接線
icon
文字
陣列內的
每筆資料
資料運算函式
繪圖函式
動畫函式
事件監聽
Selection
Data-Join
B L U E P L A N E T
Widget研究
給一般使用者，只需把iframe標籤加入blog的編輯器當中即可。但如果blog本身有阻擋iframe標籤（安全考量）仍可能無法使用。
給開發者使用，可以給使用者更高的自訂彈性
6
B L U E P L A N E T
蛛思widget
7
B L U E P L A N E T
2020 BpChart
8
B L U E P L A N E T
模組化
9
http://www.simplewebconsulting.com/bem-vs-traditional-css/
（不過在後續版本中完全移除 css 樣式檔之後就不再重要）
B L U E P L A N E T
架構化
10
打包
如果是單個iframe
如果要用全部圖表的js
如果要用單個圖表的js
依需求選擇要用的檔案
* 實際上發展至今現在的架構已經遠比當時更加複雜了，這張圖僅用來說明當時為了解決 Widget需求所設計出來的架構
B L U E P L A N E T
內部平台
展示頁面
11
公司內部npm server
B L U E P L A N E T
CI/CD
12
npm publish
BP Chart
開發專案
使用端
webpack打包
發佈至npm
Server
DEMO頁
使用端
開發專案
二擇一
使用圖表模組
私有npm
Git push!!
npm run build
Gitlab Runner
* 實際上發展至今現在的架構已經遠比當時更加複雜了，這張圖僅用來說明當時為了解決 Widget需求所設計出來的架構
B L U E P L A N E T
2021 股權結構圖
13
B L U E P L A N E T
特化版的關聯圖
14
PM畫的示意圖
B L U E P L A N E T
現實很骨感（使用 Dagre-D3 製作）
15
B L U E P L A N E T
完全手刻的成果
16
（但沒有放到 OrbCharts 裡，實告付費 only）
B L U E P L A N E T
2022 資料視覺化
17
B L U E P L A N E T
視覺屬性與資料類型
18
B L U E P L A N E T
19
B L U E P L A N E T
20
What would you like to show?
靜態
Comparison
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
B L U E P L A N E T
* 但這個整理後來其實也沒用到
21
正負值
名次
資料關聯方向
分向長條圖
排序長條圖
Directed Chart 有向圖
分向折線圖
分向堆疊長條圖
Bump Chart 凹凸圖
排序泡泡圖
實告股權結構圖
實告實質受益人圖
Feature
B L U E P L A N E T
2023 大改版
22
B L U E P L A N E T
抽象化的新構想
23
Data
Data Formatter
Plugins
* 「Data Formatter」在2023年時最初取的名字叫「Data Structure」
Data
Data
Formatter
Plugins
Data
Data
Formatter
Plugins
可以有多種資料結構的組合
．．．
B L U E P L A N E T
Data – 以「Grid矩陣資料」為例
以二維陣列來表示一個矩陣資料
24
data: [
[55,80,50,110,150,65],
[35,40,15,65,120,75],
[45,50,25,55,110,105]
]
B L U E P L A N E T
DataFormatter – 以「Grid矩陣資料」為例(1)
Series 資料的方向為 row，所以圖例會有「正面」、「中立」、「負面」
25
dataFormatter: {
grid: {
rowLabels: ['正面', '中立', '負面'],
columnLabels: ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06’],
seriesType : 'row'
}
}
data: [
[55,80,50,110,150,65],
[35,40,15,65,120,75],
[45,50,25,55,110,105]
]
B L U E P L A N E T
DataFormatter – 以「Grid矩陣資料」為例(2)
scaleDomain 選擇圖軸範圍內的資料範圍，會映射到圖軸位置
26
dataFormatter: {
grid: {
rowLabels: ['正面', '中立', '負面'],
columnLabels: ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06’],
seriesType : 'row'
},
groupAxis: {
scaleDomain: [1, 4],
scalePadding: 0.5
}
}
data: [
[55,80,50,110,150,65],
[35,40,15,65,120,75],
[45,50,25,55,110,105]
]
B L U E P L A N E T
DataFormatter – 以「Grid矩陣資料」為例(3)
Series 資料的方向為 column，所以圖例會有「2023-01」、「2023-02」…
27
data: [
[55,80,50,110,150,65],
[35,40,15,65,120,75],
[45,50,25,55,110,105]
]
dataFormatter: {
grid: {
rowLabels: ['正面', '中立', '負面’],
columnLabels: ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06’],
seriesType : 'column'
}
}
B L U E P L A N E T
DataFormatter – 以「Grid矩陣資料」為例(4)
設定圖軸的方向，groupAxis及valueAxis都分別可以設定為top / right / bottom / left
28
data: [
[55,80,50,110,150,65],
[35,40,15,65,120,75],
[45,50,25,55,110,105]
]
dataFormatter: {
grid: {
rowLabels: ['正面', '中立', '負面’],
columnLabels: ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06’],
seriesType : 'column'
},
groupAxis: {
position: 'left'
},
valueAxis: {
position: 'bottom'
}
}
B L U E P L A N E T
Plugins – 以「Grid矩陣資料」為例
相同的 Data 和 DataFormatter 下，只要更換 Plugins 就可以更換不同的圖型
29
dataFormatter: {
...
}
data: [
[55,80,50,110,150,65],
[35,40,15,65,120,75],
[45,50,25,55,110,105]
]
plugins: [
plugin1, plugin2, plugin3
]
B L U E P L A N E T
2024 從視覺化到資料
30
B L U E P L A N E T
(1) Series 序列資料
（2025最終完成的截圖）
31
[
55,
[80,50,110,150,65],
[35,40,15,65,120,75],
[45,110,105]
]
31
B L U E P L A N E T
(2) Grid 矩陣資料
（2025最終完成的截圖）
32
[
[55,80,50,110,150,65],
[35,40,15,65,120,75],
[45,50,25,55,110,105]
]
32
B L U E P L A N E T
(3) MultiGrid多維矩陣資料
（2025最終完成的截圖）
33
[
[
[55,80,50,110,150,65],
[35,40,15,65,120,75],
[45,50,25,55,110,105]
],
[
[65,70,40,80,110,65],
[85,30,65,75,70,85],
[95,50,65,95,100,115]
]
]
33
B L U E P L A N E T
(4) MultiValue 多維數據資料
（2025最終完成的截圖）
34
[
[55,80,500],
[65,70,610],
[70,60,430],
[40,85,270],
[35,45,480],
[80,70,670],
[45,60,810],
[60,80,330]
]
34
B L U E P L A N E T
(5) Relationship 關聯資料
（2025最終完成的截圖）
35
{
nodes: {
{
id: '0'
},
{
id: '1'
},
{
id: '2'
}
},
edges: [
{
start: '0',
end: '1'
},
{
start: '1',
end: '2'
},
{
start: '2',
end: '0'
},
]
}
35
B L U E P L A N E T
(6) Tree 樹狀資料
（2025最終完成的截圖）
36
[
{
id: '0-0',
value: 35,
children: [
{
id: '1-0',
value: 40
},
{
id: '1-1',
value: 25,
children: [
{
id: '2-0',
value: 100
},
{
id: '2-1',
value: 50
},
]
}
]
}
]
[
{
id: '0-0',
value: 35
},
{
id: '1-0',
value: 40,
parent: '0-0'
},
{
id: '1-1',
value: 25,
parent: '0-0'
},
{
id: '2-0',
value: 100,
parent: '1-1'
},
{
id: '2-1',
value: 50,
parent: '1-1'
}
]
36
B L U E P L A N E T
（以資料結構抽象化後的）模組化設計
37
v2
v3
（無Plugin設計）
B L U E P L A N E T
「資料驅動」
38
a
b
c
a b
b c
a b c
Data
Data Join
Events
Fn()
SVG
… 等各種資料映射的函式
Data
Subject
Observer
RxJS�Observer Pattern
D3.js
Data Driven
B L U E P L A N E T
2025 OrbCharts
39
B L U E P L A N E T
有一些可能比技術更困難的事
40
沒錯，這幾件事情幾乎是事情做到最後的時候 (2024) 才有辦法決定出來，就和我的碩論標題一樣，幾乎是快寫完了才定下來（？）
B L U E P L A N E T
命名發想
41
符合主打特色
跟本身特色都無關，但最符合命名套路，唸起來也最響亮
符合次要主打特色
符合次要主打特色
直接搭配形象物，但是又沒那麼直覺
迷彩：camo
變色龍：chameleon
X
X
* 主打特色從最一開始的 6 點一直整理到最後限縮到剩下 3 點
B L U E P L A N E T
Logo發想
Bing
42
Design.com
雨恩
javascript, open-source-library, chart, information graphics, infographic, information visualization, data-driven, blue planet
B L U E P L A N E T
最終定案的神來一筆…
被監視器錄到麥田上的光球(Orbs)繞了幾圈之後，麥田圈就浮現出來了
43
B L U E P L A N E T
Logo決選
名字決定之後，請雨恩幫忙設計的 Logo 進入最終選擇
44
* 我決定不上色的原因，是因為我希望整體視覺上只有圖表有顏色，以顏色代表呈現出來的資訊，其餘無關的都以黑白來呈現
B L U E P L A N E T
一些 Wording
45
麥田圈也是一種資訊視覺化啊
B L U E P L A N E T
網站
46
B L U E P L A N E T
成果
23 個圖表類型、 50 個 Plugins、100 個樣式檔 (Preset)組合
47
2023/5~2025/2
B L U E P L A N E T
使用 BpChart / OrbCharts 的藍星球專案
48
B L U E P L A N E T
簡報
49
對了，我怕有人不知道，我不是圖表工程師喔，做圖表只是我的其中一個工作…
B L U E P L A N E T
2025.02.25(二) 02:25PM��OrbCharts v3.0��npm publish
50
B L U E P L A N E T
Thank you
填寫問卷取得限量雷射貼紙
51
B L U E P L A N E T