cover

上週我們帶大家了解了視覺化選色的基本原則與分類,也許大家都很急著想要實際做做看,但別急 — 選色的重點從現在才開始!這次就讓我們接續前一次色盤的議題來繼續深入了解資料視覺化的彩色世界。

我們在前一篇文章「顏色這樣挑!搞定你的視覺化色盤( 上 )」帶大家了解了顏色的基礎,還記得有哪些嗎?讓我們複習一下:

  • 使用 HCL 色域以取得更好的明度控制
  • 分別利用彩度、色調與明度來進行分組、強調與區別等不同任務
  • 從四種情境考慮資料的性質來設計色盤

這些都是很簡單且有效的原則。想要表現兩黨選舉的票數差距?就以 Divergin 式的色盤、控制明度的方式來表現數據高低。想說明獲勝政黨的基本分布?就在地圖上使用 Qualitative 式的色盤,並控制明度到接近的程度。然而,知道了基本原則,卻會衍生出更多的疑問,比方說一個最基本的問題:我該怎麼做才能控制明度?

從實用觀點看 HCL

很可惜,並不是所有常見的視覺化工具都內含 HCL 的控制;舉例來說,下圖為 Tableau Public 與 Adobe Illustrator 的顏色選擇器,左方的 Tableau Public 雖然提供了特製過的內建色盤,但在選色時只提供作業系統預設的選擇器;而右方的 Adobe Ilustrator 則提供了 RGB、HSB、CMYK 與印刷較為相關的色域。

Chooosers

那麼,我們還有什麼其它的選擇呢?

KalleWheel

Adobe 近年的產品有提供地三方的接口,因此我們可以很容易的安裝各種擴充功能;舉例來說,KalleWheel 便是一個支援 HCL 色域的 Adobe Photoshop 擴充,他除了提供 HCL 色域的選擇外,還提供了不同光源下的色偏資訊,不過很可惜的似乎仍沒有上架,目前以開源的方式提供我們使用。若你對使用 KalleWheel 有興趣,可以參考他的 Github 程式庫。下圖為 KalleWheel 的執行畫面,右圖的線段即表示特定光源下的色偏狀況:

kalleWheel

HCL ColorPicker

雖然大部份的視覺化工具並不內含 HCL 的選色器,我們仍可以透過外部工具的協助來做一些輔助。 Tristen Forsythe Brown 製作的這個 HCL ColorPicker 可以讓我們外速的拉出一個色調與明度都均勻分布的色盤;下圖左方為色盤選擇器,我們可以自由的設定顏色的數量、決定起點與終點色,而右方則是即時的在地圖上檢視色盤的表現。

HCL Color Picker

這個工具相當簡單,但也稍微帶來了一點限制,比方說必須要固定一個維度、也無法直接產生 Divergin 類的色盤。最終顏色可能還是得逐一挑選,但對於初次快速的以明度為主設定一個色盤來說,算是相當方便。

I Want Hue

相較於 HCL ColorPicker 固定維度的作法, I Want Hue 讓我們自行設定各維度的範圍,然後利用 K-means 演算法將相近的顏色依指定數量分群,可說是用演算法的方式找出最佳的顏色組合。如下圖所示,左方的「H」、「C」、「L」三個 Slider 我們都能分別設定其上下界,接著只要在右方點個按鈕,顏色便自動分群並計算出中心顏色。

不過,小編覺得這樣產生的色彩似乎喪失了一點個性,程式計算使得客製化的空間變小,比方說,無法選擇對比色調或是設定強烈的明暗對比。

I Want Hue

ColorBrewer

Cynthia Brewer 所製作的同名工具 Color Brewer 可能是這裡面最廣為人知的一個了,他也很好的提供了 Sequential 、 Diverging 與 Qualitative 色盤的選項,不過他並不是一個顏色產生器,而是一組可客製化的色盤預設集,我們透過數量、資料類型等選項選好了一組色盤後,由 Color Brewer 即時產生並套用在地圖上,同時提示我們這個色盤在色盲讀者、印刷品等情境下的表現狀況。

雖然說並不是自行製作色盤、而是預先設定好的色盤,直接運用人家挑選好的色盤集對於顏色苦手來說似乎也是個不錯的選擇。

Color Brewer

程式化的手段

雖說一般資料科學家專用的色盤工具不多,但硬派資料科學家倒不需要太在意,硬漢們碰到問題自幹就對了!像是 D3.js 作者 Michael Bostock 的這個 block 便實作了一個 HCL 的顏色挑選器:

HCL color picker in D3

當然這不代表我們硬漢就一定要自幹挑選器,而是說: D3.js 內建有處理 HCL 的能力!我們可以參照這份 D3 顏色函式文件來操作 HCL 色域的顏色,也可以與 RGB / HSL 等色域互相轉換。d3.interpolateHcl 內插函式,讓我們可以利用下面這段程式碼直接做出類似 HCL ColorPicker 的效果:

  d3.scale.linear().domain([0,1000]).range(["red", "blue"]).interpolate(d3.cie.interpolateHcl);

利用上面這一行程式碼我們便能直接將、比如說、熱度地圖上的數值直接對應到一個明度等距的色盤。方便吧!

多色調陷阱

自行製作色盤時可能會碰到一個問題:如果我預先選定了多個顏色,那麼多組顏色所內插出來的色盤明度就不會是一個線性的變化!紐約時報的圖像編輯 Gregor Aisch 在他的這篇專文「Mastering Multi-hued Color Scales with Chroma.js」中便提到了這個問題,並實際提出了利用貝茲曲線與明度校正的兩個方式來做出更完美的色盤。詳細的理論與實驗我們這裡不多談,但他原文中主要使用的是一個名為「chroma.js」的函式庫,前述的兩個校正方式也已經在 chroma.js 中有提供,我們可以直接利用 chroma.js 來運用這篇文章裡的演算法產生我們自己的色盤。

Gregor Aisch 除了開發 Chroma.js 外,也提供了一個線上產生色盤的工具網頁「Chroma.js Color Scale Helper」,可以方便我們設定多色調的色盤,並指定 Sequential 或 Diverging 的資料類型。怪不得紐約時報的圖表顏色都這麼好看,果然還是要專業的來!

Chroma.js 本身也已經是一個極優異的 JavaScript 色彩處理函式庫,更何況他還具備有 HCL 色域的這項武器。如果你需要開發顏色相關的軟體,下次考慮使用 Chroma.js 吧!

小結

歡樂的時光總是過得特別快,很遺憾的是又再次因為篇幅的限制,這篇文章要先到此為止。我們從 HCL 色域、Cythia Brewer 的 Color Schemes 、各種 HCL 的輔助工具與挑選色盤的最佳手段,有再次感受到顏色世界的博大精深嗎?還沒完喔,顏色還有不少議題值得我們討論呢,讓我們下集再見!


Written by infographics.tw

1 Comment

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *