手繪稿如何1秒變身數據大屏？深度學習讓人人成爲可視化專家

概念：LADV是DataV內嵌的智能識別設計產品，可以迅速學習和識別手繪草圖、信息圖表、大屏截圖等資料，並在DataV內自動生成可配置的可視化應用。

有了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教授的合做邀請。

該功能已在企業版和專業版中上線，體驗點擊連接哦！ 連接: data.aliyun.com/visual/data…

本文原做者：言顧

原文連接

本文爲雲棲社區原創內容，未經容許不得轉載。