增強(qiáng)分析白皮書——洞察展現(xiàn)篇
AntV 是由螞蟻集團(tuán)產(chǎn)出的開源企業(yè)級數(shù)據(jù)可視化解決方案，包含對統(tǒng)計(jì)數(shù)據(jù)、關(guān)系數(shù)據(jù)、地理數(shù)據(jù)的前端可視化技術(shù)產(chǎn)品和設(shè)計(jì)標(biāo)準(zhǔn)。AVA 是 AntV 品牌下的智能可視分析框架。本套白皮書基于 AVA 及相關(guān)團(tuán)隊(duì)在 BI 增強(qiáng)分析領(lǐng)域數(shù)年的調(diào)研和實(shí)踐積累，旨在分享經(jīng)驗(yàn)與思考。
本篇是《增強(qiáng)分析白皮書》的“洞察展現(xiàn)”篇，專門介紹在數(shù)據(jù)分析類應(yīng)用中展現(xiàn)數(shù)據(jù)洞察和分析結(jié)論時(shí)的注意要點(diǎn)、設(shè)計(jì)規(guī)范和技術(shù)方案。
本文中涉及的具體業(yè)務(wù)案例、場景、數(shù)據(jù)，皆為模擬和示例。
Vol.1?洞察展現(xiàn)的概念? ??
如今，圖表在各類業(yè)務(wù)中已經(jīng)很常見了，制作圖表的工具也越來越豐富。但是，隨著大家對數(shù)據(jù)的重視和應(yīng)用程度越來越高，對于圖表也提出了更多要求。比如，光能看到數(shù)據(jù)的大致情況已經(jīng)不夠了，還需要能清晰地呈現(xiàn)洞察結(jié)論，甚至能啟發(fā)讀者對數(shù)據(jù)背后的問題的思考。
讓我們來舉一個(gè)例子。分析銷量的變化情況是大多數(shù)商業(yè)業(yè)務(wù)上都有的需求。當(dāng)一個(gè)商家想看今日的營業(yè)情況時(shí)，他通?？吹降膱D表是這樣的：
在這張圖表上，商家能獲得什么信息呢？當(dāng)然，可以知道近期有多少筆訂單，也可以看出這個(gè)數(shù)字相比之前是下降了。但是，下降了多少？下降原因是什么？這種下降是否正常？是否需要采取什么措施？這些問題，需要進(jìn)一步查看才能得到答案。
假設(shè)商家有一定的數(shù)據(jù)分析技能，經(jīng)過一番詳細(xì)分析后，可以將發(fā)現(xiàn)的數(shù)據(jù)現(xiàn)象和原因標(biāo)注在圖表上，得到了下面的圖表。通過這張圖表可以看到訂單的變化和促銷等活動(dòng)的關(guān)聯(lián)。可以推測：哪些措施可能比較有利，之后還可以考慮哪些促銷活動(dòng)。
但是，制作上面這張圖表需要非常專業(yè)的數(shù)據(jù)分析師和可視化工具經(jīng)過數(shù)小時(shí)甚至數(shù)天的數(shù)據(jù)分析、制圖過程才能完成，不僅耗時(shí)耗力，還可能耽誤了調(diào)整策略的時(shí)間。怎么能使這個(gè)效率得到提升呢？
我們希望能總結(jié)出一套設(shè)計(jì)規(guī)范和對應(yīng)的技術(shù)工具，來提供標(biāo)準(zhǔn)化的洞察展現(xiàn)解決方案，讓圖表的洞察觸手可及。
??1.1?什么是洞察展現(xiàn)
數(shù)據(jù)分析的核心目的就是從數(shù)據(jù)中發(fā)掘洞察來支撐決策。綜合大量對數(shù)據(jù)可視化的定義會(huì)發(fā)現(xiàn)其主要目的就是輔助洞察獲取[1,2,3]。數(shù)據(jù)可視化技術(shù)可以最大化地調(diào)用人的視覺系統(tǒng)，幫助人進(jìn)行思考，揭開深度的和不易預(yù)想到的洞察，從而助力問題的解決。
一個(gè)完整的洞察，應(yīng)該包含以下成分:
背景：簡潔地描述上下文，確定洞察觀點(diǎn)的范圍(比如:洞察只在特定月份)
矛盾：引人注意的狀態(tài)，常被稱為洞察類型(比如:峰值、離群點(diǎn)、相關(guān)性)
歸因：對矛盾原因的理解和陳述，可來源于統(tǒng)計(jì)或業(yè)務(wù)信息
建議：根據(jù)歸因給出的行動(dòng)建議，常常隱含在歸因中
洞察展現(xiàn)，就是指通過圖形、文字等方法，將洞察的背景、矛盾、歸因、建議等成分精確地展示給讀者。
??1.2?洞察展現(xiàn)的幾種形式?
??1.3?為什么制定洞察展現(xiàn)標(biāo)準(zhǔn)如此重要
Purchase, H. C., Andrienko, N., Jankun-Kelly, T. J., & Ward, M. (2008). Theoretical foundations of information visualization. In A. Kerren et al. (Eds.), Information visualization: Human-centered issues and perspectives (Vol. 4950, pp. 46–64). Berlin/New York: Springer.
McCormick, B. H., DeFanti, T. A., & Brown, M. D. (Eds.). (1987). Visualization in scientific computing. In ACM SIGGRAPH Computer Graphics, New York, Vol. 21, p. 6.
Earnshaw, R. A., & Wiseman, N. (1992). An introduction to scientific visualization. In K. W. Brodlie et al. (Eds.), Scientific visualization, techniques and applications. Berlin/New York: Springer.
Vol.2?設(shè)計(jì)規(guī)范? ??
數(shù)據(jù)可視化的本質(zhì)是通過可視化技術(shù)來提高人們獲取洞見的效率，而數(shù)據(jù)洞察相關(guān)解決方案能夠幫助用戶加速這一過程。場景化的、以用戶為中心的洞察解決方案，能夠讓用戶便捷的、自然地在閱讀到分析的整個(gè)過程中獲取到數(shù)據(jù)洞察。
在業(yè)務(wù)與產(chǎn)品中提供數(shù)據(jù)洞察相關(guān)解決方案，需要團(tuán)隊(duì)中多種角色的協(xié)同合作。這其中，在用戶呈現(xiàn)側(cè)，其核心又依賴于設(shè)計(jì)與前端所聯(lián)合提供的系統(tǒng)性展現(xiàn)和交互方案，我們稱之為 AntV 洞察解決方案。
在本章節(jié)中，我們將集中為大家介紹 AntV 里數(shù)據(jù)洞察解決方案的相關(guān)設(shè)計(jì)規(guī)范。
??2.1?洞察解讀設(shè)計(jì)的四個(gè)層次
設(shè)計(jì)在系統(tǒng)中所起到的作用、所承擔(dān)的角色如下圖所示，下圖是我們對整個(gè)洞察解決方案在用戶側(cè)的用戶訴求、產(chǎn)品場景、解決方案和底層能力的一個(gè)系統(tǒng)性的架構(gòu)圖。
用戶訴求決定了產(chǎn)品場景，產(chǎn)品場景驅(qū)使我們提供對應(yīng)的解決方案。由于產(chǎn)品場景的多樣性，我們所提供的解決方案需要具備完善的基礎(chǔ)能力與高度的系統(tǒng)靈活度，能夠通過直接應(yīng)用或簡單定制去匹配不同業(yè)務(wù)場景的訴求。為了能夠達(dá)到此目的，我們對底層能力的建設(shè)就尤其重要。
??2.1.1?用戶訴求
數(shù)據(jù)可視化的本質(zhì)是通過可視化技術(shù)來提高人們獲取洞見的效率，而數(shù)據(jù)洞察相關(guān)解決方案能夠幫助用戶加速這一過程。這個(gè)過程從用戶視角而言，又可以進(jìn)一步細(xì)分為四大流程：看數(shù)、分析、洞見、執(zhí)行。我們的洞察解決方案，最主要的作用流程集中于：從分析到洞見。
數(shù)據(jù)點(diǎn)洞察
圖表級洞察
報(bào)表級洞察
洞察報(bào)告
??2.1.2?產(chǎn)品場景
在具體的消費(fèi)場景里，從消費(fèi)粒度角度，從微觀到宏觀我們細(xì)分為四大場景：
場景 1 和場景 2 依附于原始圖表數(shù)據(jù)派生出來，洞察觀點(diǎn)與原始數(shù)據(jù)呈現(xiàn)一種實(shí)時(shí)性的、緊密的聯(lián)動(dòng)關(guān)系。場景 3 和場景 4 獨(dú)立于原始圖表數(shù)據(jù)生長出來，但并不意味著洞察觀點(diǎn)脫離原始數(shù)據(jù)，根據(jù)實(shí)際需求，其洞察觀點(diǎn)可以是原始圖表數(shù)據(jù)的靜態(tài)切片數(shù)據(jù)的解讀，也可以是高度實(shí)時(shí)相關(guān)的數(shù)據(jù)解讀。
圖表增強(qiáng)表達(dá)
獨(dú)立觀點(diǎn)表達(dá)
??2.1.3?解決方案
從產(chǎn)品場景中可以看到，場景 1 和場景 2 所需要的解決方案與場景 3 與場景 4 所需要的解決方案相對獨(dú)立，我們對其抽象定義為兩大解決方案：
在圖表增強(qiáng)表達(dá)方面，主要目的是在圖表規(guī)律本身派生出系列可視化后的信息。對于派生的手段，有三種方式：強(qiáng)調(diào)圖形、輔助線、標(biāo)注說明。
在獨(dú)立觀點(diǎn)表達(dá)方面，主要目的是承載獨(dú)立的洞察結(jié)論。對于承載的場景和手段，也有三種方式：解讀文本可視化、行內(nèi)迷你可視化、洞察觀點(diǎn)卡片。
??2.1.4?底層能力
這些解決方案依賴于我們設(shè)計(jì)和技術(shù)長久以來的業(yè)務(wù)實(shí)踐與沉淀，在用戶呈現(xiàn)側(cè)，其核心又依賴于設(shè)計(jì)與前端所提供的系統(tǒng)性展現(xiàn)和交互方案。在設(shè)計(jì)側(cè)我們沉淀為詳盡的規(guī)范材料，在接下來的小節(jié)中，我們將為大家一一介紹。
??2.2?圖表增強(qiáng)表達(dá)
??2.2.1?增強(qiáng)表達(dá)類型
業(yè)務(wù)場景中，一個(gè)普通的圖表僅能呈現(xiàn)數(shù)據(jù)現(xiàn)象，觀點(diǎn)和洞見需要每個(gè)看數(shù)用戶自行挖掘和解讀，為了能夠幫助用戶一眼看懂?dāng)?shù)據(jù)，通過文獻(xiàn)參考[1,2]及結(jié)合業(yè)務(wù)實(shí)踐，總結(jié)出幾種常用技巧，可以幫助你的圖表突出洞察。
??2.2.2?打造視覺反差
通過視覺反差突出重要信息，弱化次要信息，幫助用戶快速看到焦點(diǎn)數(shù)據(jù)。色板中常見兩種，一種是強(qiáng)調(diào)色，常用于重要與次要的分類數(shù)據(jù)，將關(guān)注的數(shù)據(jù)著以高飽和度明亮的顏色，用于對比的其他分類數(shù)據(jù)著以低飽和度顏色；另一種是反差色，常用戶同類的連續(xù)數(shù)據(jù)，比如時(shí)間、月份、年度等，常見案例比如今昨天的數(shù)據(jù)對比，將今天的數(shù)據(jù)著以有色相顏色，昨天的數(shù)據(jù)著以無色相顏色，更多規(guī)范詳見《色板》。
??2.2.3?繪制神奇的線
繪制可供業(yè)務(wù)對比參考、業(yè)務(wù)趨勢判斷、異動(dòng)區(qū)間參考的線。常見輔助線有三大類：基礎(chǔ)統(tǒng)計(jì)如均值、最大、最小、中位等；業(yè)務(wù)經(jīng)驗(yàn)類如目標(biāo)值、預(yù)警值、自定義常量；系統(tǒng)預(yù)測類如預(yù)測線、趨勢線、波動(dòng)線等。因?yàn)榫鶎儆谳o助線，所以在設(shè)計(jì)原則上，樣式層級表達(dá)上均低于圖表原本的數(shù)據(jù)，更多規(guī)范詳見《輔助線》。
更多延伸結(jié)構(gòu)線/劃分參考區(qū)間/添加統(tǒng)計(jì)標(biāo)簽規(guī)范敬請期待...
??2.3?獨(dú)立觀點(diǎn)表達(dá)
「獨(dú)立觀點(diǎn)表達(dá)」指的是由系統(tǒng)智能給出的或用戶輸入的洞察觀點(diǎn)，以一種獨(dú)立于圖表的呈現(xiàn)形態(tài)給出。由于洞察觀點(diǎn)信息量的差異與媒體內(nèi)容的差異，通常我們以卡片容器去承載這樣的洞察觀點(diǎn)，以確保其良好的擴(kuò)展性及和當(dāng)前報(bào)表的兼容性，由此構(gòu)成的具象實(shí)體，我們稱之為「洞察觀點(diǎn)卡片」。
解讀文本可視化組件：用于表達(dá)洞察觀點(diǎn)的文本態(tài)
行內(nèi) mini 圖組件：用于表達(dá)洞察觀點(diǎn)的圖表態(tài)
觀點(diǎn)卡片組件：用于表達(dá)綜合的觀點(diǎn)態(tài)
一個(gè)完整的洞察觀點(diǎn)卡片，從細(xì)粒度到粗粒度包含如下三方面元素：
粒度越粗，越接近真實(shí)的使用場景，越“開箱即用”。在行業(yè)內(nèi)，大多數(shù)對前兩者有過定義，但對觀點(diǎn)卡片組件未曾有過定義。
本節(jié)將初步分享上述三類獨(dú)立觀點(diǎn)表達(dá)的組件的設(shè)計(jì)規(guī)范和技術(shù)細(xì)節(jié)。
??2.3.1?解讀文本可視化
當(dāng)解讀文本較多的時(shí)候，同樣用戶將需要消耗更多的注意力去完成對觀點(diǎn)的獲取。因此，通過對文本進(jìn)行樣式映射，可以讓文本中的信息更易讀。
更進(jìn)一步，通過文本和圖形的交互，可以讓洞察信息的傳達(dá)更加準(zhǔn)確。
針對解讀文本的詞匯構(gòu)成，我們總體將文本信息分為如下幾類：
解讀文本可視化規(guī)劃，即針對上述信息一一進(jìn)行視覺要素的編碼，使其“可視化”。在解讀文本可視化設(shè)計(jì)方面，我們提出下列三個(gè)原則：
少即是多：由于文本信息類別的多樣性，如果將所有信息都映射不同的視覺元素，將會(huì)出現(xiàn)“過了頭”的文本可視化情況，違背了了原本為了讓解讀文本更易讀的目標(biāo)。因此我們需要克制的對相關(guān)元素進(jìn)行編碼，盡可能只編碼用戶最為關(guān)注的幾類信息。原則上建議使用的不同的視覺元素不超過 7 個(gè)。
動(dòng)靜分離：解讀文本除了滿足用戶閱讀的場景，在部分可視分析場景中，用戶還希望能快速的針對某些條件進(jìn)行篩選，因此部分文本組件將以可交互狀態(tài)出現(xiàn)。為了避免可交互狀態(tài)的視覺樣式與靜態(tài)文本的視覺樣式混為一談，我們采用不同的視覺元素分別進(jìn)行編碼。如靜態(tài)文本可用顏色編碼，直接作用于文字實(shí)體，而可交互文本可用下劃線或背景色編碼，不直接作用于文字實(shí)體。
匹配注意力原則：如上述信息分類表格所示，我們需要對 9 小類文本信息進(jìn)行可視化編碼。在整體編碼思路上，我們應(yīng)該對信息作優(yōu)先級分層梳理，為用戶最為關(guān)注的信息類別賦予最為突出的視覺樣式，而用戶最不關(guān)注的信息類別賦予最為淡化的視覺樣式，如此的解讀文本在實(shí)際被用戶消費(fèi)的過程中，有效的引導(dǎo)用戶的注意力，讓其更快的獲取更關(guān)注的信息。
基于上述原則，我們提供了默認(rèn)的白色主題的規(guī)范樣式表，見下圖。
同時(shí)，我們也提供了暗黑主題的規(guī)范樣式表供大家使用。
我們強(qiáng)烈建議在設(shè)計(jì)文本可視化時(shí)，為自己的產(chǎn)品中關(guān)于「增強(qiáng)分析」的功能和能力預(yù)留一個(gè)品牌主色，使它反復(fù)出現(xiàn)，在用戶心中固化心智。在我們的業(yè)務(wù)當(dāng)中，我們使用了紫色這一品牌主色，它既鮮明，又不會(huì)與常規(guī)的報(bào)表當(dāng)中的可視化用戶沖突。
如果你需要自定義文本樣式，我們建議你基于上述設(shè)計(jì)原則基礎(chǔ)上進(jìn)行定制。
??2.3.2?行內(nèi)迷你可視化圖表
在洞察觀點(diǎn)中，諸如趨勢、分布的等數(shù)據(jù)信息可以借助行內(nèi)迷你可視化圖表的方式，即將微型的可視化圖表內(nèi)嵌倒文本中，為用戶提供更加直觀的觀點(diǎn)獲取。行內(nèi)迷你圖表相較于常規(guī)尺寸的可視化圖表，并沒有本質(zhì)的區(qū)別，通常將信息映射到各種視覺屬性（如顏色、大小、形狀）來進(jìn)行可視化呈現(xiàn)。
行內(nèi)迷你可視化圖表作為外部記憶輔助工具，它們有助于用戶進(jìn)行感知推理、發(fā)現(xiàn)異常值、估計(jì)趨勢和比較大小，并且能夠幫助他們完成更高層次的觀點(diǎn)洞察。
去細(xì)節(jié)：行內(nèi)迷你圖尺寸有限，因此在圖表結(jié)構(gòu)上，除了傳遞數(shù)據(jù)規(guī)律的圖表實(shí)體本身，其它常規(guī)圖表擁有的諸如軸、圖例等標(biāo)簽將不再保留。
弱交互：行內(nèi)迷你圖最重要的作用是進(jìn)一步加速關(guān)鍵洞察信息的傳遞，我們不希望在設(shè)計(jì)上為行內(nèi)迷你圖賦予過多的交互，因?yàn)槟菢訒?huì)遇到“胖手指”難題。如果一定要為其添加交互，盡量將整個(gè)迷你圖實(shí)體作為交互熱區(qū)。
單一特征表達(dá)：行內(nèi)迷你圖更多的目的不在于為用戶提供精確的各個(gè)數(shù)據(jù)點(diǎn)位的信息，如此目的建議可以直接用常規(guī)尺寸的圖表去承載。其存在更多是為了表達(dá)某一關(guān)鍵的數(shù)據(jù)特征，如趨勢、占比，因此在設(shè)計(jì)上，我們應(yīng)專注傳遞單一特征的信息。
需要注意的是，行內(nèi)迷你圖的設(shè)計(jì)受限于界面尺寸的限制，因此在設(shè)計(jì)的時(shí)候，應(yīng)更加注重對關(guān)鍵信息的表達(dá)，而非所有信息的百分百精確表現(xiàn)。
在解讀文本可視化設(shè)計(jì)方面，我們提出下列三個(gè)原則：
目前，在行內(nèi)迷你圖方面，我們也處于起步階段，目前僅針對常用的迷你折、柱、餅進(jìn)行限定，可查閱下列規(guī)范表：
以下是迷你圖的使用場景舉例：
??2.3.3?觀點(diǎn)卡片
在上述兩節(jié)中，我們介紹了文本和迷你圖在洞察解讀當(dāng)中的設(shè)計(jì)要點(diǎn)和使用規(guī)范，但這二者都只是構(gòu)成洞察解讀的原子要素，如果要在產(chǎn)品中為用戶提供完整的洞察解讀服務(wù)，我們需要將二者合理的組織與承載起來，才能達(dá)到如此目的。
由于洞察觀點(diǎn)信息量的差異與媒體內(nèi)容的差異，通常我們以卡片容器去承載這樣的洞察觀點(diǎn)，以確保其良好的擴(kuò)展性及和當(dāng)前報(bào)表的兼容性，由此構(gòu)成的具象實(shí)體，我們稱之為「洞察觀點(diǎn)卡片」。
卡片擁有良好的擴(kuò)張性和場景適應(yīng)性，能非常好的匹配增強(qiáng)分析無處不再的使用特性。
可擴(kuò)展性：由于在實(shí)際的分析場景中，用戶同一時(shí)刻獲取到的洞察觀點(diǎn)可能不止一個(gè)，且觀點(diǎn)的內(nèi)部構(gòu)成結(jié)構(gòu)復(fù)雜多樣，因此卡片的規(guī)范定義方面需要考慮對不同觀點(diǎn)的接納和擴(kuò)展。
可兼容性：洞察觀點(diǎn)貫徹在分析過程中的每時(shí)每刻，這意味著觀點(diǎn)卡片需要去適應(yīng)不同的消費(fèi)場景，既不能喧賓奪主，搶奪用戶對原始報(bào)表的注意力，也能在某一時(shí)刻為用戶提供相對沉浸的閱讀觀點(diǎn)的氛圍，因此需要對卡片提供適當(dāng)?shù)牟町愋誀顟B(tài)，以保證其擴(kuò)展性。
在可擴(kuò)展性方面，我們提供了純文本觀點(diǎn)、圖文混排觀點(diǎn)，以及多圖觀點(diǎn)的方案。此外還提供了單觀點(diǎn)卡片和多觀點(diǎn)卡片兩種方案：
在兼容性方面，我們提供了適用于 4 大場景的 4 種卡片狀態(tài)，基本涵蓋了可視分析的各種應(yīng)用場景：
除了基本使用的限定，還有一些邊緣場景的規(guī)范限定，如空狀態(tài)等，就不再此贅述。
《樂見數(shù)據(jù)》
《Graphical Overlays: Using Layered Elements to Aid Chart Reading》
Vol.3?技術(shù)方案? ??
從為了使上述的設(shè)計(jì)規(guī)范能應(yīng)用到實(shí)際業(yè)務(wù)場景中，我們需要一套技術(shù)側(cè)的工具來保障實(shí)際業(yè)務(wù)中能靈活、準(zhǔn)確、高效地實(shí)現(xiàn)數(shù)據(jù)洞察的增強(qiáng)展現(xiàn)。對應(yīng)于設(shè)計(jì)規(guī)范，前端側(cè)也提供圖表增強(qiáng)表達(dá)和獨(dú)立觀點(diǎn)表達(dá)兩部分的解決方案。
規(guī)范性：在規(guī)范性方面，我們將提供一套基于圖形語法和自動(dòng)化洞察的解決方案，包含符合設(shè)計(jì)規(guī)范的圖表增強(qiáng)標(biāo)記（Mark）和用于獨(dú)立觀點(diǎn)表達(dá)的增強(qiáng)展現(xiàn)組件。這些組件將具有高度的可復(fù)用性、一致性和靈活性，以確保設(shè)計(jì)規(guī)范的正確應(yīng)用，并提高開發(fā)效率。
可擴(kuò)展性：為貼合不同產(chǎn)品用戶的使用習(xí)慣和日?？磾?shù)、分析的流程，業(yè)務(wù)中通常需要對設(shè)計(jì)規(guī)范進(jìn)行復(fù)合自己業(yè)務(wù)系統(tǒng)的定制和應(yīng)用。我們需要考慮如何支持用戶自定義的洞察展現(xiàn)。因此我們將提供一套靈活的插件機(jī)制，使用戶可以自由地?cái)U(kuò)展和定制展現(xiàn)組件，同時(shí)保證插件與設(shè)計(jì)規(guī)范的兼容性。
在工程實(shí)現(xiàn)中，主要考慮兩部分：
圖表組件的配置項(xiàng)沒有提供靈活的標(biāo)注配置，導(dǎo)致添加標(biāo)注需要通過 hack 的方式進(jìn)行
圖表上添加的標(biāo)注，常缺少添加 legend 、tooltip 等能力，導(dǎo)致標(biāo)注的表達(dá)力不夠強(qiáng)
標(biāo)注作為一等公民，可以獲得和圖表元素相同的交互能力和定制能力，對標(biāo)注進(jìn)行詳細(xì)的探索
對原圖表一鍵增強(qiáng)，能在原有圖表上靈活擴(kuò)展，不侵?jǐn)_原圖表功能，可插拔，方便組裝，針對不同業(yè)務(wù)需求靈活選用
? 3.1?圖表增強(qiáng)表達(dá)
圖表增強(qiáng)表達(dá)，指的是在原有可視化的基礎(chǔ)上，通過添加一系列不同的標(biāo)注，強(qiáng)調(diào)數(shù)據(jù)的趨勢、異常值和特征等洞察，從而達(dá)到「增強(qiáng)原圖表」的目的。
在圖表增強(qiáng)表達(dá)方面，設(shè)計(jì)規(guī)范中提供了打造視覺反差、輔助線、注解、參考區(qū)間、統(tǒng)計(jì)標(biāo)簽幾種手段和相應(yīng)規(guī)范。在工程實(shí)踐上，曾遇到這樣的一些問題：
為了解決這些問題，我們在技術(shù)上統(tǒng)一了幾何元素和標(biāo)注的設(shè)計(jì)和底層實(shí)現(xiàn)，統(tǒng)一表達(dá)為?Mark（標(biāo)記）。在圖表組件的封裝中，使用單獨(dú)的輔助圖層對標(biāo)注進(jìn)行繪制。這樣可以帶來下面這些好處：
? 3.1.1?典型問題與解決思路
本節(jié)主要介紹了圖表增強(qiáng)表達(dá)的技術(shù)方案期望解決的核心問題，以及對應(yīng)的解決思路。
圖表看不懂——提供增強(qiáng)標(biāo)注
左圖是一個(gè)常見的可視化圖表，從圖中我們能看出賬戶量呈現(xiàn)上升，但這個(gè)趨勢是否正常、是否需要介入處理，圖上沒有體現(xiàn)。而增加上安全閾值區(qū)間、均值線、告警點(diǎn)的標(biāo)注后，圖表信息一目了然，看圖表的人能夠據(jù)此做出下一步需要的行動(dòng)決策。
一個(gè)完整的數(shù)據(jù)洞察可視化，需要同時(shí)包含原始數(shù)據(jù)的信息、洞察信息、背景信息，在展示層可以分為圖表層和增強(qiáng)展現(xiàn)層。增強(qiáng)展現(xiàn)層中，參照 2.1 中的設(shè)計(jì)規(guī)范，結(jié)合實(shí)際業(yè)務(wù)中常見的分析意圖和對應(yīng)的洞察類型，可以歸納用于展現(xiàn)洞察信息點(diǎn)的常見標(biāo)注元素，形成一套可以和原始圖表層進(jìn)行插拔結(jié)合使用的標(biāo)注組件，從而在實(shí)踐中，靈活根據(jù)數(shù)據(jù)里的洞察信息，對圖表進(jìn)行增強(qiáng)表達(dá)，將數(shù)據(jù)中的洞察準(zhǔn)確、高效的傳達(dá)出來。
以下是我們在業(yè)務(wù)實(shí)踐中形成的一套洞察展示標(biāo)注元素，可供參考：
標(biāo)注添加成本高——圖形語法
使用傳統(tǒng)配置式可視化繪制流程，通常會(huì)先聲明圖表類型，調(diào)取相應(yīng)的圖表組件，因此繪制的內(nèi)容會(huì)受限于圖表的配置項(xiàng)。如果想要根據(jù)洞察數(shù)據(jù)在圖表上加上對應(yīng)的標(biāo)注，一方面需要圖表有配置項(xiàng)支持，另一方面需要開發(fā)者手動(dòng)處理洞察數(shù)據(jù)到圖表配置信息的轉(zhuǎn)換。
而在基于圖形語法的可視化繪制系統(tǒng)中，沒有圖表分類的概念，而是通過一系列視覺元素和可視化組件去描述任意的可視化。這里的視覺元素主要分為兩類：幾何元素（Geometry）和標(biāo)注（Annotation），其中幾何元素編碼原始數(shù)據(jù)，而標(biāo)注編碼由原始數(shù)據(jù)衍生得到的洞察信息，比如極值、最大值和趨勢等。
數(shù)據(jù)驅(qū)動(dòng)（Data Driven）：支持由表格數(shù)據(jù)驅(qū)動(dòng)，可以更容易地一次性繪制多個(gè)標(biāo)注。
轉(zhuǎn)換（Transform）：支持對綁定的維度數(shù)據(jù)進(jìn)行分組，然后應(yīng)用聚合、篩選和排序等轉(zhuǎn)換，使得標(biāo)注可以更輕松地編碼更豐富的衍生數(shù)據(jù)。
動(dòng)畫（Animation）：支持?jǐn)?shù)據(jù)驅(qū)動(dòng)的動(dòng)畫，可以在可視化敘事中強(qiáng)調(diào)洞察信息。
交互（Interaction）：支持響應(yīng)用戶的行為，可以和幾何元素一起展示提示信息（Tooltip）等。
因?yàn)樵紨?shù)據(jù)和衍生數(shù)據(jù)的地位不同，所以在之前的設(shè)計(jì)中，幾何元素的能力要強(qiáng)于標(biāo)注。這導(dǎo)致隨著數(shù)據(jù)模式復(fù)雜度和標(biāo)注豐富度的增加，圖表標(biāo)注的成本也隨之升高。為了解決這個(gè)問題，我們統(tǒng)一了幾何元素和標(biāo)注的設(shè)計(jì)和底層實(shí)現(xiàn)，把它們稱為標(biāo)記（Mark）。這使得標(biāo)注得到了如下的能力增強(qiáng)：
除了上訴能力以外，我們同時(shí)也提供了一種被稱為復(fù)合標(biāo)記（Composite Mark）的編程范式去復(fù)用邏輯和視覺展現(xiàn)。復(fù)合標(biāo)記不僅僅使得我們可以對已有的標(biāo)注添加新的特性，也可以將多個(gè)標(biāo)記組合成一個(gè)新的標(biāo)記。
? 3.1.2?實(shí)踐方案
AntV/G2可視化繪制庫提供了一套聲明式的圖形語法，可以支持基礎(chǔ)圖層和增強(qiáng)展現(xiàn)標(biāo)注信息的靈活組合和插拔。G2?結(jié)合?AntV/AVA的insight模塊的洞察數(shù)據(jù)及相應(yīng)增強(qiáng)標(biāo)注（Augmented Mark）的生成能力，可以方便地實(shí)現(xiàn)數(shù)據(jù)中洞察信息的增強(qiáng)展現(xiàn)，使圖表不僅呈現(xiàn)數(shù)據(jù)信息，更將其中值得關(guān)注的信息點(diǎn)清晰揭示出來。下面提供實(shí)際案例供參考。
圖表分層繪制
G2?提供了 Spec 和自定義 Mark，不再區(qū)分 annotation 和 geometry，所有的幾何元素都可以是 Mark，都是 “一等公民”。圖表 Mark 和增強(qiáng)展現(xiàn) Mark 能夠自由組合。Spec 結(jié)構(gòu)本身也便于存儲(chǔ)、流轉(zhuǎn)和復(fù)用。通過?insihgt?生成數(shù)據(jù)洞察和文本解讀，組合成下面這種結(jié)構(gòu)。
我們可以快速繪制出一張帶有異動(dòng)信息的增強(qiáng)折線圖。
除了靈活自定義組合增強(qiáng)標(biāo)注元素和圖表的方式，我們對常見的洞察類型及其適合的可視化展現(xiàn)形式進(jìn)行了歸納和總結(jié)，通過調(diào)用?ava中的?getInsights方法，即可完成從數(shù)據(jù)到自動(dòng)生成的洞察結(jié)論。
目前支持的洞察類型以及每種洞察類型對應(yīng)的默認(rèn)可視化展示如下：
通過使用可視化映射原理對數(shù)據(jù)元素做標(biāo)記，幫助用戶快速識別關(guān)鍵信息，比如字體顏色、背景色、字體粗細(xì)、下劃線等，該能力基于 CSS 實(shí)現(xiàn)；
通過過增加行內(nèi)小圖，在感性層面提高用戶對數(shù)據(jù)的感知。通常行內(nèi)小圖數(shù)據(jù)量不大，可以直接基于 svg 繪圖；
圖文聯(lián)動(dòng)的交互技術(shù)有利于幫助用戶對照圖文理解洞察事實(shí)，且交互也是可視化中重要的一項(xiàng)能力。要想實(shí)現(xiàn)聯(lián)動(dòng)交互需要讓每個(gè)文本短語都可以溯源到源數(shù)據(jù)信息，即 metadata；
? 3.2?獨(dú)立觀點(diǎn)表達(dá)
獨(dú)立觀點(diǎn)表達(dá)，指的是由系統(tǒng)智能給出的或用戶輸入的洞察觀點(diǎn)，以一種獨(dú)立于圖表的呈現(xiàn)形態(tài)給出。由于洞察觀點(diǎn)可多可少，可圖可文，通常我們以卡片容器去承載這樣的洞察觀點(diǎn)，以確保其良好的擴(kuò)展性，由此構(gòu)成的具象實(shí)體，我們稱之為「洞察觀點(diǎn)卡片」?；讵?dú)立觀點(diǎn)的概念，我們設(shè)計(jì)并實(shí)現(xiàn)了一套技術(shù)方案可應(yīng)用于展示數(shù)據(jù)描述文本，并且提供擴(kuò)展性構(gòu)成「洞察卡片」這一具象實(shí)體。本文從特點(diǎn)分析入手提出解決思路，并結(jié)合代碼案例介紹了該技術(shù)的實(shí)踐。
在獨(dú)立觀點(diǎn)表達(dá)方面，設(shè)計(jì)規(guī)范中提供三種方法：1、解讀文本可視化；2、行內(nèi)迷你可視化；3、洞察觀點(diǎn)卡片。底層技術(shù)方面，類似于圖表中的圖形語法（G2 Spec)，解讀文本可視化也相應(yīng)使用一套 Narrative Visualization Schema (Ntv Spec) 來表達(dá)和存儲(chǔ)數(shù)據(jù)解讀。在工程側(cè)，提供數(shù)據(jù)解讀組件來支持解讀文本可視化、行內(nèi)迷你可視化，提供洞察觀點(diǎn)卡片組件來支持觀點(diǎn)的開箱即用。
除此之外，我們還會(huì)引入一些統(tǒng)計(jì)分析和自然語言生成技術(shù)，以提升數(shù)據(jù)分析和展現(xiàn)的智能化程度。例如，我們會(huì)通過機(jī)器學(xué)習(xí)算法來分析數(shù)據(jù)的特征和趨勢，并根據(jù)這些分析結(jié)果自動(dòng)選擇最佳的數(shù)據(jù)展現(xiàn)方式；我們也會(huì)利用自然語言生成技術(shù)來自動(dòng)生成數(shù)據(jù)分析解讀，方便用戶快速了解數(shù)據(jù)的含義和趨勢。
這些技術(shù)不僅可以實(shí)現(xiàn)高效的洞察展現(xiàn)和交互，還可以提高系統(tǒng)的可擴(kuò)展性和可定制性，從而為在多樣化的業(yè)務(wù)系統(tǒng)中實(shí)現(xiàn)靈活、準(zhǔn)確、高效的洞察表達(dá)奠定了堅(jiān)實(shí)的基礎(chǔ)。
? 3.2.1?典型問題與解決思路
本節(jié)介紹獨(dú)立觀點(diǎn)表達(dá)不同于傳統(tǒng)可視化圖表展示的特征，并總結(jié)了對應(yīng)的解決思路。
信息密度大——基于可視化映射理論提高可讀性
使用文字表達(dá)觀點(diǎn)時(shí)，單位面積內(nèi)的可描述的數(shù)據(jù)信息更多，通常一段文字可能是 4-5 張可視化圖表的內(nèi)容，可帶入可視化圖表不具有的上下文信息。對應(yīng)設(shè)計(jì)規(guī)范的解決思路包括：
以下是對照設(shè)計(jì)規(guī)范實(shí)現(xiàn)的數(shù)據(jù)文本短語一覽，也是該技術(shù)最具特色的內(nèi)容。
隨著數(shù)據(jù)分析平民化以及 NLP 技術(shù)的成熟，越來越多的洞察結(jié)論將由機(jī)器自動(dòng)生成。洞察結(jié)論文本的自動(dòng)化乃至智能化生成的基礎(chǔ)是數(shù)據(jù)結(jié)構(gòu)的標(biāo)準(zhǔn)化，做好領(lǐng)域標(biāo)準(zhǔn)結(jié)構(gòu)定義將促進(jìn)技術(shù)合力積累與發(fā)展。
標(biāo)準(zhǔn)化定義是智能可視化中重要的概念，參考 AI4VIS[1]?的相關(guān)研究?Visualizations themselves have become a data format.可視化本身已經(jīng)成為一種數(shù)據(jù)格式，類似于文本和圖像等其他數(shù)據(jù)格式，可視化越來越多地通過人工智能 (AI) 技術(shù)創(chuàng)建、存儲(chǔ)、共享和（重新）使用。只有用 json 結(jié)構(gòu)描述，將信息靜態(tài)化之后，才可以被計(jì)算機(jī)作為一種數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換與消費(fèi)。自動(dòng)化的前提是標(biāo)準(zhǔn)化，做到標(biāo)準(zhǔn)化結(jié)構(gòu)定義才可以讓系統(tǒng)做自動(dòng)化生成，更是為了未來智能化生成奠定基礎(chǔ)。
我們定義了一套解讀文本的標(biāo)準(zhǔn)化表述 schema（即?ntv-schema），結(jié)構(gòu)表示如下圖。
從看數(shù)到分析，不管在探索分析應(yīng)用還是交互式分析報(bào)表中，都需要基于分析結(jié)果展示進(jìn)行二次分析做相關(guān)交互如篩選、下鉆、上卷等，而文本作為分析結(jié)果重要的形式也是需要交互輔助分析能力的。
要想實(shí)現(xiàn)該能力，需要兩個(gè)基礎(chǔ)，一個(gè)是前面提到過的“數(shù)據(jù)綁定”，還有一個(gè)是自定義擴(kuò)展。解讀文本是含有數(shù)據(jù)綁定信息的，特別是短語作為數(shù)據(jù)元信息綁定的基礎(chǔ)單元可以作為分析交互等觸發(fā)控件，如基于日期描述做日期切換、基于拆分維度做維值切換等，可以通過自定義擴(kuò)展實(shí)現(xiàn)。
參考當(dāng)前主流的富文本編輯器架構(gòu)，基于插件系統(tǒng)的技術(shù)方案可以插入任意元素。
? 3.2.2?實(shí)踐方案
數(shù)據(jù)解讀文本的展示模塊 AVA/NTV，用于提升文本的閱讀和交互體驗(yàn)。NTV 的名字來源于 Narrative（敘述性）+ Text（文本）+ Vis（可視化），即用文本敘述數(shù)據(jù)事實(shí)的可視化方案。
從?@antv/ava-react?引入?<NarrativeTextVis />?這一 react 組件，傳入符合 ntv-schema 定義的 JSON Spec ，即可得到符合設(shè)計(jì)規(guī)范的獨(dú)立觀點(diǎn)表達(dá)展示。
以文字為主的觀點(diǎn)描述
以如下結(jié)構(gòu)為例，即可獲得一段文字描述為主的觀點(diǎn)表述。
從?@antv/ava-react?引入?<InsightCard />?這一 react 組件，傳入洞察數(shù)據(jù)，即可得到圖文并茂的觀點(diǎn)卡片。
支持的洞察數(shù)據(jù) (insightInfo) 示例類型如下圖所示:
Wu, A., Wang, Y., Shu, X., Moritz, D., Cui, W., Zhang, H., Zhang, D. and Qu, H., 2021. Ai4vis: Survey on artificial intelligence approaches for data visualization.?IEEE Transactions on Visualization and Computer Graphics.
分析環(huán)節(jié): 看數(shù)、分析、產(chǎn)生洞見、執(zhí)行決策
四大數(shù)據(jù)應(yīng)用場景：
數(shù)據(jù)點(diǎn)洞察：分析和解釋數(shù)據(jù)現(xiàn)象
圖表級洞察：補(bǔ)充信息，看懂圖表
報(bào)表級洞察：輔助監(jiān)控?cái)?shù)據(jù)大盤
洞察報(bào)告：匯報(bào)數(shù)據(jù)結(jié)論，支撐行動(dòng)決策
Vol.4?應(yīng)用案例????
洞察的增強(qiáng)表達(dá)可以輔助發(fā)現(xiàn)業(yè)務(wù)中值得關(guān)注的數(shù)據(jù)現(xiàn)象，分析數(shù)據(jù)背后的原因，并提供有效的上下文信息，為消費(fèi)者提供決策輔助信息。這章將使用案例說明洞察的增強(qiáng)表達(dá)如何在業(yè)務(wù)中常見的分析環(huán)節(jié)和四大數(shù)據(jù)應(yīng)用場景中發(fā)揮作用，讓圖表講述故事、讓決策用數(shù)據(jù)說話。
以下將用實(shí)際生產(chǎn)中使用的案例詳述洞察展現(xiàn)在四大數(shù)據(jù)應(yīng)用場景中，如何為人們看數(shù)、分析、洞見、執(zhí)行各環(huán)節(jié)服務(wù)的。
? 4.1?數(shù)據(jù)點(diǎn)洞察:分析和解釋數(shù)據(jù)現(xiàn)象
通過將圖表的增強(qiáng)表達(dá)和解讀融入進(jìn)用戶的分析工作流中，可以為用戶發(fā)現(xiàn)數(shù)據(jù)現(xiàn)象、探索數(shù)據(jù)點(diǎn)背后的原因、分享和消費(fèi)分析結(jié)論提供有力幫助。
? 4.2?圖表級洞察:補(bǔ)充信息，看懂圖表
“一圖勝千言”的背后，也可能會(huì)出現(xiàn)“可視化的欺騙”，而標(biāo)注和解讀可幫助消除對結(jié)果的理解偏差。同時(shí)，標(biāo)注和對圖表的深度解讀，能補(bǔ)充數(shù)據(jù)上下文信息，結(jié)合智能分析算法，可以揭示數(shù)據(jù)現(xiàn)象背后的原因，減少盯盤和周期性分析任務(wù)的人力成本。
? 4.3?報(bào)表級洞察:輔助監(jiān)控?cái)?shù)據(jù)大盤
報(bào)表是圖表和分析任務(wù)的組合，解讀和標(biāo)注扮演“課代表”的角色，揭示一系列分析任務(wù)的關(guān)鍵指標(biāo)和分析結(jié)論，提高報(bào)表信息傳達(dá)的效率和準(zhǔn)確性。
? 4.4?洞察報(bào)告:匯報(bào)數(shù)據(jù)結(jié)論，支撐行動(dòng)決策
洞察報(bào)告實(shí)質(zhì)上是一種溝通與交流數(shù)據(jù)的形式，輸出分析過程的成果和結(jié)論，將可行性建議以及其他價(jià)值信息傳遞給行動(dòng)和決策人員，讓閱讀者能對結(jié)果做出正確的理解與判斷，并可以根據(jù)其做出有針對性、操作性、戰(zhàn)略性的決策。
編委會(huì)成員
梓義，白弦，羽熙，鐘慧，萬木，珂甫，阿胥，完白，彼樓
主編
步茗，羽然（執(zhí)行主編）
特別顧問
御術(shù)
編委單位
螞蟻集團(tuán)（平臺(tái)體驗(yàn)技術(shù)部，支付寶設(shè)計(jì)部，數(shù)據(jù)產(chǎn)品與技術(shù)部）
編委會(huì)
AntV 數(shù)據(jù)可視化官網(wǎng)
https://antv.antgroup.com/
AntV 數(shù)據(jù)可視化?GitHub
https://github.com/antvis
??關(guān)注我們，了解更多~
