一種通用的數據可視化模型設計與實現

宋美娜 崔丹陽 鄂海紅 歐中洪

(北京郵電大學計算機學院PCN&CAD中心 北京 100876)

一種通用的數據可視化模型設計與實現

宋美娜 崔丹陽 鄂海紅 歐中洪

(北京郵電大學計算機學院PCN&CAD中心 北京 100876)

隨著互聯網、物聯網、云計算等信息技術的迅猛發展，大量非結構化信息不斷涌現，對數據可視化與可視化分析的需求不斷增加，同時可視化開發成本不斷提高。數據可視化模型的研究對于可視化開發必不可少。基于此背景，根據數據信息的分類研究提出一種通用、模塊化的數據可視化模型，將可視化流程分為可視化結構映射、可視化空間布局、可視化視圖映射三個主要模塊，并基于數據可視化模型利用開源的Echarts圖表工具包和D3函數庫形成可視化工具DVL.js (Data Visualization Layout)。該工具可應用于Web平臺，包含豐富的圖形展示方式如柱狀圖、折線圖、時序圖、餅圖、雷達圖、層次樹、力導向圖、標簽云等，這些展示方式都提供了完備的數據與交互接口，能應對不同場合的可視化需求。

數據可視化模型 可視化布局 圖形插件

0 引 言

數據可視化被定義為采用圖形語言，利用人類對視覺可視模式的快速識別能力對異質性數據進行視覺呈現，主要研究人、計算機表示的信息以及它們的相互影響的研究領域，是近年來的研究熱點。

Card等[1]首次提出可視化參考模型描述從數據源到可視化數據集的可視化映射過程。可視化映射表示從基于數學關系的數據表映射為被人視覺感知的圖形屬性結構，是可視化參考模型的核心。可視化映射中的數據結構需要是真實并保持數據的原貌，形成的可視化表征或隱喻要易于用戶快速感知，能夠充分表達數據的趨勢性、相似性、差別性等特征。

Shneiderman[2]根據數據信息的特征將數據可視化分為一維、二維、三維、多維、層次、網絡、時序等可視化類型。研究者圍繞上述數據類型提出了眾多的數據可視化新方法和新技術，隨著大數據時代與互聯網、社交網絡等領域的交叉融合，逐漸催生了幾類特征鮮明的數據可視化類型，例如文本標簽圖可視化、地圖可視化。

周寧等[3]提出了數據可視化系統的RDV模型，將數據可視化過程分解為數據源、可視化數據、可視化對象三種數據空間，以及映射和數據析取兩個過程，并基于代數結構原理介紹數據可視化整體結構。在知識可視化和信息可視化的比較[4]中研究分析了可視化的基本思想。劉曉平等[5]從協同設計中靜態約束信息的映射研究中提出了可視化映射過程：可視化結構映射、可視化空間映射、可視化元素映射和可視化屬性映射，整個映射過程圍繞靜態約束數據信息展開。李晶等[6]將多維數據可視化分為數據信息的圖形可視化和結構可視化兩部分。夏治坤[7]從研究多維數據可視化的直觀性、交互性、智能性等角度提出了符合用戶需求的多維數據平面基本模型。陳先灝等[8]針對電商產品數據使用HighCharts工具設計了一種以統計圖為主的可視化查詢系統。賴曉文等[9]以SVG技術為核心，研究實現一種具有標準面向對象接口的應用于電力系統方向的可視化方法庫集成平臺，提高了電網數據可視化分析效率。

本文提出了一種通用的數據可視化模型，該模型描述了原始數據經過處理轉換為包含信息類別、區間、數值屬性及可視化目標的可視化結構，并在適合的空間中選擇匹配的布局方法形成可視化對象，通過可視化視圖映射形成可視化圖形的映射過程；在可視化的整個流程中用戶都可以介入來調節模型以完成特定的任務需求。與文獻[3-9]相比，該數據可視化模型具有如下主要特點：

(1) 將數據的基本類型與當前互聯網的鮮明特征融合，可視化模型涵蓋的數據更廣泛。

(2) 定義通用數據可視化結構，實現了對數據服務的支持。

(3) 引入可視化布局過程，提出可視化結構單一布局映射和可視化結構多局映射，豐富了數據可視化的表征形式。

(4) 定義良好的可視化結構匹配機制，針對可視化圖形布局轉換進行驗證。

(5) 基于可視化模型實現了圖形插件，可應用于Web系統開發，具有高度的靈活性和可移植性。

1 數據可視化模型定義

數據可視化模型定義為將可視化數據具有的屬性特征映射為幾何空間中可視化關鍵要素，完成可視化數據到可視化視圖映射的過程。圖1描述了數據可視化模型映射過程，以數據為中心的可視化映射包括結構映射、空間布局映射、視圖映射，生成的數據實例包含可視化結構、可視化對象、可視化視圖。以用戶為中心的可視化控制包括視圖交互、可視化空間布局轉換、可視化結構轉換、更新數據等操作。可視化數據編碼的可視化映射流程概括如下：

(1) 可視化結構映射：將可視化數據根據數據特點、用戶可視化目標轉換為可視化結構的過程。

(2) 可視化空間布局：將可視化結構的類型與用戶選擇的可視化布局結合生成可視化對象的過程。

(3) 可視化視圖映射：將可視化對象轉換為可視化元素和可視化屬性以圖形的方式呈現在用戶界面的過程。

圖1 可視化映射模型

針對可視化映射模型中的過程映射函數流程如圖2所示，可以分為三類：

(1) 布局轉換函數Fl：對應可視化結構的布局和空間映射，可視化結構與可視化對象的對應關系可以是一對一、一對多的關系；

(2) 視圖映射函數Fv：對應可視化對象的視圖繪制；

(3) 視圖交互函數Fi：對應可視化視圖的界面控制操作。

圖2 數據可視化映射流程

用戶可以針對不同的任務，選擇控制迭代可視化模型中的每一個環節，將新生成的可視化對象進行視圖重繪。

2 數據可視化模型設計

2.1 可視化模型中的數據定義

數據可視化映射模型中數據以通用的數據結構作用于可視化模型的映射過程。以可視化數據為輸入，根據數據具有的特點和用戶可視化目標經過結構映射生成可視化結構，以可視化結構和用戶布局選擇為輸入經過空間布局生成可視化對象，以可視化對象為視圖映射的輸入經過圖形繪制最后生成可視化視圖。根據數據在可視化過程中具有的類別屬性、區間屬性和數值屬性[10]將可視化數據格式定義為M={title,describe,objects,property,relations,relationtype}。title為可視化數據的名稱描述；describe為可視化數據的背景描述；objects表示可視化數據中由類別屬性組成的集合，由數據類別名稱作為唯一標識；property為數據的區間屬性組成的集合；relations表示類別、區間與數值屬性關聯關系組成的對象集合；relationtype表示數據類別與區間之間的關系類型。基于坐標式的結構中每組關系可表示為relation={object：[propertyvalue1,propertyvalue2,…]}，由數據類別與信息區間共同確定數據值屬性；對于層次結構的數據結構表示為數據類別與區間屬性嵌套組成的對象集合，每一組關系可表示為relation={name,children}，其中children為當前數據類別的區間屬性組成的集合，當前的數據類別為父級的區間屬性集合；對于網絡結構的關系結構可以表示為relation={source, target}，source為源數據節點，target表示目標節點組成的數據集合。

2.2 數據可視化模型

基于數據可視化流程圖，數據可視化模型主要分為三部分：可視化結構映射、可視化空間布局、可視化視圖映射。

(1) 可視化結構映射

可視化結構映射是將不同來源，不同格式的可視化數據根據數據的類型、用戶的可視化目標轉換為可視化結構的過程。可視化數據與可視化結構為一對一的映射關系。

將Shneiderman提出的數據類型與大數據時代交叉融合，我們所設計的數據可視化結構包含：表征分組及分類關系的列表式結構，表征信息的程度、數值等屬性的坐標式結構，其中包括直角坐標系，極坐標系、地理坐標系等類型，表征數據層次、繼承、因果等關系的層次結構，表征數據一對一、一對多、多對多等復雜關系的網狀結構，表征數據隨時間變換狀態的結構時間流結構，表征文本屬性值的標簽字結構等類型。不同結構通過可視化結構中的relationtype表示，如表1所示。

表1 可視化結構類型

可視化結構映射是可視化模型的基礎，只有正確、合理、有效地表征可視化結構，才會使整個可視化過程有意義。

(2) 可視化空間布局

可視化空間布局是指根據可視化結構的類型與用戶的可視化布局選擇生成可視化對象的過程。根據可視化結構的數據特點，可視化空間布局可以分為統計圖布局、時序圖布局、層次圖布局、網絡圖布局、地理位置圖布局、標簽云布局。其中統計圖布局根據數據的維度進一步表示為餅狀圖、柱形圖、折線圖、散點圖、平行坐標圖及雷達圖等。

在可視化模型中，由可視化數據唯一確定的可視化結構并不能適應所有的可視化布局，根據可視化結構中的字段relationtype生成可視化結構布局匹配模塊來驗證可視化結構與選擇的可視化布局是否匹配。可視化布局映射主要分為兩種方式可視化結構單一布局映射和可視化結構多局映射。

定義1可視化結構單一布局映射是指可視化結構與可視化對象的一對一映射場景。

定義2可視化結構多布局映射是指可視化結構與可視化布局的一對多的映射場景。

可視化布局與可視化結構對應關系如表2所示。對于坐標式結構的數據根據數據的維度選擇適當的空間，保證可視化結構在空間內部完整、充分、有效地表示出來，屬于可視化結構多局映射；層次結構和網絡結構的數據可視化空間布局映射為一對一的方式。

表2 可視化布局與可視化結構關系

根據數據類型特點和可視化布局的不同，將可視化對象定義為四種不同形式：第一種為統計圖和地圖位置圖布局相關的可視化對象{title, property, describe, objects, series:[{name, data}]}；第二種為層次圖布局的可視化對象{ name,children}；第三種為網絡圖布局的可視化對象{ nodes:[{id, name, value}],edges:[{ source ,target,weight} ] }；第四種為標簽云布局的可視化對象[{name,value}]。

(3) 可視化視圖映射

在確定可視化的結構與空間布局后，就會生成唯一的可視化對象進行視圖繪制。可視化視圖繪制是指將可視化對象轉換為可視化元素以圖形化的方式呈現在用戶界面的過程。可視化視圖映射主要包括可視化對象到可視化圖形元素的繪制和可視化圖形屬性設置兩個部分，通常這兩個部分在可視化視圖渲染過程中同步進行的。

可視化圖形元素繪制中可視化元素一般要選用二維或者三維的基本幾何圖形來表示；可視化元素的關聯一般選用直線或者弧線連接；針對地理位置、標簽字等特殊的可視化元素選擇相應地圖和文字表現形式。可視化屬性選擇對于可視化結果表現的準確性、美觀性、立體性至關重要。常見的可視化屬性設置包括：使用顏色的色調、飽和度、亮度等標識不同類別對象，強化對象之間的區別；利用幾何的長度、寬度、深度、大小、角度等特性與信息的數值屬性建立對應關系表示信息的定量關系；利用動態的顯示、運動、高亮、閃爍等特效表示可視化交互過程，強調信息，豐富用戶的視覺感知。用戶可以根據特定的任務驅動設置適合的可視化屬性調整可視化視圖。

可視化視圖的映射一般采用基礎的可視化工具實現可視化圖形繪制和可視化屬性的設置。在本文的視圖映射部分針對統計數據相關的統計圖布局，地理位置圖布局使用Echarts工具完成，針對層次圖、網絡圖和標簽云使用D3函數庫完成。并在視圖繪制的同時通過參數的形式設置可視化元素的屬性。

3 信息可視化模型實現

本文以數據可視化模型為核心設計并實現了基于Web的數據可視化平臺。該平臺利用SpringMVC框架實現可視化數據處理生成可視化結構；根據JSON格式在網絡傳輸與數據交換的優勢，使用JSON作為可視化結構實例貫穿可視化映射的始終；利用HTML5和jQuery、Seajs、Echarts圖表工具和D3[11]函數庫實現瀏覽器端對可視化視圖的空間布局與視圖映射的支持。

基于數據可視化模型，利用Echarts和D3函數庫實現了一種具有集成性、可移植性的可視化圖形庫插件DVL.js。DVL.js中主要包含布局映射layer模塊、數據轉換model模塊、可視化匹配match模塊、圖形繪制draw模塊。DVL.js中布局映射模塊描述了布局選擇過程，根據match模塊返回的是否匹配結果調用model模塊進行數據轉換，model模塊返回相應的可視化對象，最后進行視圖的繪制模塊。布局映射是視圖可視化的關鍵環節。圖3描述了數據轉換模塊中可視化結構轉換的過程，根據布局中選擇的視圖類型進行數據轉換；圖4描述了視圖繪制模塊的調用過程，該模塊中目前實現的圖形包括基于統計的柱形圖、折線圖、餅狀圖、雷達圖、平行坐標圖，基于時間關系的靜態時序圖和動態時序圖，基于地圖的可視化描點、熱力圖，動態和靜態的標簽云，層次可視圖，網絡力導向圖。

圖3 DLV.js中model模塊

圖4 DLV.js中draw模塊

4 數據可視化模型應用

數據可視化平臺支持多種不同的數據類型，數據來源主要有兩種方式：從本系統數據庫讀取的數據和從外部導入的數據，對于外部使用接口形式導入的數據分為靜態和動態兩種方式。本文以使用接口導入靜態數據為例介紹數據可視化模型映射過程。

使用外部接口API形式導入數據及其配置選項后形成的可視化結構如圖5所示，根據可視化結構類型選擇布局方式如圖6右側布局欄所示。進行匹配成功后調用DVL.layer.setLayer()進行布局轉換，DVL.layer.setLayer()函數內部調用DVL.model.change()生成可視化對象，將可視化對象作為DVL.draw模塊的輸入，調用相應的圖形繪制函數生成可視化圖形，圖6描述了使用地理位置圖呈現地區收入分布；可視化視圖交互中用戶可以選擇不同的布局方式進行空間布局轉換生成新的可視化圖形，圖7描述了使用柱狀堆疊圖后呈現的地區收入統計情況。

圖5 可視化數據接口

圖6 可視化圖形實例1

圖7 可視化圖形實例2

5 結 語

本文首先給出了一種通用的數據可視化數據結構定義，介紹了數據可視化模型中可視化結構映射、可視化空間布局、可視化視圖映射三部分主要內容。并基于SpringMVC架構對可視化模型設計和借助對Echarts與D3工具包進行封裝與二次開發的插件形成功能豐富的可視化圖形方法，最終生成了通用的面向對象接口的可視化Web平臺，為數據挖掘人員對挖掘結果的呈現提供了直觀、生動的可視化方式，降低了開發成本，實現了數據可視化的快速生成與傳播。基于Echarts和D3開發的可視化插件具有較強的可移植性和可集成性，可高效地應用于不同角色、背景的可視化分析平臺。

雖然數據可視化模型提供了通用的可視化方案，涵蓋了大部分的信息類型，支持十多種不同的可視化圖形，但是如何進一步將不同的圖形進行組合從而優化對信息特征和屬性的表現，下一步工作會結合實際的應用場景進一步優化對可視化圖形的設計。

[1] Card S K,Mackinlay J D,Shneiderman B.Readings in information visualization:using vision to think[M].Morgan Kaufmann,1999.

[2] Shneiderman B.The eyes have it:A task by data type taxonomy for information visualizations[C]//Visual Languages,1996.Proceedings.IEEE Symposium on.IEEE,1996:336-343.

[3] 周寧,楊峰.信息可視化系統的RDV模型研究[J].情報學報,2004,23(5):619-624.

[4] 周寧,陳勇躍,金大衛,等.知識可視化與信息可視化比較研究[J].情報理論與實踐,2007,30(2):178-181.

[5] 劉曉平,石慧,毛崢強.基于信息可視化的協同感知模型[J].通信學報,2006,27(11):24-30.

[6] 李晶,薛澄岐,史銘豪,等.基于信息多維屬性的信息可視化結構[J].東南大學學報(自然科學版),2013,42(6):1094-1099.

[7] 夏治坤.多維信息可視化模型[J].科技情報開發與經濟,2006,16(10):170-172.

[8] 陳先灝,雒江濤.面向電商數據的可視化查詢系統[J].計算機系統應用,2016(4):123-127.

[9] 賴曉文,陳啟鑫,夏清,等.基于SVG技術的電力系統可視化平臺集成與方法庫開發[J].電力系統自動化,2012,36(16):76-81.

[10] Ware C.Information visualization:perception for design[M].Elsevier,2012.

[11] Bostock M,Ogievetsky V,Heer J.D3 data-driven documents[J].IEEE transactions on visualization and computer graphics,2011,17(12):2301-2309.

[12] 王恬,李書琴,王志偉.農業信息搜索可視化平臺研究[J].計算機應用與軟件,2016,33(3):271-274.

[13] 任磊,杜一,馬帥,等.大數據可視分析綜述[J].軟件學報,2014,25(9):1909-1936.

[14] 杜一,郭旦懷,陳昕,等.一種模型驅動的可視化生成系統[J].軟件學報,2016(5):1199-1211.

[15] 孫揚.多變元網絡數據可視化方法研究[D].國防科學技術大學,2010.

[16] 楊峰,李蔚.信息可視化技術的分類研究[J].圖書與情報,2007(3):81-85.

[17] 張建軍,劉虎,倪芳英.基于SSH與Highcharts整合架構的Web應用研究[J].計算機技術與發展,2013,23(9):245-247.

[18] 楊瑩.基于簡化光線投射GPU大規模地形實時可視化[J].計算機應用與軟件,2014,31(6):123-126.

[19] 龔炳江,楊海梅.敏捷BPM的可視化流程模型研究與實現[J].計算機應用與軟件,2013,30(10):199-201,254.

[20] 彭國華,王波興,黃運保.輻射流體力學計算結果的可視化處理[J].計算機應用與軟件,2015,32(4):56-58.

[21] 葛彬,尚建嘎,余芳文,等.一種融合WebGIS和Web3D技術的實時定位系統可視化框架[J].計算機應用與軟件,2015,32(1):68-70,117.

[22] Nazemi K,Burkhardt D,Hoppe D,et al.Web-based Evaluation of Information Visualization[J].Procedia Manufacturing,2015,3:5527-5534.

[23] Satyanarayan A,Heer J.Lyra:An interactive visualization design environment[J].Computer Graphics Forum,2014,33(3):351-360.

[24] Turkay C,Slingsby A,Hauser H,et al.Attribute signatures:Dynamic visual summaries for analyzing multivariate geographical data[J].IEEE transactions on visualization and computer graphics,2014,20(12):2033-2042.

[25] Chen S,Yuan X,Wang Z,et al.Interactive visual discovering of movement patterns from sparsely sampled geo-tagged social media data[J].IEEE transactions on visualization and computer graphics,2016,22(1):270-279.

DESIGNANDIMPLEMENTATIONOFAGENERALINFORMATIONVISUALIZATIONMODEL

Song Meina Cui Danyang E Haihong Ou Zhonghong

(PCN&CADCenter,SchoolofComputerScience,BeijingUniversityofPostsandTelecommunications,Beijing100876,China)

With the rapid development of the Internet, IoT, cloud computing and other information technology, large volumes of unstructured data are emerging. However, as the increasing demand for data visualization and visual analysis, the cost of visual development is increasing. Hence, researches on data visualization models are essential for visualization development. In this context, based on the classification of data information, this paper presents a generic, modular data visualization model which is divided into three modules, including visualization structure mapping, visualization spatial layout, and visualization view mapping. And based on the data visualization model, the DVL.js tool (Data Visualization Layout) is created by using the open source Echarts graph toolkits and the D3 function libraries. The DVL.js toolkits can be applied to Web platforms, contain rich graphical displays such as bar charts, line charts, time sequence diagrams, pie charts, radar charts, and hierarchical tree, force directed graph and tag clouds. All these display methods provide complete data and interactive interfaces, which can meet the visualization requirements of different occasions.

Data visualization model Visualization layout Graphical widgets

TP3

A

10.3969/j.issn.1000-386x.2017.09.008

2016-07-04。國家科技支撐計劃項目(2014BAK15B01)。宋美娜，教授，主研領域：云計算與大數據。崔丹陽，碩士生。鄂海紅，副教授。歐中洪，副教授。