點選檢視精彩視訊
阿裡巴巴資料技術專家言顧在D2的分享。
“馬良”的誕生
DataV一直緻力于解決雲上中小企業資料可視化的難題，也包括城市大腦的資料可視化業務。今天向大家介紹我們的新成果馬良，我們希望将來做資料分析和調研時，僅僅通過手繪方式就能達到我們想要的資料分析規律。
如圖為我們與麻省理工感覺城市實驗室合作的關于字型在城市中分布的研究，我們将城市中的常用字型進行分類，用谷歌的街景方式提取到街景中的字型和文字資訊，我們也是用的物體識别模型來做這樣一個提取方案，在我們提取到整個城市近百萬張的街景之後，我們發現字型分布與街區的經濟和商業都是有很強相關性的。
每一個不同的字型在區域内都和經濟呈現正相關或者負相關，比如設計師經常用的無襯線字型與倫敦中心經濟呈負相關，而襯線字型是正相關的，是以，高收入人群可能更傾向于選擇帶襯線字型，人們可能因為其它趨勢選擇無襯線字型。
通過這個研究，希望讓大家了解我們對可視化的看法，我們希望從設計的角度和思維去解決工程化的問題。
馬良僅僅通過手繪稿就可以生成完整的資料可視化大屏，同時，我們支援設計稿的上傳，取得的設計稿通過馬良可以在秒級内生成供大家繼續編輯的資料可視化大屏。
可視化界面搭建難題
在整個馬良研發過程中遇到的最大問題是可視化界面的搭建，我們在搭建過程中确實遇到了許多問題，其中也涉及到了業務方需求，我們發現很多時候做資料可視化大屏搭建時，首先要考慮設計中原型的搭建和開發，但近年來，很多可視化産品都極大降低了開發門檻，在設計方面并沒有很好的解決。
我們現在在解決資料可視化設計問題時，在大屏領域包括DataV或其它可視化産品，都是通過選擇模闆來降低可視化設計的高開發門檻。在提供模闆時，會遇到一些問題，比如自己做資料可視化大屏時，沒有辦法完全比對自己的資料次元，資料可視化模闆數量的限制導緻沒有辦法選取更多樣的風格。為了解決這樣的問題，我們研發了馬良這樣的産品。
我們對近年來的資料可視化産品進行了相關分析，我們發現，可視化大屏建立包括了設計和研發，而很多可視化産品都在coding方面極大降低了開發成本，我們希望馬良在開發和設計方面能夠做好。
可視化大屏模闆的設計流程
首先，可視化大屏模闆需要有産品經理幫助我們梳理資料，同時設計師需要對梳理好的資料進行模闆布局，包括顔色選取，最終交由工程師完成産品落地，可以看到整個流程非常冗長，需要不同角色配合。有了馬良之後，任何單一角色不需要依賴于其他角色，都能夠完成整個資料可視化大屏的搭建，比如産品經理不需要有設計知識也可完成搭建，設計師也可用草稿搭建資料可視化大屏。而且，馬良對資料規律可以進行真正意義上的探索。
如圖，右邊為馬良的時長，同樣時長下我們相信有更多分析嘗試，以前做一塊大屏需要幾天，如果大家用過DataV就會知道，DataV是支援拖拽的，可以選擇圖表元件進行拖拽，大概幾小時完成。
為什麼要推出馬良？因為很多使用者沒有很好的設計背景和專業知識，同樣隻是簡單的拖拽圖表元件和布局，普通使用者和設計師做的是完全不一樣的，我們希望當發現很好的案例時，可以直接拖下來用馬良生成，完成資料風格的遷移，而不是再拖拽，之前做過相應的測試，發現拖拽的建立過程還是要以小時計算的。而馬良是以秒級來計算流程的。
基于深度學習輔助大屏可視化設計的方法
随着深度學習的發展，盡管深度學習與可視化有很強的溝通，但是一直沒有很完善的産品讓我們了解深度學習和可視化二者如何互相幫助的，我們知道一些比較知名的可視化與深度學習結合的案例如google用可視化來可視整個深度學習的神經網絡，同樣，我們相信可以通過深度學習及物體識别技術等能夠幫助可視化進行搭建和還原。
如圖為馬良兩個主要案例，上面為手繪稿生成，下面為設計稿生成，以應對生産環境中的兩種需求。生成手繪稿是因為很多産品經理做資料可視化大屏時，可能更傾向于把想法概念繪制下來，這樣當有新想法時更容易移除或擦除，有了馬良之後，可以依據手繪稿生成繼續支援開發的可視化大屏模闆；同時我們也支援設計稿，很多時候産品經理拿着網上找到的設計稿可視化大屏與工程師溝通，希望工程師按照某種風格開發，有了馬良之後，自己找到的設計稿可以很快實作資料可視化大屏。這樣，單一角色可以完成搭建資料可視化大屏工作，同時，如果後續有更多個性化需求，更多人員接入，整個效果會有更好的提升。
圖表識别與可視化界面識别的差別
整個技術内部最重要的是圖表位置提取和生成可視化界面布局優化。在可視化領域，圖表識别與可視化界面識别的差別在于，可視化界面識别不僅要識别圖表是什麼，同時要知道你的位置在哪裡。
圖表領域最原始的深度學習研究是斯坦福教授FeiFei Li和Jeffrey Heer發表的這篇文章，ReVision是把對應圖表的特征提取出來，提取出來的便于機器了解的特征進行一個全連結層的映射，得到結果圖形，但是并沒有解決物體識别和位置識别。
是以，我們引入了物體識别模型如Faster R-CNN等，物體識别不僅知道你的物體在哪裡，這樣的模型應用于交通領域比較多，比如行人、車輛等，去年開始，我們與浙大在圖表識别領域進行合作，得到了不錯的效果。
深度學習和機器學習需要非常大的訓練樣本，我們在做相關的訓練樣本收集時，為了讓我們的模型識别不同的風格，盡量讓更多的參與者去參與，能夠識别不同的風格。
如圖就是一個訓練樣本，一個參與者繪制完不同的圖表之後，對圖表進行打标。為什麼沒有用随機的生成方式呢？因為讓許多參與者參與需要大量的時間，能不能用随機的方式，比如有了圖表之後，更換布局在一個空白的界面上随機放置，隻要不重疊情況下就可以作為訓練資料。我們最終沒有使用這個方法，而是選擇了DataV自己的資料，是因為我們相信可視化圖表在界面中是有一定規律的，這也引入了我們對物體識别模型更多的算法和函數的思考和提高。
可視化界面的機率密度函數
可視化界面内部也有自己的機率密度，比如如圖所示的大屏，title所在的位置一般都在圖表的上半部分，地球map一般都會在螢幕中間，我們也是通過自己已有的資料進行機率密度的比對和測試。
我們發現大部分的圖表确實是有機率存在的，比如一些柱狀圖如果是橫向柱狀圖，因為Y軸在圖表左側，是以橫向柱狀圖更傾向于在整張大屏的左側。
我們可以對深度學習模型做更高的優化。如圖左側是正常的深度學習模型，包括扔進圖檔之後經過訓練得到一個結果，扔進一個資料可視化大屏進去得到具體資訊，比如bar chart在螢幕什麼位置，大小是什麼，同時在這時進行機率密度的計算，我們會計算bar chart在某個位置的機率大概是多少，這就引入了後半部分Learning-Based Validation機率密度函數，引入此函數對整個模型準确率提升6%～7%左右。
傳回到圖中，當我知道在某處有一個bar chart或pie chart時，對bar chart 或 pie chart在這個位置的機率再進行一次計算，如果機率非常低，我就認為識别到的是錯誤的，相當于先有識别結果，但同時對識别結果再進行一次驗證，這樣對整個模型優化是非常大的。
同時我們也希望我們的産品不止能夠識别電子版上的業務場景，同時也能夠識别包括會議室内的資料分析，草圖繪制也上傳到馬良，馬良會在秒級内回複一個編輯好的資料可視化大屏。如果之前你有資料已經導入的情況下，可以很快地得到一個非常完善的可視化大屏。
無論是手繪稿識别還是設計稿識别，馬良都遵循着如圖幾個步驟。首先會有一個圖表識别，接下來會有一個顔色提取部分，第三步會被之前識别到的位置結果進行優化，最後基于之前收集到的資料可視化資訊，生成一幅已選擇的設計風格的資料可視化大屏。
主題色提取及賦予生成可視化界面的顔色
可視化界面顔色生成部分，我們做了主題色提取和色闆生成。首先要提取背景色和主題色，同時依據背景色也會推薦字型顔色和其它輔助顔色，我們也會推薦不同的色闆方案供大家參考。
有時，我們喜歡的圖檔不一定是資料可視化作品，可能隻是一個音樂會或自然風光等不同場景，用這樣的圖檔來生成資料可視化顔色，對此，我們也做了相應的工作，隻要你上傳任何圖檔，我們能夠把圖檔風格的顔色設定到大屏中。
以上給大家介紹的更多的是依圖生圖的功能，我們現在也在做資料生圖和風格遷移，底層使用的模型算法包括深度學習算法、機器學習算法和基礎算法等，通過識别、回歸和機率計算幫助上層的資訊搭建。
圖中彩色部分是馬良現在做的部分，使用者可以上傳自己的可視化螢幕進行識别，整個識别是依據馬良現有的模型，我們也在做馬良的自動機器學習，使使用者可以上傳自己的圖表，資料打标非常痛苦，可能上萬張圖檔，馬良作為遷移學習的模型後，相信大家可以隻上傳幾十張上百張的圖表就可以更針對的識别屬于自己的資料可視化圖表庫。
我們從google上搜尋不同的dashboard，随機的選取結果後拖下來由馬良來生成，上面為原始資料可視化大屏，下面是由馬良生成的資料可視化大屏。通過使用者的回報，我們了解到有一些生成的顔色和布局是優于原始可視化大屏的，這樣的結果是激勵我們前進。
現有場景中，很多廠商因為沒有自己的能力，沒有自己的專業的資料可視化設計團隊，導緻很多廠商的資料可視化從來不換。有了馬良之後，我們希望至少快速幫助使用者測試是否能夠生成一個更好的更美的更适合的資料可視化模闆。
關注「Alibaba F2E」
把握阿裡巴巴前端新動向