散文網(wǎng) » 科技 »學(xué)習(xí) » 面向分析的下一代可視化工程

面向分析的下一代可視化工程

2023-03-24 16:27 作者:支付寶體驗(yàn)科技 0人讀過 | 我要投稿

AntV 是由螞蟻集團(tuán)產(chǎn)出的開源企業(yè)級數(shù)據(jù)可視化解決方案，在企業(yè)內(nèi)部和社區(qū)有大量應(yīng)用實(shí)踐積累。本文將基于這些實(shí)踐經(jīng)驗(yàn)和領(lǐng)域研究，結(jié)合 AntV/G2 5.0 和 AntV/AVA 3.0 在升級過程中的更新，向大家分享相關(guān)思考。我們總結(jié)了分析需求對可視化工程提出的三點(diǎn)挑戰(zhàn)，用一個具體工程案例來展示可視化工程升級前后的對比。我們總結(jié)了可視化應(yīng)該基于聲明式語法的原因，并且提出了三個可視化工程發(fā)展上要考慮的趨勢：將可視化本身視為一種數(shù)據(jù)、更重視分析交流的便捷度、走向更深度的自動化。

對可視化工程提出更高要求

以前的 BI 工具和圖表主要的目的是展示數(shù)據(jù)，在分析類需求日益增長后，業(yè)務(wù)場景中越來越重視圖表之上的分析能力。因此，許多原先的可視化基礎(chǔ)設(shè)施不能滿足更高的要求，在工程上產(chǎn)生了許多問題。

第一，分析需求帶來了技術(shù)分層增多，導(dǎo)致了多層封裝降低靈活度的問題。由于基礎(chǔ)圖表庫大多只能提供最通用的能力和展示形態(tài)，許多產(chǎn)品的技術(shù)設(shè)計中會約束需求從而定制圖表組件。在定制圖表組件之上，還需要以各種交互、tooltip 等形式提供進(jìn)一步的分析功能。有些大型業(yè)務(wù)中還需要拆分為通用分析功能和業(yè)務(wù)特定的功能兩層。這種層層封裝帶來的開發(fā)復(fù)雜和復(fù)用困難的問題。而在一些專門從事商業(yè)智能、數(shù)據(jù)分析領(lǐng)域的大型應(yīng)用中，還可能出現(xiàn)圖表組件本身的層層堆砌。

第二，分析需求帶來了更多圖形元素，在圖表上添加特性變得更加繁瑣。原本只需要展示數(shù)據(jù)客觀狀態(tài)的圖表通常都是結(jié)構(gòu)比較清晰簡單的。但是，如果要展示更多分析性的內(nèi)容，則要考慮各種“特例”，比如局部高亮、憑空添加趨勢線、指向特定數(shù)據(jù)位置的箭頭和文本，等等。這些圖形元素通常具有不規(guī)則性，他們的開發(fā)比較定制、難度也更大。同時，這些元素的出現(xiàn)條件和布局方式也需要更多考量。

第三，分析需求帶來了分析結(jié)論，在可視化上需要合理展示這些洞察結(jié)果。不同的洞察類型應(yīng)該使用什么樣的設(shè)計標(biāo)準(zhǔn)來進(jìn)行傳達(dá)？是否需要合理的文本解讀來輔助洞察的理解？圖文結(jié)合的形式、交互的形式應(yīng)該如何選擇？這些都不是簡單的問題。

一個具體的工程案例

在公司內(nèi)部，我們基于 AntV/G2 棧構(gòu)建了業(yè)務(wù)圖表資產(chǎn)庫。通過圖表資產(chǎn)庫向上服務(wù)螞蟻眾多的數(shù)據(jù)分析業(yè)務(wù)場景。假如你是一名前端工程師，接了個“小”需求，要在圖表資產(chǎn)庫中做出一張下面這樣的圖表。完成它，需要哪些步驟，需要多長時間呢？可能有同學(xué)會疑惑，這不就是個折線圖嗎，有什么難點(diǎn)呢？其實(shí)，它不是普通的折線圖，而是帶有異動信息的增強(qiáng)展現(xiàn)圖表。仔細(xì)看，可以發(fā)現(xiàn)，它除了折線圖本身的樣子外，還帶有波動區(qū)間、基線和指標(biāo)異常值等額外信息。

基于原先的可視化工程，有兩種方案可以實(shí)現(xiàn)這個圖表：

基于圖表標(biāo)注 annotation，使用組件庫的標(biāo)注能力 API 在原折線圖組件上疊加增強(qiáng)展現(xiàn)信息。
繪制多圖層圖表，將折線圖、面積圖兩個圖表作圖層疊加。使用折線圖繪制實(shí)際值、基線和異常點(diǎn)，使用面積圖繪制波動區(qū)間。

方案一能在原有折線圖上直接迭代，開發(fā)者只需要關(guān)注 annotation，不需要過多關(guān)心折線圖本身的邏輯，更不會碰傷折線圖現(xiàn)有能力。但在 G2 4.x 中 annotation 是“二等公民”，無法自由綁定數(shù)據(jù)、繪制自定義圖形、生成 Legend 和 Tooltip 組件，更無法和圖表本身進(jìn)行聯(lián)動，圖表的功能擴(kuò)展性會變差。

而方案二中的多圖層圖表需要替換原圖表組件，改動量較大，很可能碰傷存量圖表。如果可視化圖表和增強(qiáng)展現(xiàn)的開發(fā)涉及到多團(tuán)隊合作，這個問題會變得更加復(fù)雜。雙方將不可避免地需要在對方的倉庫中如履薄冰地修改代碼。我們期望有種方式，集合方案一二的好處，無需擔(dān)憂它們的缺點(diǎn)。

G5 5.0 底層基于 Spec（圖表的聲明式描述），還提供了自定義 Mark（圖形符號）。不再區(qū)分 annotation（圖形標(biāo)注）和 geometry（幾何元素），所有的幾何元素都可以是 Mark，都是 “一等公民”。從此，多圖層疊加變得更靈活，展示能力變得更強(qiáng)大，圖表 Mark 和增強(qiáng)展現(xiàn) Mark 能夠自由組合。Spec 結(jié)構(gòu)本身也便于存儲、流轉(zhuǎn)和復(fù)用。

基于 G2 5.0 和 AVA 3.0，螞蟻內(nèi)部的數(shù)據(jù)分析業(yè)務(wù)和技術(shù)架構(gòu)得以升級，能夠在原圖表組件之上自由疊加內(nèi)容，且疊加的內(nèi)容和其他幾何元素 geometry 是同等地位的?？梢暬瘓D表和增強(qiáng)展現(xiàn)內(nèi)容可以分層設(shè)計與開發(fā)，研發(fā)時間和合作摩擦將大大降低。增強(qiáng)展現(xiàn)內(nèi)容可以抽為組件，各處復(fù)用。

現(xiàn)在，只需要將 AVA 可視化數(shù)據(jù)洞察里生成的 Spec 放入 G2。異動折線圖就會躍然于眼前。借助 AVA ，還可以為圖表添加直觀的文本解讀。

基于聲明式語法的可視化

為了分析過程的靈活性和分析結(jié)果的易于傳達(dá)，可視化工具底層的范式應(yīng)該向聲明式發(fā)展。這種底層架構(gòu)的選擇是十分重要的，是令其他設(shè)計考量具有可行性的基礎(chǔ)。

命令式（imperative）和聲明式（declarative）是兩種相對的編程范式。在命令式編程中，開發(fā)者需要指定如何執(zhí)行任務(wù)，更面向過程“怎么做（How）”。相比之下，聲明式編程則讓開發(fā)者只需要描述想完成的結(jié)果“是什么樣（What）”。對于可視化而言，本身就是為了“展示”和“分析”。在展示上，通常我們更關(guān)心的是結(jié)果的樣子，因此聲明式的語法更加適合。在分析上，聲明式語法可以讓我們更專注于數(shù)據(jù)本身，而不用關(guān)注太多代碼的實(shí)現(xiàn)細(xì)節(jié)，提高數(shù)據(jù)分析效率。

不僅如此，聲明式編程范式本身還有很多優(yōu)勢。由于簡化了過程描述，聲明式語法更加簡潔和易于理解，這就降低了學(xué)習(xí)成本；不必通過反復(fù)的過程描述就可以創(chuàng)建復(fù)雜的效果，提高了開發(fā)效率；描述同樣的局部結(jié)果可以使用同樣的聲明片段，可復(fù)用性更強(qiáng)；聲明式的靜態(tài)結(jié)構(gòu)本身可以當(dāng)做一種數(shù)據(jù)形式，有利于存儲、跨平臺傳輸和轉(zhuǎn)換格式。

近十幾年來，無論在業(yè)界還是學(xué)界，可視化工具的發(fā)展趨勢中一直可以看到聲明式語法的影響力。比如 ECharts 一類的圖表庫雖然不能說是聲明式的，但其中以 JS 對象或 JSON 結(jié)構(gòu)進(jìn)行圖表配置的“配置式”方式也屬于一種聲明式能力。再到 Vega 和 Vega-Lite 聲明式語法的發(fā)展，已經(jīng)形成了巨大的影響力。

因此，當(dāng)我們現(xiàn)在來討論下一代可視化工具的時候，不得不將“支持聲明式語法”作為一個重要的考量。以一個圖表庫來說，也許可以不完全是一種聲明式形態(tài)，但至少其底層應(yīng)該支持聲明式的規(guī)范表達(dá)（Specification）。

以 G2 v5 設(shè)計為例，雖然仍然提供命令式的鏈?zhǔn)秸Z法 API，但底層都對應(yīng)一套聲明式的 Specification 表達(dá)。而 AVA 作為智能可視分析框架，其圖表推薦的產(chǎn)出也直接是聲明式表達(dá)而不是某種具象的圖形形式。

Heer, J. and Bostock, M., 2010. Declarative language design for interactive visualization. IEEE Transactions on Visualization and Computer Graphics, 16(6), pp.1149-1156.
Li, D., Mei, H., Shen, Y., Su, S., Zhang, W., Wang, J., Zu, M. and Chen, W., 2018. ECharts: a declarative framework for rapid construction of web-based visualization. Visual Informatics, 2(2), pp.136-146.
Satyanarayan, A., Moritz, D., Wongsuphasawat, K. and Heer, J., 2016. Vega-lite: A grammar of interactive graphics. IEEE transactions on visualization and computer graphics, 23(1), pp.341-350.

將可視化作為一種數(shù)據(jù)

可視化作為一種承載分析結(jié)果的載體，其本身應(yīng)該要支持被轉(zhuǎn)換、被查詢等數(shù)據(jù)向的能力，新的可視化工程和工具應(yīng)該要將支持這類能力。今天，各行各業(yè)對數(shù)據(jù)的重視程度越來越高，對數(shù)據(jù)的利用率也越來越高?？梢暬鳛閿?shù)據(jù)展示和傳播的最主要渠道已經(jīng)非常普及。無論是承載可視化內(nèi)容的圖片還是可交互的可視化媒體，在網(wǎng)絡(luò)和社會中的數(shù)量都在飛速增長。不論是圖片還是代碼的形式，這些用來展示和解釋數(shù)據(jù)的可視化，本身也成為了一種數(shù)據(jù)。

在 AI4VIS 這篇綜述論文中，通過把可視化本身看做數(shù)據(jù)這一種視角，借鑒數(shù)據(jù)庫的理論，將近年來數(shù)據(jù)可視化領(lǐng)域中的大量工作進(jìn)行了分類總結(jié)。比如可視化的轉(zhuǎn)換（Transformation）、評估（Assessment）、比較（Comparison）、查詢（Querying）、推理（Reasoning）、推薦（Recommendation）、挖掘（Mining）?；谶@種精彩的類比，我們得以看到圖表的更多潛在的應(yīng)用方向。

以格式轉(zhuǎn)換（Transformation）為例，通常我們可以很容易地通過圖表庫將代碼轉(zhuǎn)換成可視化圖表，但是將網(wǎng)頁上的可交互圖表或靜態(tài)圖片轉(zhuǎn)化成代碼或聲明式 Specification 的逆向工程則通常很難。雖然現(xiàn)在的圖像識別技術(shù)日新月異，但如果圖片分辨率不夠高或者未標(biāo)出一些具體的數(shù)字文本，要精確解析圖表背后的明細(xì)數(shù)據(jù)幾乎是不可能的。但是，由于圖片本身仍然是傳遞信息（數(shù)據(jù)和洞察）的最主要形式之一，這個問題需要有方案解決。一種可能的解決方案是類似于 VisCode 的方法，將數(shù)據(jù)或者圖表的聲明式代碼通過“暗水印”的方式編碼在圖片中，然后圖片經(jīng)過解碼可以還原“復(fù)活”。

AntV 提供的數(shù)據(jù)暗水印工具，可以將圖表信息編碼在圖片上， Demo 地址：https://antv.vision/vis-steg/?

再以查詢（querying）為例，想象一個含有大量可視化內(nèi)容的公司 BI 系統(tǒng)，要從中搜索出一張圖表來，并不比從我們的手機(jī)相冊里憑印象找出一張曾經(jīng)隨手拍攝的照片容易。除了從日期、部門、報表類別等路徑一層層去找，更好的方式應(yīng)該是擁有一套可視化搜索系統(tǒng)。如果每個可視化實(shí)例背后都有其詳細(xì)的信息，這樣的查詢系統(tǒng)就是可以建立的。不過，只包含圖表本身的聲明式代碼可能不夠，還可以包含和分析相關(guān)的更多信息。

比如，在一個分析系統(tǒng)中，一個可視化實(shí)例背后至少應(yīng)該包含以下三種結(jié)構(gòu)：

數(shù)據(jù)模型：數(shù)據(jù)的查詢條件、來源、數(shù)據(jù)本身，等；
展示形式：圖表的類型、聲明式結(jié)構(gòu)、標(biāo)注樣式，等；
洞察信息：想表達(dá)的分析洞見、洞察類型、解釋性的文本，等。

基于轉(zhuǎn)換和查詢的例子，我們可以想象其余幾種應(yīng)用類型。比如通過對可視化數(shù)據(jù)庫的推理和挖掘來獲得大量額外信息、比如通過對圖表相似性的比較來生成和推薦圖表，等等。

通過圖表間的計算，在 AR 環(huán)境中實(shí)現(xiàn)自動的類似圖表“加法”的效果

基于這種圖表即數(shù)據(jù)的定義，還讓圖表本身變得可以計算，比如圖表間的交、并、差等邏輯運(yùn)算，以此可以引發(fā)出很多應(yīng)用形態(tài)。在 ComputableViz 這篇論文中，作者展示了圖表計算的多種應(yīng)用場景。比如可以將兩張柱狀圖相加變成一張堆疊柱狀圖。

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.
Zhang, P., Li, C. and Wang, C., 2020. Viscode: Embedding information in visualization images using encoder-decoder network.?IEEE Transactions on Visualization and Computer Graphics,?27(2), pp.326-336.
Wu, A., Tong, W., Li, H., Moritz, D., Wang, Y. and Qu, H., 2022, April. Computableviz: Mathematical operators as a formalism for visualisation processing and analysis. In?Proceedings of the 2022 CHI Conference on Human Factors in Computing Systems?(pp. 1-15).

更重視分析交流的便捷度

數(shù)據(jù)分析的過程也是高頻高密度的綜合處理信息的過程，面向分析的可視化工具應(yīng)該對信息的處理和交流有更友好的支持。這種更高的友好度包含：對人更友好、對機(jī)器更友好、對以上任意兩者間的協(xié)同更友好。

從對人更友好的角度出發(fā)，可視化產(chǎn)品應(yīng)該有靈活的探索分析交互能力、美觀而準(zhǔn)確的展示標(biāo)準(zhǔn)、對分析結(jié)果具有充分的解釋力。比如對于圖表庫來說，交互靈活度的提升、動畫能力的提升、數(shù)據(jù)標(biāo)注能力的提升、更豐富的圖表類型，都是要努力的方向。再比如對于分析流程而言，從交互發(fā)起分析、更合理的標(biāo)注規(guī)范、分析結(jié)論和洞察的可解釋、分析結(jié)果的靈活導(dǎo)出等，都是可以發(fā)力的方向。

比如 G2 從 v4 向 v5 升級的過程中，針對分析類的圖表使用場景，在動畫、標(biāo)注、風(fēng)格、圖表類型靈活度等方面進(jìn)行了專門的優(yōu)化。

對于分析過程中的設(shè)計規(guī)范和技術(shù)方案，我們總結(jié)了一份《增強(qiáng)分析白皮書——洞察展現(xiàn)篇》，分享給大家~

從對機(jī)器更友好的角度出發(fā)，可視化工程應(yīng)該能對各種 API 和跨平臺傳輸有更好的兼容性。隨著人工智能和大數(shù)據(jù)浪潮的一次次升級，數(shù)據(jù)分析背后的計算和模型能力都在不斷增強(qiáng)。面向分析的可視化工程應(yīng)該讓機(jī)器可以更好地處理和解釋可視化信息。一方面通過聲明式存儲可以便于做到這一點(diǎn)，另一方面也可以考慮提供更“接口友好（API Friendly）”的設(shè)計以極大利用后端計算能力。

從協(xié)同角度來看，以標(biāo)準(zhǔn)化結(jié)構(gòu)存儲的可視化信息已經(jīng)能夠做到在“機(jī)器”間方便地流轉(zhuǎn)和擴(kuò)展。我們還需要考慮一些用戶協(xié)作上的問題。隨著分析平臺的普及，越來越多分析師、業(yè)務(wù)人員、開發(fā)者參與到分析工作中來。舉個例子，同一份報表、同一個圖表、同一份洞察信息，都可能由多人參與編輯，甚至是實(shí)時協(xié)同編輯。在產(chǎn)品能力方面，我們需要考慮支持用戶對于可視化的協(xié)同交互。在可視化工程能力方面，上述提到的多種基于聲明式的衍生能力可以幫到我們。比如，當(dāng)圖表本身通過 Specification 描述，我們可以更好地對圖表的編輯做版本控制。甚至，當(dāng)圖表間支持了諸如差（Difference）的計算能力后，系統(tǒng)可以自動對來自不同用戶和不同分支的圖表版本進(jìn)行自動沖突識別和自動合并。

有意思的是，甚至一些“人去理解機(jī)器”的過程也可以變得簡單。比如當(dāng)一個圖表的圖片其實(shí)是根據(jù)聲明式結(jié)構(gòu)形成的，人們在閱讀其代碼或者 URL 時都獲得了更大的可解釋性和編輯的便捷性。

Apache ECharts. (n.d.). Bar chart with data color [Example]. Retrieved October20,2021, from https://echarts.apache.org/examples/zh/editor.html?c=bar-data-color
QuickChart. (n.d.). QuickChart: Open Source Chart Image API. Retrieved March 20, 2023, fromhttps://quickchart.io/

走向更深度的自動化

為了讓用戶能更專心于數(shù)據(jù)分析本身，分析產(chǎn)品應(yīng)該盡可能提高自動化水平，不讓繁瑣的配置流程打斷分析者的心流。一方面，可以利用自動化簡化分析環(huán)節(jié)，比如自動推薦圖表、自動配置、自動布局、自動設(shè)置特定分析方法的流程，等等。另一方面，應(yīng)該盡可能提供智能分析能力，主動為用戶提供他未曾發(fā)現(xiàn)的信息。

關(guān)于自動圖表推薦，已經(jīng)有許多研究和實(shí)踐。無論是基于簡單決策樹的思路，基于約束系統(tǒng)的推薦思路，還是基于模型的推薦，在分析產(chǎn)品的工程中大多是為了解決選擇常用圖表類型和自動配置映射關(guān)系的問題。這是未來的數(shù)據(jù)分析類應(yīng)用所必須解決的問題。比如，一個著重于分析過程的自助分析系統(tǒng)，用戶每次選擇出的數(shù)據(jù)子空間是不同的、臨時的，不可能每次都展示一個表格或者每次都需要用戶配置圖表，必須具備自動繪制圖表的能力。

AVA 提供了前端側(cè)的圖表推薦能力，可以基于所選數(shù)據(jù)自動推薦圖表類型。

關(guān)于智能分析能力，也有很多業(yè)界產(chǎn)品在不斷探索。比如在基于數(shù)據(jù)自動挖掘出一些智能洞察并對用戶進(jìn)行提示、播報、告警。比如將某些標(biāo)準(zhǔn)的分析方法配置為自動化算子，讓用戶通過簡單交互就能完成一整套分析流程。

增強(qiáng)分析應(yīng)用中的一些智能分析場景和資產(chǎn)規(guī)范

最后暢想一下，在大模型時代，無論是圖表推薦、洞察挖掘、洞察解釋、分析問答等，都可以通過更高效的形式為業(yè)務(wù)和用戶帶來價值。

AntV 一直堅持探索最先進(jìn)的可視化理論，并應(yīng)用到實(shí)際工程和業(yè)務(wù)中去?；诒疚牡乃伎?，G2 和 AVA 將不斷優(yōu)化，為未來各行各業(yè)的數(shù)據(jù)分析助力。今天 G2 5.0 和 AVA 3.0 已正式發(fā)布，歡迎嘗鮮，更歡迎意見、建議和貢獻(xiàn)！

最美情侣中文字幕电影,在线麻豆精品传媒,在线网站高清黄,久久黄色视频