宋美娜 崔丹陽(yáng) 鄂海紅 歐中洪

(北京郵電大學(xué)計(jì)算機(jī)學(xué)院PCN&CAD中心 北京 100876)

一種通用的數(shù)據(jù)可視化模型設(shè)計(jì)與實(shí)現(xiàn)

宋美娜 崔丹陽(yáng) 鄂海紅 歐中洪

(北京郵電大學(xué)計(jì)算機(jī)學(xué)院PCN&CAD中心 北京 100876)

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

數(shù)據(jù)可視化模型 可視化布局 圖形插件

0 引 言

數(shù)據(jù)可視化被定義為采用圖形語(yǔ)言，利用人類(lèi)對(duì)視覺(jué)可視模式的快速識(shí)別能力對(duì)異質(zhì)性數(shù)據(jù)進(jìn)行視覺(jué)呈現(xiàn)，主要研究人、計(jì)算機(jī)表示的信息以及它們的相互影響的研究領(lǐng)域，是近年來(lái)的研究熱點(diǎn)。

Card等[1]首次提出可視化參考模型描述從數(shù)據(jù)源到可視化數(shù)據(jù)集的可視化映射過(guò)程?？梢暬成浔硎緩幕跀?shù)學(xué)關(guān)系的數(shù)據(jù)表映射為被人視覺(jué)感知的圖形屬性結(jié)構(gòu)，是可視化參考模型的核心?？梢暬成渲械臄?shù)據(jù)結(jié)構(gòu)需要是真實(shí)并保持?jǐn)?shù)據(jù)的原貌，形成的可視化表征或隱喻要易于用戶(hù)快速感知，能夠充分表達(dá)數(shù)據(jù)的趨勢(shì)性、相似性、差別性等特征。

Shneiderman[2]根據(jù)數(shù)據(jù)信息的特征將數(shù)據(jù)可視化分為一維、二維、三維、多維、層次、網(wǎng)絡(luò)、時(shí)序等可視化類(lèi)型。研究者圍繞上述數(shù)據(jù)類(lèi)型提出了眾多的數(shù)據(jù)可視化新方法和新技術(shù)，隨著大數(shù)據(jù)時(shí)代與互聯(lián)網(wǎng)、社交網(wǎng)絡(luò)等領(lǐng)域的交叉融合，逐漸催生了幾類(lèi)特征鮮明的數(shù)據(jù)可視化類(lèi)型，例如文本標(biāo)簽圖可視化、地圖可視化。

周寧等[3]提出了數(shù)據(jù)可視化系統(tǒng)的RDV模型，將數(shù)據(jù)可視化過(guò)程分解為數(shù)據(jù)源、可視化數(shù)據(jù)、可視化對(duì)象三種數(shù)據(jù)空間，以及映射和數(shù)據(jù)析取兩個(gè)過(guò)程，并基于代數(shù)結(jié)構(gòu)原理介紹數(shù)據(jù)可視化整體結(jié)構(gòu)。在知識(shí)可視化和信息可視化的比較[4]中研究分析了可視化的基本思想。劉曉平等[5]從協(xié)同設(shè)計(jì)中靜態(tài)約束信息的映射研究中提出了可視化映射過(guò)程：可視化結(jié)構(gòu)映射、可視化空間映射、可視化元素映射和可視化屬性映射，整個(gè)映射過(guò)程圍繞靜態(tài)約束數(shù)據(jù)信息展開(kāi)。李晶等[6]將多維數(shù)據(jù)可視化分為數(shù)據(jù)信息的圖形可視化和結(jié)構(gòu)可視化兩部分。夏治坤[7]從研究多維數(shù)據(jù)可視化的直觀性、交互性、智能性等角度提出了符合用戶(hù)需求的多維數(shù)據(jù)平面基本模型。陳先灝等[8]針對(duì)電商產(chǎn)品數(shù)據(jù)使用HighCharts工具設(shè)計(jì)了一種以統(tǒng)計(jì)圖為主的可視化查詢(xún)系統(tǒng)。賴(lài)曉文等[9]以SVG技術(shù)為核心，研究實(shí)現(xiàn)一種具有標(biāo)準(zhǔn)面向?qū)ο蠼涌诘膽?yīng)用于電力系統(tǒng)方向的可視化方法庫(kù)集成平臺(tái)，提高了電網(wǎng)數(shù)據(jù)可視化分析效率。

本文提出了一種通用的數(shù)據(jù)可視化模型，該模型描述了原始數(shù)據(jù)經(jīng)過(guò)處理轉(zhuǎn)換為包含信息類(lèi)別、區(qū)間、數(shù)值屬性及可視化目標(biāo)的可視化結(jié)構(gòu)，并在適合的空間中選擇匹配的布局方法形成可視化對(duì)象，通過(guò)可視化視圖映射形成可視化圖形的映射過(guò)程；在可視化的整個(gè)流程中用戶(hù)都可以介入來(lái)調(diào)節(jié)模型以完成特定的任務(wù)需求。與文獻(xiàn)[3-9]相比，該數(shù)據(jù)可視化模型具有如下主要特點(diǎn)：

(1) 將數(shù)據(jù)的基本類(lèi)型與當(dāng)前互聯(lián)網(wǎng)的鮮明特征融合，可視化模型涵蓋的數(shù)據(jù)更廣泛。

(2) 定義通用數(shù)據(jù)可視化結(jié)構(gòu)，實(shí)現(xiàn)了對(duì)數(shù)據(jù)服務(wù)的支持。

(3) 引入可視化布局過(guò)程，提出可視化結(jié)構(gòu)單一布局映射和可視化結(jié)構(gòu)多局映射，豐富了數(shù)據(jù)可視化的表征形式。

(4) 定義良好的可視化結(jié)構(gòu)匹配機(jī)制，針對(duì)可視化圖形布局轉(zhuǎn)換進(jìn)行驗(yàn)證。

(5) 基于可視化模型實(shí)現(xiàn)了圖形插件，可應(yīng)用于Web系統(tǒng)開(kāi)發(fā)，具有高度的靈活性和可移植性。

1 數(shù)據(jù)可視化模型定義

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

(1) 可視化結(jié)構(gòu)映射：將可視化數(shù)據(jù)根據(jù)數(shù)據(jù)特點(diǎn)、用戶(hù)可視化目標(biāo)轉(zhuǎn)換為可視化結(jié)構(gòu)的過(guò)程。

(2) 可視化空間布局：將可視化結(jié)構(gòu)的類(lèi)型與用戶(hù)選擇的可視化布局結(jié)合生成可視化對(duì)象的過(guò)程。

(3) 可視化視圖映射：將可視化對(duì)象轉(zhuǎn)換為可視化元素和可視化屬性以圖形的方式呈現(xiàn)在用戶(hù)界面的過(guò)程。

圖1 可視化映射模型

針對(duì)可視化映射模型中的過(guò)程映射函數(shù)流程如圖2所示，可以分為三類(lèi)：

(1) 布局轉(zhuǎn)換函數(shù)Fl：對(duì)應(yīng)可視化結(jié)構(gòu)的布局和空間映射，可視化結(jié)構(gòu)與可視化對(duì)象的對(duì)應(yīng)關(guān)系可以是一對(duì)一、一對(duì)多的關(guān)系；

(2) 視圖映射函數(shù)Fv：對(duì)應(yīng)可視化對(duì)象的視圖繪制；

(3) 視圖交互函數(shù)Fi：對(duì)應(yīng)可視化視圖的界面控制操作。

圖2 數(shù)據(jù)可視化映射流程

用戶(hù)可以針對(duì)不同的任務(wù)，選擇控制迭代可視化模型中的每一個(gè)環(huán)節(jié)，將新生成的可視化對(duì)象進(jìn)行視圖重繪。

2 數(shù)據(jù)可視化模型設(shè)計(jì)

2.1 可視化模型中的數(shù)據(jù)定義

數(shù)據(jù)可視化映射模型中數(shù)據(jù)以通用的數(shù)據(jù)結(jié)構(gòu)作用于可視化模型的映射過(guò)程。以可視化數(shù)據(jù)為輸入，根據(jù)數(shù)據(jù)具有的特點(diǎn)和用戶(hù)可視化目標(biāo)經(jīng)過(guò)結(jié)構(gòu)映射生成可視化結(jié)構(gòu)，以可視化結(jié)構(gòu)和用戶(hù)布局選擇為輸入經(jīng)過(guò)空間布局生成可視化對(duì)象，以可視化對(duì)象為視圖映射的輸入經(jīng)過(guò)圖形繪制最后生成可視化視圖。根據(jù)數(shù)據(jù)在可視化過(guò)程中具有的類(lèi)別屬性、區(qū)間屬性和數(shù)值屬性[10]將可視化數(shù)據(jù)格式定義為M={title,describe,objects,property,relations,relationtype}。title為可視化數(shù)據(jù)的名稱(chēng)描述；describe為可視化數(shù)據(jù)的背景描述；objects表示可視化數(shù)據(jù)中由類(lèi)別屬性組成的集合，由數(shù)據(jù)類(lèi)別名稱(chēng)作為唯一標(biāo)識(shí)；property為數(shù)據(jù)的區(qū)間屬性組成的集合；relations表示類(lèi)別、區(qū)間與數(shù)值屬性關(guān)聯(lián)關(guān)系組成的對(duì)象集合；relationtype表示數(shù)據(jù)類(lèi)別與區(qū)間之間的關(guān)系類(lèi)型?；谧鴺?biāo)式的結(jié)構(gòu)中每組關(guān)系可表示為relation={object：[propertyvalue1,propertyvalue2,…]}，由數(shù)據(jù)類(lèi)別與信息區(qū)間共同確定數(shù)據(jù)值屬性；對(duì)于層次結(jié)構(gòu)的數(shù)據(jù)結(jié)構(gòu)表示為數(shù)據(jù)類(lèi)別與區(qū)間屬性嵌套組成的對(duì)象集合，每一組關(guān)系可表示為relation={name,children}，其中children為當(dāng)前數(shù)據(jù)類(lèi)別的區(qū)間屬性組成的集合，當(dāng)前的數(shù)據(jù)類(lèi)別為父級(jí)的區(qū)間屬性集合；對(duì)于網(wǎng)絡(luò)結(jié)構(gòu)的關(guān)系結(jié)構(gòu)可以表示為relation={source, target}，source為源數(shù)據(jù)節(jié)點(diǎn)，target表示目標(biāo)節(jié)點(diǎn)組成的數(shù)據(jù)集合。

2.2 數(shù)據(jù)可視化模型

基于數(shù)據(jù)可視化流程圖，數(shù)據(jù)可視化模型主要分為三部分：可視化結(jié)構(gòu)映射、可視化空間布局、可視化視圖映射。

(1) 可視化結(jié)構(gòu)映射

可視化結(jié)構(gòu)映射是將不同來(lái)源，不同格式的可視化數(shù)據(jù)根據(jù)數(shù)據(jù)的類(lèi)型、用戶(hù)的可視化目標(biāo)轉(zhuǎn)換為可視化結(jié)構(gòu)的過(guò)程?？梢暬瘮?shù)據(jù)與可視化結(jié)構(gòu)為一對(duì)一的映射關(guān)系。

將Shneiderman提出的數(shù)據(jù)類(lèi)型與大數(shù)據(jù)時(shí)代交叉融合，我們所設(shè)計(jì)的數(shù)據(jù)可視化結(jié)構(gòu)包含：表征分組及分類(lèi)關(guān)系的列表式結(jié)構(gòu)，表征信息的程度、數(shù)值等屬性的坐標(biāo)式結(jié)構(gòu)，其中包括直角坐標(biāo)系，極坐標(biāo)系、地理坐標(biāo)系等類(lèi)型，表征數(shù)據(jù)層次、繼承、因果等關(guān)系的層次結(jié)構(gòu)，表征數(shù)據(jù)一對(duì)一、一對(duì)多、多對(duì)多等復(fù)雜關(guān)系的網(wǎng)狀結(jié)構(gòu)，表征數(shù)據(jù)隨時(shí)間變換狀態(tài)的結(jié)構(gòu)時(shí)間流結(jié)構(gòu)，表征文本屬性值的標(biāo)簽字結(jié)構(gòu)等類(lèi)型。不同結(jié)構(gòu)通過(guò)可視化結(jié)構(gòu)中的relationtype表示，如表1所示。

表1 可視化結(jié)構(gòu)類(lèi)型

可視化結(jié)構(gòu)映射是可視化模型的基礎(chǔ)，只有正確、合理、有效地表征可視化結(jié)構(gòu)，才會(huì)使整個(gè)可視化過(guò)程有意義。

(2) 可視化空間布局

可視化空間布局是指根據(jù)可視化結(jié)構(gòu)的類(lèi)型與用戶(hù)的可視化布局選擇生成可視化對(duì)象的過(guò)程。根據(jù)可視化結(jié)構(gòu)的數(shù)據(jù)特點(diǎn)，可視化空間布局可以分為統(tǒng)計(jì)圖布局、時(shí)序圖布局、層次圖布局、網(wǎng)絡(luò)圖布局、地理位置圖布局、標(biāo)簽云布局。其中統(tǒng)計(jì)圖布局根據(jù)數(shù)據(jù)的維度進(jìn)一步表示為餅狀圖、柱形圖、折線圖、散點(diǎn)圖、平行坐標(biāo)圖及雷達(dá)圖等。

在可視化模型中，由可視化數(shù)據(jù)唯一確定的可視化結(jié)構(gòu)并不能適應(yīng)所有的可視化布局，根據(jù)可視化結(jié)構(gòu)中的字段relationtype生成可視化結(jié)構(gòu)布局匹配模塊來(lái)驗(yàn)證可視化結(jié)構(gòu)與選擇的可視化布局是否匹配?？梢暬季钟成渲饕譃閮煞N方式可視化結(jié)構(gòu)單一布局映射和可視化結(jié)構(gòu)多局映射。

定義1可視化結(jié)構(gòu)單一布局映射是指可視化結(jié)構(gòu)與可視化對(duì)象的一對(duì)一映射場(chǎng)景。

定義2可視化結(jié)構(gòu)多布局映射是指可視化結(jié)構(gòu)與可視化布局的一對(duì)多的映射場(chǎng)景。

可視化布局與可視化結(jié)構(gòu)對(duì)應(yīng)關(guān)系如表2所示。對(duì)于坐標(biāo)式結(jié)構(gòu)的數(shù)據(jù)根據(jù)數(shù)據(jù)的維度選擇適當(dāng)?shù)目臻g，保證可視化結(jié)構(gòu)在空間內(nèi)部完整、充分、有效地表示出來(lái)，屬于可視化結(jié)構(gòu)多局映射；層次結(jié)構(gòu)和網(wǎng)絡(luò)結(jié)構(gòu)的數(shù)據(jù)可視化空間布局映射為一對(duì)一的方式。

表2 可視化布局與可視化結(jié)構(gòu)關(guān)系

根據(jù)數(shù)據(jù)類(lèi)型特點(diǎn)和可視化布局的不同，將可視化對(duì)象定義為四種不同形式：第一種為統(tǒng)計(jì)圖和地圖位置圖布局相關(guān)的可視化對(duì)象{title, property, describe, objects, series:[{name, data}]}；第二種為層次圖布局的可視化對(duì)象{ name,children}；第三種為網(wǎng)絡(luò)圖布局的可視化對(duì)象{ nodes:[{id, name, value}],edges:[{ source ,target,weight} ] }；第四種為標(biāo)簽云布局的可視化對(duì)象[{name,value}]。

(3) 可視化視圖映射

在確定可視化的結(jié)構(gòu)與空間布局后，就會(huì)生成唯一的可視化對(duì)象進(jìn)行視圖繪制?？梢暬晥D繪制是指將可視化對(duì)象轉(zhuǎn)換為可視化元素以圖形化的方式呈現(xiàn)在用戶(hù)界面的過(guò)程?？梢暬晥D映射主要包括可視化對(duì)象到可視化圖形元素的繪制和可視化圖形屬性設(shè)置兩個(gè)部分，通常這兩個(gè)部分在可視化視圖渲染過(guò)程中同步進(jìn)行的。

可視化圖形元素繪制中可視化元素一般要選用二維或者三維的基本幾何圖形來(lái)表示；可視化元素的關(guān)聯(lián)一般選用直線或者弧線連接；針對(duì)地理位置、標(biāo)簽字等特殊的可視化元素選擇相應(yīng)地圖和文字表現(xiàn)形式?？梢暬瘜傩赃x擇對(duì)于可視化結(jié)果表現(xiàn)的準(zhǔn)確性、美觀性、立體性至關(guān)重要。常見(jiàn)的可視化屬性設(shè)置包括：使用顏色的色調(diào)、飽和度、亮度等標(biāo)識(shí)不同類(lèi)別對(duì)象，強(qiáng)化對(duì)象之間的區(qū)別；利用幾何的長(zhǎng)度、寬度、深度、大小、角度等特性與信息的數(shù)值屬性建立對(duì)應(yīng)關(guān)系表示信息的定量關(guān)系；利用動(dòng)態(tài)的顯示、運(yùn)動(dòng)、高亮、閃爍等特效表示可視化交互過(guò)程，強(qiáng)調(diào)信息，豐富用戶(hù)的視覺(jué)感知。用戶(hù)可以根據(jù)特定的任務(wù)驅(qū)動(dòng)設(shè)置適合的可視化屬性調(diào)整可視化視圖。

可視化視圖的映射一般采用基礎(chǔ)的可視化工具實(shí)現(xiàn)可視化圖形繪制和可視化屬性的設(shè)置。在本文的視圖映射部分針對(duì)統(tǒng)計(jì)數(shù)據(jù)相關(guān)的統(tǒng)計(jì)圖布局，地理位置圖布局使用Echarts工具完成，針對(duì)層次圖、網(wǎng)絡(luò)圖和標(biāo)簽云使用D3函數(shù)庫(kù)完成。并在視圖繪制的同時(shí)通過(guò)參數(shù)的形式設(shè)置可視化元素的屬性。

3 信息可視化模型實(shí)現(xiàn)

本文以數(shù)據(jù)可視化模型為核心設(shè)計(jì)并實(shí)現(xiàn)了基于Web的數(shù)據(jù)可視化平臺(tái)。該平臺(tái)利用SpringMVC框架實(shí)現(xiàn)可視化數(shù)據(jù)處理生成可視化結(jié)構(gòu)；根據(jù)JSON格式在網(wǎng)絡(luò)傳輸與數(shù)據(jù)交換的優(yōu)勢(shì)，使用JSON作為可視化結(jié)構(gòu)實(shí)例貫穿可視化映射的始終；利用HTML5和jQuery、Seajs、Echarts圖表工具和D3[11]函數(shù)庫(kù)實(shí)現(xiàn)瀏覽器端對(duì)可視化視圖的空間布局與視圖映射的支持。

基于數(shù)據(jù)可視化模型，利用Echarts和D3函數(shù)庫(kù)實(shí)現(xiàn)了一種具有集成性、可移植性的可視化圖形庫(kù)插件DVL.js。DVL.js中主要包含布局映射layer模塊、數(shù)據(jù)轉(zhuǎn)換model模塊、可視化匹配match模塊、圖形繪制draw模塊。DVL.js中布局映射模塊描述了布局選擇過(guò)程，根據(jù)match模塊返回的是否匹配結(jié)果調(diào)用model模塊進(jìn)行數(shù)據(jù)轉(zhuǎn)換，model模塊返回相應(yīng)的可視化對(duì)象，最后進(jìn)行視圖的繪制模塊。布局映射是視圖可視化的關(guān)鍵環(huán)節(jié)。圖3描述了數(shù)據(jù)轉(zhuǎn)換模塊中可視化結(jié)構(gòu)轉(zhuǎn)換的過(guò)程，根據(jù)布局中選擇的視圖類(lèi)型進(jìn)行數(shù)據(jù)轉(zhuǎn)換；圖4描述了視圖繪制模塊的調(diào)用過(guò)程，該模塊中目前實(shí)現(xiàn)的圖形包括基于統(tǒng)計(jì)的柱形圖、折線圖、餅狀圖、雷達(dá)圖、平行坐標(biāo)圖，基于時(shí)間關(guān)系的靜態(tài)時(shí)序圖和動(dòng)態(tài)時(shí)序圖，基于地圖的可視化描點(diǎn)、熱力圖，動(dòng)態(tài)和靜態(tài)的標(biāo)簽云，層次可視圖，網(wǎng)絡(luò)力導(dǎo)向圖。

圖3 DLV.js中model模塊

圖4 DLV.js中draw模塊

4 數(shù)據(jù)可視化模型應(yīng)用

數(shù)據(jù)可視化平臺(tái)支持多種不同的數(shù)據(jù)類(lèi)型，數(shù)據(jù)來(lái)源主要有兩種方式：從本系統(tǒng)數(shù)據(jù)庫(kù)讀取的數(shù)據(jù)和從外部導(dǎo)入的數(shù)據(jù)，對(duì)于外部使用接口形式導(dǎo)入的數(shù)據(jù)分為靜態(tài)和動(dòng)態(tài)兩種方式。本文以使用接口導(dǎo)入靜態(tài)數(shù)據(jù)為例介紹數(shù)據(jù)可視化模型映射過(guò)程。

使用外部接口API形式導(dǎo)入數(shù)據(jù)及其配置選項(xiàng)后形成的可視化結(jié)構(gòu)如圖5所示，根據(jù)可視化結(jié)構(gòu)類(lèi)型選擇布局方式如圖6右側(cè)布局欄所示。進(jìn)行匹配成功后調(diào)用DVL.layer.setLayer()進(jìn)行布局轉(zhuǎn)換，DVL.layer.setLayer()函數(shù)內(nèi)部調(diào)用DVL.model.change()生成可視化對(duì)象，將可視化對(duì)象作為DVL.draw模塊的輸入，調(diào)用相應(yīng)的圖形繪制函數(shù)生成可視化圖形，圖6描述了使用地理位置圖呈現(xiàn)地區(qū)收入分布；可視化視圖交互中用戶(hù)可以選擇不同的布局方式進(jìn)行空間布局轉(zhuǎn)換生成新的可視化圖形，圖7描述了使用柱狀堆疊圖后呈現(xiàn)的地區(qū)收入統(tǒng)計(jì)情況。

圖5 可視化數(shù)據(jù)接口

圖6 可視化圖形實(shí)例1

圖7 可視化圖形實(shí)例2

5 結(jié) 語(yǔ)

本文首先給出了一種通用的數(shù)據(jù)可視化數(shù)據(jù)結(jié)構(gòu)定義，介紹了數(shù)據(jù)可視化模型中可視化結(jié)構(gòu)映射、可視化空間布局、可視化視圖映射三部分主要內(nèi)容。并基于SpringMVC架構(gòu)對(duì)可視化模型設(shè)計(jì)和借助對(duì)Echarts與D3工具包進(jìn)行封裝與二次開(kāi)發(fā)的插件形成功能豐富的可視化圖形方法，最終生成了通用的面向?qū)ο蠼涌诘目梢暬疻eb平臺(tái)，為數(shù)據(jù)挖掘人員對(duì)挖掘結(jié)果的呈現(xiàn)提供了直觀、生動(dòng)的可視化方式，降低了開(kāi)發(fā)成本，實(shí)現(xiàn)了數(shù)據(jù)可視化的快速生成與傳播?；贓charts和D3開(kāi)發(fā)的可視化插件具有較強(qiáng)的可移植性和可集成性，可高效地應(yīng)用于不同角色、背景的可視化分析平臺(tái)。

雖然數(shù)據(jù)可視化模型提供了通用的可視化方案，涵蓋了大部分的信息類(lèi)型，支持十多種不同的可視化圖形，但是如何進(jìn)一步將不同的圖形進(jìn)行組合從而優(yōu)化對(duì)信息特征和屬性的表現(xiàn)，下一步工作會(huì)結(jié)合實(shí)際的應(yīng)用場(chǎng)景進(jìn)一步優(yōu)化對(duì)可視化圖形的設(shè)計(jì)。

[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] 周寧,楊峰.信息可視化系統(tǒng)的RDV模型研究[J].情報(bào)學(xué)報(bào),2004,23(5):619-624.

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

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

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

[7] 夏治坤.多維信息可視化模型[J].科技情報(bào)開(kāi)發(fā)與經(jīng)濟(jì),2006,16(10):170-172.

[8] 陳先灝,雒江濤.面向電商數(shù)據(jù)的可視化查詢(xún)系統(tǒng)[J].計(jì)算機(jī)系統(tǒng)應(yīng)用,2016(4):123-127.

[9] 賴(lài)曉文,陳啟鑫,夏清,等.基于SVG技術(shù)的電力系統(tǒng)可視化平臺(tái)集成與方法庫(kù)開(kāi)發(fā)[J].電力系統(tǒng)自動(dòng)化,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] 王恬,李書(shū)琴,王志偉.農(nóng)業(yè)信息搜索可視化平臺(tái)研究[J].計(jì)算機(jī)應(yīng)用與軟件,2016,33(3):271-274.

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

[14] 杜一,郭旦懷,陳昕,等.一種模型驅(qū)動(dòng)的可視化生成系統(tǒng)[J].軟件學(xué)報(bào),2016(5):1199-1211.

[15] 孫揚(yáng).多變?cè)W(wǎng)絡(luò)數(shù)據(jù)可視化方法研究[D].國(guó)防科學(xué)技術(shù)大學(xué),2010.

[16] 楊峰,李蔚.信息可視化技術(shù)的分類(lèi)研究[J].圖書(shū)與情報(bào),2007(3):81-85.

[17] 張建軍,劉虎,倪芳英.基于SSH與Highcharts整合架構(gòu)的Web應(yīng)用研究[J].計(jì)算機(jī)技術(shù)與發(fā)展,2013,23(9):245-247.

[18] 楊瑩.基于簡(jiǎn)化光線投射GPU大規(guī)模地形實(shí)時(shí)可視化[J].計(jì)算機(jī)應(yīng)用與軟件,2014,31(6):123-126.

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

[20] 彭國(guó)華,王波興,黃運(yùn)保.輻射流體力學(xué)計(jì)算結(jié)果的可視化處理[J].計(jì)算機(jī)應(yīng)用與軟件,2015,32(4):56-58.

[21] 葛彬,尚建嘎,余芳文,等.一種融合WebGIS和Web3D技術(shù)的實(shí)時(shí)定位系統(tǒng)可視化框架[J].計(jì)算機(jī)應(yīng)用與軟件,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。國(guó)家科技支撐計(jì)劃項(xiàng)目(2014BAK15B01)。宋美娜，教授，主研領(lǐng)域：云計(jì)算與大數(shù)據(jù)。崔丹陽(yáng)，碩士生。鄂海紅，副教授。歐中洪，副教授。