可視化基礎 | Jacques Bertin 與圖形符號系統

掃掃二微碼，關注我們的微信公眾號，獲得最前沿的可視化資訊！

本文編譯自：Before Tufte, there was Bertin，原作者：Karl Sluis

小編的話

雅克·貝爾廷（Jacques Bertin）是信息可視化領域的奠基人之一，因為他是第一個系統和理性地闡述定量圖形展示分析的理論的人。

作為「自動化可視化（automated visualization）」系列文章的前傳，這篇介紹Bertin 著作《圖形符號學》的文章不會具體介紹什麼是自動化可視化，而是將從以下幾個方面帶您了解信息可視化的基礎框架 — — 恰恰也是自動化可視化技術的部分基礎：

• 圖表有哪些主要的組成部分？
• 不同類型的數據應該用怎樣的圖表去呈現？
• 如何決定視覺元素和數據映射關係？
• 可視化需要回答的三個問題（可視化設計的評價標準）是什麼？

雖然理論略有點晦澀，但絕對值得一讀。

非常喜歡原文作者簡明而不失幽默的文筆，因此採用了全篇翻譯的形式，希望多少能傳達一點這讓人時而會心一笑，時而拍案叫絕的精彩。個別幾處為了便於理解，根據小編的理解進行了意譯或標註，如有不准確的地方，歡迎指出，謝謝。

《圖形符號學》插圖

基本介紹

Jacques Bertin 的《圖形符號學》（Semiology of Graphics）， 是一本關於信息圖（information graphics）的出色著作，比Edward Tufte 經典的《定量信息的視覺展示》（The Visual Display of Quantitative Information）一書還要早16年問世。

在Tufte 提出“chartjunk” 和“sparklines” 之前，這位來自法國的製圖師和理論家Bertin 就已描繪出了他的“圖形符號系統（Graphic Sign-System）” ，一個設計和評估信息圖的早期理論框架的輪廓。五十年後的今天，僅有 Tukey、Cleveland 和 Wilkinson 等少數人提出了可以同這個框架的媲美的理論，而讀過的人則更少。

注[1]：chartjunk（圖表垃圾）指的是圖表中所有無益於讀者理解圖表上展示的信息，甚至會分散讀者註意力或造成對數據的錯誤理解的，不必要的視覺元素。

注[2]：sparklines（迷你圖）是一個非常小的折線圖，通常會隱藏坐標軸。它以簡單且高度濃縮的方式呈現某些數值的變化走勢（通常隨時間變化），例如溫度或股價。

《圖形符號學》是本難啃的、令人生畏的書，但如果說它是艱深複雜的，不妨說它也充滿了理論的精華。下面就讓我們來了解一下這本書提到的一些概念和亮點，因為它們在今時今日，仍為信息圖的創作和評估提供了實用的框架。

圖表的結構

Bertin 在1967年創作這本書時，關注的主要是平面的、靜態的信息圖。五十年過去了，技術的不斷更新換代下，這種形式幾乎沒有改變 — — 我們的工作仍然頗為局限於紙張和屏幕的二維平面。

在這個前提下，任何圖表都包含了兩個關鍵要素：視覺標記（visual marks）或implantation 本身（例如，散點圖上的點）及其在平面上的位置 （點相對於x、y 軸的位置）。

從另一個角度來看，統一所有被繪製的視覺標記的思想、概念或主題 — — 是一個不變量（invariant） 。 Bertin 將構成這個不變量的可變特徵稱為組成部分（components） 。然後，這些組成部分本身又由稱為元素（element） 的不同原子部分組成。

注[3]：implantation 即視覺標記的形式，可以是點、線或面；由於只有 Bertin 使用這個叫法，且沒有找到很合適的中文翻譯，因此這個詞不作翻譯。

讓我們以下面這個相當不錯的，關於美國槍支銷售的圖表為例：

《奧巴馬呼籲新的限制後，槍支銷售飆升》（來自紐約時報）

其中，不變量（主題）是“自2000年以來美國的槍支銷售估計量”，這也是圖表的主體內容。它的組成部分包括了銷售量的變化和時間的變化。其元素是每個月的槍支銷售估計量。這裡不妨留意一下，不變量與圖表標題（title） 之間的關係，組成部分與坐標軸以及圖表的平面空間（planar space） 之間的關係，以及元素與視覺標記（visual implantations / marks） 之間的關係。

不變量（主題）、組成部分與元素的示意圖

組織層次（Levels of Organization）

組成部分（component）本身可以分為以下三種類型：

• 定量的（Quantitative） ：該組成部分由彼此之間具有恆定數值比的元素組成，比如一個分鐘數的序列。
• 有序的（Ordered） ：該組成部分由具有自然（順序）序列的元素組成，如冷-暖-熱（溫度），或白-灰-黑（灰度）。
• 定性的（Qualitative） ：該組成部分由相關（associated）和差異化（differentiated）的組構成，但組與組之間沒有內在的順序，例如美國50個州的列表。這樣有什麼好處呢？由於定性的組成部分（qualitative components）沒有內在順序，因此可以對它們進行任意重新排序以挖掘和揭示數據中潛藏的規律。

注[4]：component（組成部分）可以理解為對應於數據中的字段/數據項

注[5]：數據分類有多種定義方式，命名也不止一種，Quantitative 類似於 Numeric；Ordered 類似於 Ordinal；Qualitative 類似於 Categorical 或 Nominal。

Bertin 認為，了解圖表中各組成部分的性質，有助於引導人們進行圖表的設計和圖表形式的選擇。於是，當他設計一個用於生成圖形的系統（system for sign-making） 時，Bertin 為具有不同組成部分的圖表提出的設計建議是近乎嚴苛的 — — 例如，具有兩個組成部分的圖表的基本形式（就有下圖中的這麼多種）：

組成部分（component）的分類

如何構建一個圖表

前面我們已經明確過了，平面空間是一個圖表的基礎。在這個基礎空間內，讀者大可以抱有某些預期 — — 例如，圖表中的每個標記（mark）都是有意義的，而同時，沒有標記的位置（即空白處）也是有意義的。除了implantation 的xy 位置，Bertin 還介紹了六種我們可以應用於構造這個implantation 的視覺變量（visual variables）：分別是大小（size） ，明度（value） ，圖案（pattern） ，顏色（color） ，方向（orientation） 和形狀（shape） 。

看！一個關於圖表的圖表~

在這個圖中以及其他地方，Bertin 強調了關於將信息映射到圖表的一些重要概念： （小編：劃重點！！這部分可以說非常精華了）

• 大小 的相對關係是最廣泛有效，且易於感知的視覺變量，無論要可視化的信息是什麼都可以用。
• 尺寸和平面位置（即 x-y 位置） 是唯一可以準確傳達定量（quantitative）信息的視覺變量。
• 對於傳達有序（order）信息，使用明度 （從明到暗）的效果遠遠優於顏色 （從一種顏色到另一種顏色）。
• 表現視覺關聯（association） 和構建視覺組時，使用顏色、方向和形狀的效果最佳。
• 理想情況下，圖表應取得一個空白與 5％-10％ 墨水的平衡（即圖表不要畫得太滿太雜亂）。
• 專注於圖表中較少的組成部分（即一個圖表中不要呈現太多個數據項）有助於讀者記憶，並且便於我們自如地使用更特別的圖表形式。

如何閱讀圖表

最後，對於一個圖表是否能成功地作為有效的信息傳輸手段，Bertin 給出了一些評估方法的指導。讓我們首先來看看閱讀一個圖表的三個層次：

1. 外部（External） ：從世界上存在的所有信息中，這幅圖像中顯示了哪些信息？當讀者的眼睛看向標題和坐標軸的名稱 — — 或者說看到圖的不變量和組成部分，分別會是什麼。如果我們重新看看前文中提到的槍支銷售圖，我們讀到的是“一段時間內，在美國的槍支銷售量”。
2. 內部（Internal） ：現在我們的眼睛轉向該圖像本身。哪些視覺變量被用於表示該圖表中的組成部分？在槍支銷售圖中，我們看到的是淺灰色網格上方的一條紅色折線。
3. 關係（Relationships） ：最後，我們的大腦將這些元素之間聯繫建立起來。這些組成部分之間是如何關聯的？我能對這張圖提出什麼問題？我能從中得到什麼信息？

前文中提到的槍支銷售圖表

相應地，Bertin 又介紹了一個圖表應該回答的三個問題 （顯然，這是個“今天我講三點內容……”句式的忠實擁護者）。

1. 初級（Elementary） ：一個初級問題通常關注的是圖表的某個特定元素。例如在槍支銷售圖表的例子中：“2013年1月售出了多少支槍？” 讀者可以通過查看兩個坐標軸對應位置上的標註，或者閱讀折線旁的註釋，得知那個月有200萬支槍被售出。
2. 中級（Intermediate） ：一個中級問題關注的是某一組元素，且通常會揭示數據的變化趨勢。例如，“自奧巴馬總統當選以來，槍支銷售量的變化趨勢是什麼？”可悲的是，它正在加速發展。
3. 整體（Overall） ：整體問題尋求的是關於圖表的概括性問題的答案。例如，“自2000年以來，美國槍支銷售的總體趨勢是什麼？”總體而言，槍支銷售一直在增加，並且隨著某些事件的出現，達到一次又一次的高峰。

從左到右：初級，中級和整體閱讀層級

（小編：您可能不禁要問，這三個問題有什麼用呢？以下劃重點！）

Bertin 認為，如果一個圖表能夠回答以上全部三種問題（初級，中級和整體），就可以說這個圖表是高效的 。要是不能完全提供這幾種問題的答案的話，就只能說，這不是一個足夠優秀的圖表呢。高效的圖表能夠回答各個層次的任意問題，這會幫助讀者去發現數據中潛藏的規律，從而進一步創造出我們最最渴望的成果：知識。

如果您現在是，或想要成為一名可視化設計師，即使《圖形符號學》並不是聖經，也要把它的結構牢記在心。雖然我們現在有了許多創新的可視化技術，包括縮放（pinch-to-zoom）、懸停狀態（hover-state）、動畫、按需顯示詳情（details-on-demand）等等，但Bertin 提出的理論能夠為您的工作提供一個強大的框架體系：

• 一開始感到無從下手？您是否已確定 圖表的不變量（主題），組成部分和元素？
• 是否為讀者清晰地標註了 不變量（主題）和各個組成部分？
• 對於定量的組成部分和有序的組成部分，是否能讓讀者直觀地看出它們是有序的 ？而對於定性的組成部分，是否對它進行了重排序，來揭示數據的規律？
• 可視化映射是否能最有效地利用六種視覺變量 ？
• 這個圖表能否回答所有三種類型的問題 ？

只需要付出一點點努力，很快您就可以自如地運用《圖形符號學》的“語言”。

參考文獻及更多閱讀

[1] 維基百科 — Jacques Bertin

[2] Edward Tufte 個人網站

[3] Semiology of Graphics: Diagrams, Networks, Maps by Jacques Bertin

[4] The Visual Display of Quantitative Information by Edward Tufte

[5] Exploratory Data Analysis by John W. Tukey

[6] Visualizing Data by William S. Cleveland

[7] The Grammar of Graphics (Statistics and Computing) by Leland Wilkinson

[8] 槍支銷售信息圖來源：[What Happens After Calls for New Gun Restrictions? Sales Go Up](https://www.nytimes.com/interactive/2015/12/10/us/gun-sales-terrorism- obama-restrictions.html)

[9] Edward Tufte 的書中對 chartjunk 的介紹：Chapter 5: Chartjunk

[10] Info Vis Wiki — Chart Junk

本文作者