AntV，返璞歸真幻化萬千可視化表達（附演講視頻）

SEE Conf 分享回顧

很榮幸有機會在 SEE Conf 2018 上與絕雲一道和大家分享了些關於 G2，關於 AntV 上的一些經驗和思考，也很抱歉分享過程中我自己的操作失誤導致出現了些耽擱，希望沒影響大家的心情，演講視頻新鮮出爐，歡迎隨時與我們有更多的探討。

AntV，返璞歸真幻化萬千可視化表達 — 絕雲 & 御術v.youku.com

數據可視化與製圖理論

數據可視化的目的在於用圖形化的手段，清晰有效地傳達和溝通信息。常言道「一圖勝千言」，原因就在於人能迅速獲取和高效解讀視覺信息。數據可視化的領域很廣，歷史也非常悠久。我們熟知的統計圖表，譬如柱狀圖、折線圖、餅圖等，早在18世紀就已面世了。

統計圖表自 William Playfair 的時代開始，逐漸得到了越來越廣泛的應用。也誕生了不少經典的案例，譬如南丁格爾19世紀50年代繪製的「玫瑰圖」和法國工程師 Charles Joseph Minard 1861年繪製的「拿破崙東征」等等。

不過直到20世紀下半葉，統計圖表的製圖理論和方法才得到了進一步的改革。法國製圖師 Jacques Bertin 在研究了大量的圖表案例之後，發表了可視化圖表設計與製圖的奠基之作《the Semiology of Graphics》。

狹義的數據可視化就是把數據映射到一個二維平面上，通過人眼易於識別的視覺元素組合來表現數據。這本書為可視化提煉出幾個最基礎的視覺元素，為統計圖表可視化工具的理論和實現奠定了基礎。

圖形語法

製圖理論的完備，催生了越來越多的圖表。計算機的普及和圖形學的發展，也讓統計圖表得到進一步的豐富和發展。新的可視化圖表層出不窮的同時，可視化圖表繪製軟體也越來越多，這時，在工程實現方面，有一個問題越來越突出：如何能以比較小的代價窮舉儘可能多的圖形？歸根到底，就是如何表示一個可視化圖表的問題。

Leland Wilkinson 在上世紀80年代開始開發 SYSTAT 的統計圖形軟體包時，也遇到了這個問題。最初的版本是枚舉每一個能收集到的統計圖形，最終代碼量非常大，約 1.5M 左右。90年代初，他基於面向對象重構了這個項目，以一種樹形結構管理圖形元素，得到了更易擴展和動態的結果。這時軟體包的大小下降到了 1M 以內。到了90年代末期，他和幾個統計學家、計算機學家合作基於之前的工作開發了統計圖形繪圖工具 GPL。這個 Java 版本的軟體代碼量下降到了 0.5M 以下，並且沉澱出了一套穩定可靠的架構。

《The Grammar of Graphics》就是 Wilkinson 在開發這套可視化軟體的時候編寫的，既有他對無數統計圖表分析研究後的理論總結，也不乏實現圖形語法的軟體架構細節。至此，用一套語法描述任意圖形的方法誕生了，編寫基於圖形語法的軟體包有了理論依據和設計實踐指導。

根據這本書的描述，統計圖形的定義依靠以下幾個基礎語法：

生成一個統計圖形的步驟如下圖所示：

那麼，基於圖形語法畫一個餅圖的過程是怎麼樣的？拿 JavaScript 版本的圖形語法 G2 舉例，畫一個簡單餅圖的代碼如下：

const data = [ { k: 一, v: 40 }, { k: 二, v: 21 }, { k: 三, v: 17 }, { k: 四, v: 13 }, { k: 五, v: 9 }]const dv = new DataSet.View().source(data) // 載入數據 .transform({ // 數據處理：統計每一個 key 對應數值 value 佔總和的比例 type: percent, field: v, dimension: k, as: percent })const chart = new G2.Chart({ container: id // 指定圖表容器，可以是 DomNode，也可以是 id})chart.source(dv) // 載入數據chart.coord(polar).transpose() // 坐標轉換chart.intervalStack() // interval 類型的 element，做堆疊處理 .position(1*percent) // 位置映射 .color(k) // 顏色映射chart.render() // 渲染圖表

和傳統枚舉圖表類型的可視化工具相比，基於圖形語法的可視化工具的特徵是：生成每一個圖形的過程就是組合不同的基礎圖形語法的過程。上述餅圖的生成過程就經歷了從原始數據 data 到數據轉換、坐標軸轉換、指定輔助元素、指定基礎圖形對象、度量轉換、數據映射等過程。圖形語法的靈活和強大之處就在於，我們只需要改動其中某一步的處理過程，就能得到完全不同的、全新的圖表。譬如，上述代碼只需改動坐標轉換部分的語句，就能以下各種結果：

而所有的語句都是可以改動和微調的，抽象出來的繪圖過程每一個步驟都可以變換改動，從而產生無數種組合的圖表。這正是圖形語法的精髓之處，引用 ggplot2 作者的話來說，就是：

圖形語法能讓我們簡潔地描述圖形組件。這種語法能使我們超越命名圖形（譬如散點圖），更深入地理解統計圖形的層次結構

通過圖形語法，我們不僅能畫出已知的幾乎所有圖表，更能組合創造出各式各樣全新的圖表來。

圖形語法的開源實現

《The Grammar of Graphics》於1999年初版，2005年再版，至今已經有十多年歷史。除了在各種商業系統（SPSS、Tableau等）中應用以外，開源社區也開始逐漸誕生各種版本。下面是幾個比較典型的基於圖形語法的開源實現。

ggplot2

ggplot2 是 R 語言社區最著名的可視化繪圖包，2005年由 Hadley Wickham 創造。ggplot2 是目前開源社區圖形語法特性實現最全面的軟體，迄今已經成長為 R 社區乃至可視化業界最受歡迎的包之一。

Bokeh

Bokeh 是圖形語法在 Python 技術棧下的實現。圖形語法的實現是基於 Python 的，最終渲染是用 D3 在瀏覽器上繪圖。其優勢是可以藉由 Python 獲得大規模數據的處理能力，但也因為同時具備兩個端（BS 架構），所以嵌入其他系統的成本相對較大。

Vega

Vega 是華盛頓大學計算機學院數據交互實驗室（IDL）開發的一套交互圖形語法，定義了數據到圖形的映射規則、常見的交互語法和常見的圖形元素，用戶可以自由使用 Vega 語法進行組合構建出各種各樣的圖表。其語法格式是 JSON，渲染引擎是 D3，一定程度上參考了《The Grammar of Graphics》，並且在其基礎上進行了「用語法定義交互流程和行為」方面的探索。

AntV-G2

G2 是一套基於可視化編碼的圖形語法，開源來自螞蟻金服數據可視化團隊，是螞蟻金服數據可視化解決方案 AntV 的重要組成部分。以數據驅動，具有高度的易用性和擴展性，用戶無需關注各種繁瑣的實現細節，一條語句即可構建出各種各樣可交互的統計圖表。

G2 是目前 JavaScript 社區對《The Grammar of Graphics》還原度最高的實現，剛一開源就得到 Leland Wilkinson 本人的肯定。除實現「圖形語法」部分以外，G2 還針對 JavaScript 技術棧在「數據驅動」和「交互」方面進行探索，願景是實現一套「數據驅動的高交互可視化圖形語法」。

未完待續

大家如果對可視化圖形語法的工程實踐感興趣，歡迎關注2018年1月6日在浙江杭州舉行的首屆螞蟻金服體驗科技大會（SEE Conf），會上將有關於 AntV、G2 的更多分享，期待與大家有更多的交流與討論。

>> SEE Conf 鏈接

作者：絕雲 、Kener-林峰