作者 | 言顧
有了LADV今後人人都能做可視化專家了！
先來看看LADV的效果：
以上例子中，生成的可視化圖表，均可以在DataV的環境下做進一步的樣式調優和資料接入，最終釋出為一個實時資料驅動展示的頁面。
1.LADV解決了什麼問題？
簡單來說，就是大幅降低資料可視化的設計成本。讓使用者在制作資料可視化應用時，可以将更多的精力投放在前期需求梳理、名額設計，和後期的資料探索、可視分析這些關鍵環節上。
縱觀資料可視化這個垂直領域，包括DataV在内的很多團隊都在嘗試降低可視化的實作的工程成本（如下圖1, 2）。然而除了工程成本本身，資料可視化的設計效率極大的影響了資料挖掘效率。
工業界可視化先驅如Tableau, Power BI等提出的解決方案是為使用者提供不同的模版。但模版不可能完全貼合實際使用場景下的需求，很多使用者在使用過程中，隻能向可視化設計的高門檻以及冗長的制作時間妥協，選擇近似的模版來解決。如何讓各種背景的使用者真正制作自己中意的資料可視化一直是一個難題。而DataV團隊研發的LADV——一個基于深度學習的可視化生成系統，通過機器學習可視化案例的風格而生成資料可視化(如下圖3)，恰恰就是為了解決這個問題而生的。
2.颠覆可視化設計和搭建流程
2.1 傳統流程
資料可視化設計需要多方配合，就DataV舉例如下圖傳統流程，有産品和分析同學進行需求調研，而設計同學會根據所需圖表進行高保真設計, 最後會交由前端同學進行還原。這樣的流程由于需要多方協同，導緻效率變慢。更重要的是，這樣的流程緻使很多沒有設計能力的使用者缺少建立屬于自己可視化的能力。
2.2 LADV優化流程
通過LADV，我們設計了一種新的可視化建立流程。如上圖所示，LADV極大減少了傳統的設計流程，新的流程支援通過圖檔進行原型設計及前端還原，并支援後續的設計微調。
3.技術方案
3.1.1 圖表識别模型技術
深度學習技術在近些年來得到飛速發展，在不同領域都取得優異的成績。包括在資料圖表分類領域也取得了很大的進展，如學術界的Revision, ChartSense 等。但大多數的模型僅僅能夠進行圖檔分類，而非物體識别（換句話說，不僅進行圖檔分類，同時識别該類型圖檔所在的位置）。
現有的方案中最優的也隻是能夠通過OCR技術識别文字的位置及内容（如下圖），很難做到識别圖表及圖表的位置，如柱狀圖，餅圖等。更何況物體識别所需的圖表在可視化圖檔中的相對位置等資訊，更是讓這些資料看起來是不可能完成搜集的。
然而DataV又恰恰擁有數以萬計的資料可視化模版資料，是以我們通過DataV的資料訓練了可以識别圖表位置及類型的物體識别模型，這也是物體識别模型首次應用于資料圖表領域。同時，LADV不僅僅能夠識别圖表的類型及位置，還可以将可視化界面的顔色進行提取。進而将原案例風格中更多的次元遷移到機器生成的資料可視化界面中。
3.1.2 識别結果優化
在得到識别結果的基礎上，我們進行了對識别結果的優化。例如我們使用了Grid Design這樣的設計規範，來避免由識别導緻的布局誤差(如上圖a,c)，并能夠将存在布局不規範的原圖進行規範。
3.2 顔色識别模型技術
色彩是大屏展示不可或缺的成分之一，在使用顔色時不僅需要考慮美觀度和協調性，還需要考慮到可讀性。我們将從原始圖檔中提取顔色并在優化後加以應用。首先，從圖檔中提取顔色及其相應占比，一般來說在一個大屏中背景色的占比是最大的， 是以使用占比最大的顔色作為背景色。文本顔色将影響大屏的可讀性，我們根據WCAG對比度标準計算出使得和背景色對比度達到7:1的文本顔色。接着對提取到的顔色進行過濾，去除背景色相似色和文本色相似色，然後對剩餘的顔色進行聚類得到主色。最後使用色闆生成方案生成色闆并應用于大屏中。
3.3 文字及字型識别模型技術
在即将釋出的版本中，LADV可以支援對文字及字型的識别，同時将識别到的文字及字型還原到生成可視化中。在字型識别中，我們使用了ResNet-18 作為識别的模型。進而實作了能夠識别案例可視化中的字型，例如包括襯線體及無襯線體等。LADV同時使用了OCR等傳統方案對文字進行了識别。
3.4 識别圖表映射
從 LADV 生成 DataV 大屏的過程主要分為兩步——大屏基本配置生成和大屏配置優化。首先，我們将 LADV 識别得到的圖表類型映射為 DataV 中的元件類型，同時結合圖表的位置，使用預設的圖表樣式配置和資料配置，生成一份“JSON”格式的大屏的基本配置。
在這一步中，我們主要解決了大屏内容和布局的生成，使用預設的樣式配置和資料在視覺層面還遠不能達到我們的需求，是以我們還要針對這兩個部分進行優化。我們将 LADV 識别得到色彩資訊作為大屏的主題配色，修改大屏相關色彩配置（如背景顔色和文字顔色），并周遊大屏中的每個元件，應用目前的主題配色，這個步驟使得大屏整體的色彩會更加豐富和和諧。這裡需要注意的是，由于手繪稿的色彩相對比較單一，是以我們沒有直接提取手繪稿的色彩資訊，而是應用了一些内置的主題配色，對生成的大屏進行美化。
除了色彩的優化外，我們根據識别得到的文字資訊，修改文字類元件的字型、字号等樣式配置，并使用識别得到的文字内容，作為文字元件的資料。完成以上步驟後，我們通過 DataV 提供的大屏生成接口，将最終的大屏配置導入到DataV 産品中生成為可互動的可視化大屏，使用者可以在此基礎上繼續優化，完成最終的資料可視化。
3.5 技術架構總結
在LADV的技術中，我們總結了目前LADV的技術架構，如下圖。
4.項目執行個體
4.1 LADV操作示範
我們僅僅需要上傳喜歡的資料可視化模版，就可以生成一份已在DataV内編輯好并可互動的可視化界面。同時，我們還可以對該模版進行繼續編輯，以達到我們想要的結果。 下圖左為選擇案例模版頁面，同時可以上傳圖檔，并點選右下角上傳案例。右側圖檔為通過LADV學習而生成的可視化界面，并可在DataV内進行繼續編輯。
與此同時，LADV考慮到有些使用者更傾向于優先繪制草圖，因為草圖可以抽象出不同的設計。是以，我們提供了可以快速将使用者手繪的資料可視化草圖通過識别來生成可視化界面的方法。通過與浙江大學 CAD實驗室合作，DataV收集了近2,000張手繪設計稿，并通過物體識别模型進行訓練。
4.2 使用者回報
我們在通過谷歌圖檔搜尋，嘗試通過搜尋3種不同的關鍵詞得到的可視化案例來測試LADV,（1）Power BI, ( 2 ) Tableau, ( 3 ) Dashboard。同時我們還搜集了( 4 ) Tableau Gallery的可視化案例界面 我們發現，除了 Tableau Gallery，使用者對所有的圖表生成在美觀上都給了很高的評價，并且，盡管Tableau Gallery目前美觀分數最低（原因為較多infographic案例，不規則圖表等），但使用者依舊願意基于LADV生成圖去繼續搭建，而非從零開始設計可視化的界面。這也意味着，LADV有能力徹底解放我們在可視化設計上的能力。
可見的将來，我們相信在設計可視化界面時，LADV可以參與到各個環節中。我們真誠的希望，LADV不僅能夠幫助使用者解決可視化的設計問題，同時能夠激起使用者對可視化設計的興趣，進而通過可視化設計及圖表布局，顔色等展示次元來影響資料的挖掘。
5.未來期待
最後，經過接近一年的努力, LADV通過與國内外學術界不同方式的合作受益良多，如國内可視化先驅浙江大學CAD實驗室的陳為教授，并得到了TVCG主編Klaus Mueller教授的合作邀請。