趙建保+馮開顏

摘 要：互聯(lián)網(wǎng)應(yīng)用終端正從PC端轉(zhuǎn)向移動(dòng)端，移動(dòng)優(yōu)先成為互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)與開發(fā)的準(zhǔn)則。現(xiàn)有可視化系統(tǒng)應(yīng)用終端多依賴于計(jì)算機(jī)操作系統(tǒng)以及插件，難以實(shí)現(xiàn)大數(shù)據(jù)跨平臺(tái)、跨終端的移動(dòng)可視化應(yīng)用。分析了大數(shù)據(jù)處理、可視化算法及庫(kù)、瀏覽器、觸摸交互和響應(yīng)式設(shè)計(jì)5大移動(dòng)可視化關(guān)鍵技術(shù)及挑戰(zhàn)，基于大數(shù)據(jù)處理技術(shù)和HTML5標(biāo)準(zhǔn)提出了移動(dòng)可視化系統(tǒng)架構(gòu)，實(shí)現(xiàn)了大數(shù)據(jù)挖掘和交互式可視化應(yīng)用，可為可視化、數(shù)據(jù)分析、數(shù)據(jù)挖掘、數(shù)字媒體生產(chǎn)提供借鑒參考。

關(guān)鍵詞：數(shù)據(jù)可視化；大數(shù)據(jù)；移動(dòng)終端；HTML5

DOIDOI：10.11907/rjdk.162602

中圖分類號(hào)：TP319

文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1672-7800（2016）012-0172-03

0 引言

第37次《中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》指出，電腦端向手機(jī)端遷移趨勢(shì)明顯，手機(jī)已經(jīng)成為主要上網(wǎng)終端[1]。隨著移動(dòng)互聯(lián)網(wǎng)生態(tài)系統(tǒng)的不斷完善，移動(dòng)智能終端硬件、操作系統(tǒng)、瀏覽器及移動(dòng)網(wǎng)絡(luò)發(fā)展提速，移動(dòng)終端具備了一定的數(shù)據(jù)生成與存儲(chǔ)、數(shù)據(jù)挖掘與分析、數(shù)據(jù)應(yīng)用客戶端等功能，使整合Web技術(shù)創(chuàng)建跨平臺(tái)、跨終端的移動(dòng)可視化成為可能。另一方面，由物聯(lián)網(wǎng)、Web數(shù)據(jù)、社交網(wǎng)絡(luò)、信息化系統(tǒng)源源不斷生成的大數(shù)據(jù)，其數(shù)據(jù)挖掘結(jié)果和數(shù)據(jù)分析依賴于可視化技術(shù)來(lái)實(shí)現(xiàn)輔助數(shù)據(jù)分析和知識(shí)提取?？梢暬瘜⑤斎霐?shù)據(jù)映射為一定的視覺表達(dá)形式，用戶通過(guò)視覺通道從可視化結(jié)果中發(fā)現(xiàn)和提取符合需求的特征和模式，以生成針對(duì)問(wèn)題的假設(shè)，幫助用戶理解數(shù)據(jù)、發(fā)現(xiàn)數(shù)據(jù)特征，進(jìn)而輔助推理決策并進(jìn)行趨勢(shì)預(yù)測(cè)[2]，可視化已經(jīng)成為大數(shù)據(jù)應(yīng)用的關(guān)鍵技術(shù)。IBM和牛津大學(xué)在大數(shù)據(jù)研究報(bào)告中指出，數(shù)據(jù)挖掘、數(shù)據(jù)可視化、預(yù)測(cè)、建模與數(shù)據(jù)優(yōu)化組織是組織的5大數(shù)據(jù)能力[3]。

目前，主流數(shù)據(jù)可視化平臺(tái)大致可分為基于客戶端和基于瀏覽器及插件兩類，兩者都依賴于操作系統(tǒng)及其客戶端運(yùn)行環(huán)境或?yàn)g覽器插件，因而其實(shí)現(xiàn)跨平臺(tái)和移動(dòng)訪問(wèn)需要的軟件移植成本過(guò)于龐大[4]，以往采用VRML、Flash、Silverlight、Java Applet、ActiveX、X3D等技術(shù)的可視化應(yīng)用也面臨同樣問(wèn)題。移動(dòng)可視化已成為計(jì)算機(jī)圖形和可視化領(lǐng)域新的機(jī)遇和挑戰(zhàn)，并面臨著處理能力、并行可視化算法、實(shí)時(shí)處理、異構(gòu)數(shù)據(jù)（如文本、視頻、傳感器數(shù)據(jù)）和人機(jī)交互等技術(shù)挑戰(zhàn)。本文基于大數(shù)據(jù)處理技術(shù)和HTML5標(biāo)準(zhǔn)構(gòu)建了面向移動(dòng)終端的可視化系統(tǒng)，利用大數(shù)據(jù)處理技術(shù)的查詢與數(shù)據(jù)挖掘功能生成可視化數(shù)據(jù)集，利用HTML5 Canvas實(shí)現(xiàn)2D/3D圖形的實(shí)時(shí)繪制，利用觸控交互實(shí)現(xiàn)用戶對(duì)數(shù)據(jù)的操控，利用響應(yīng)式設(shè)計(jì)實(shí)現(xiàn)移動(dòng)終端的適配，從而構(gòu)建適應(yīng)大數(shù)據(jù)、開放、跨平臺(tái)、硬件加速、觸控交互的移動(dòng)可視化應(yīng)用，進(jìn)而推動(dòng)大數(shù)據(jù)、數(shù)據(jù)可視化的實(shí)踐應(yīng)用。

1 移動(dòng)可視化系統(tǒng)架構(gòu)

移動(dòng)可視化處理流程可概述為：執(zhí)行大數(shù)據(jù)檢索或數(shù)據(jù)挖掘，將處理結(jié)果按照數(shù)據(jù)模型輸入到可視化模塊，通過(guò)映射與變換、繪制與渲染生成可視化界面。移動(dòng)可視化系統(tǒng)架構(gòu)如圖1所示[5-6]。

系統(tǒng)基于大數(shù)據(jù)處理技術(shù)和HTML5規(guī)范并參照傳統(tǒng)的B/S模式進(jìn)行設(shè)計(jì)，主要?jiǎng)澐譃?個(gè)子系統(tǒng)：大數(shù)據(jù)處理子系統(tǒng)、Web服務(wù)子系統(tǒng)和移動(dòng)端子系統(tǒng)。大數(shù)據(jù)處理子系統(tǒng)運(yùn)行在云端環(huán)境，由分布式文件系統(tǒng)、分布式計(jì)算框架和數(shù)據(jù)庫(kù)構(gòu)成，可實(shí)現(xiàn)大數(shù)據(jù)的采集、存儲(chǔ)、預(yù)處理、數(shù)據(jù)挖掘和挖掘結(jié)果處理等功能；Web服務(wù)子系統(tǒng)主要提供Web服務(wù)，選用HTTP協(xié)議進(jìn)行通信，使用Ajax異步操作和Web Worker技術(shù)最大限度地降低用戶延遲，提高響應(yīng)時(shí)間和繪制效果，Web服務(wù)器軟件可選用Apache、Nginx和Microsoft IIS技術(shù)搭建Web服務(wù)器；移動(dòng)端子系統(tǒng)由移動(dòng)終端及符合HTML5規(guī)范的瀏覽器構(gòu)成，瀏覽器獲得Web服務(wù)器響應(yīng)的數(shù)據(jù)后，渲染引擎調(diào)用HTML5 Canvas API在線繪制2D/3D影像，再利用HTML5、CSS3、JavaScript 分別實(shí)現(xiàn)Web頁(yè)面的結(jié)構(gòu)、外觀及交互控制功能。

2 關(guān)鍵技術(shù)

移動(dòng)可視化生態(tài)系統(tǒng)由可視化用戶、可視化應(yīng)用開發(fā)者、Web設(shè)計(jì)開發(fā)者、瀏覽器廠商、第三方可視化庫(kù)及工具提供者共同構(gòu)成。移動(dòng)可視化綜合運(yùn)用了云計(jì)算與大數(shù)據(jù)、數(shù)據(jù)分析、Web技術(shù)、計(jì)算機(jī)圖形學(xué)、圖像處理、人機(jī)交互、通信等技術(shù)，其關(guān)鍵技術(shù)有大數(shù)據(jù)處理、可視化算法及庫(kù)、瀏覽器、觸控交互與響應(yīng)式設(shè)計(jì)。

2.1 大數(shù)據(jù)處理

大數(shù)據(jù)具有體量大（Volume）、速度快（Velocity）、模態(tài)多（Variety）、真實(shí)性（Veracity）和價(jià)值大（Value） 5大特征。體量大可通過(guò)擴(kuò)展計(jì)算機(jī)系統(tǒng)來(lái)緩解，而快速及時(shí)響應(yīng)、數(shù)據(jù)類型多樣和數(shù)據(jù)的不確定性是大數(shù)據(jù)處理的真正難題，直接制約著大數(shù)據(jù)查詢及挖掘的實(shí)用性和實(shí)效性?；ヂ?lián)網(wǎng)巨頭推出了各種不同類型的大數(shù)據(jù)處理系統(tǒng)：批量數(shù)據(jù)處理系統(tǒng)主要采用Apache基金會(huì)的分布式系統(tǒng)基礎(chǔ)架構(gòu)Hadoop；流式數(shù)據(jù)處理系統(tǒng)有Twitter的Storm、Facebook的Scribe、Linkedin的Samza、Cloudera的Flume、Apache的Nutch；交互式數(shù)據(jù)處理系統(tǒng)有Berkeley的Spark系統(tǒng)與Google的Dremel系統(tǒng)；圖數(shù)據(jù)處理系統(tǒng)有Google的Pregel系統(tǒng)，Neo的Neo4j系統(tǒng)和Microsoft的Trinity系統(tǒng)。這些基于開源系統(tǒng)Hadoop的專用化系統(tǒng)主要解決了數(shù)據(jù)處理引擎專用化、數(shù)據(jù)處理平臺(tái)多樣化和數(shù)據(jù)計(jì)算實(shí)時(shí)化的問(wèn)題，一定程度上促進(jìn)了深度學(xué)習(xí)、知識(shí)計(jì)算、可視化等大數(shù)據(jù)分析技術(shù)的發(fā)展。未來(lái)大數(shù)據(jù)處理系統(tǒng)仍將面臨數(shù)據(jù)復(fù)雜性、計(jì)算復(fù)雜性和系統(tǒng)復(fù)雜性的挑戰(zhàn)[7]。

2.2 可視化算法及庫(kù)

可視化開發(fā)工具可分為應(yīng)用程序開發(fā)工具和Web應(yīng)用開發(fā)工具。應(yīng)用程序開發(fā)工具有VTK、ITK、ParaView、Prefuse、Flare、Processing和Tulip等，多數(shù)基于OpenGL封裝和支持，采用C++開發(fā)，可跨平臺(tái)運(yùn)行；Web應(yīng)用開發(fā)工具主要有HTML5 Canvas、SVG和Flash三種。HTML5 Canvas元素利用2D繪圖環(huán)境，調(diào)用JavaScript API在線繪制點(diǎn)、線、矩形、多邊形、漸變、文本等2D圖形，常用的Canvas 2D標(biāo)準(zhǔn)繪圖API有Processing.js、Paper.js、VVVV.js。WebGL是基于OpenGL ES2.0制定的Canvas 3D繪圖環(huán)境，內(nèi)部實(shí)現(xiàn)利用 GLSL shader 語(yǔ)言對(duì)頂點(diǎn)和片段進(jìn)行控制，以實(shí)現(xiàn)3D圖形的硬件加速，降低繪制及渲染延時(shí)。常用的WebGL標(biāo)準(zhǔn)繪圖API有GLGE、CopperLicht、SceneJS、SpiderGL、Three.js、C3DL和Google O3D[8]。Google Chrome、Safari、Mozilla Firefox等瀏覽器支持WebGL 1.0規(guī)范。HTML5 Canvas具有開放性、免插件、跨平臺(tái)、硬件加速等優(yōu)勢(shì)。SVG （Scalable Vector Graphics）是HTML5 Canvas的替代技術(shù)，使用 XML定義矢量圖形，SVG比JPEG和GIF圖像尺寸更小，可任意縮放和高質(zhì)量打印，文本可選與可搜索等優(yōu)勢(shì)?；赟VG技術(shù)的常用標(biāo)準(zhǔn)繪圖API有D3.js、Raphal、Google Charts。而基于Flash技術(shù)的可視化算法及庫(kù)開發(fā)的可視化應(yīng)用由于依賴于Adobe Flash Player插件且得不到蘋果公司的官方支持，應(yīng)用前景遠(yuǎn)不及HTML5。

2.3 瀏覽器

移動(dòng)可視化應(yīng)用需實(shí)現(xiàn)跨平臺(tái)和跨終端訪問(wèn)，支持各種品牌的移動(dòng)終端設(shè)備，擺脫對(duì)底層軟硬件的依賴。移動(dòng)Web瀏覽器無(wú)疑是移動(dòng)可視化應(yīng)用的最佳運(yùn)行環(huán)境，主要分為內(nèi)置瀏覽器、可下載瀏覽器和WebView三種類型。支持移動(dòng)數(shù)據(jù)可視化的瀏覽器需具備支持W3C定義的HTML5規(guī)范，并支持Canvas 2D圖形、圖像導(dǎo)出、WebGL 3D圖形、SVG解析、動(dòng)畫、音視頻解碼與控制、表單、JSON、AJAX通信等關(guān)鍵功能[9]。由于蘋果iOS操作系統(tǒng)和Android操作系統(tǒng)的絕對(duì)領(lǐng)先壟斷地位，使Safari和Chrome成為主流的移動(dòng)瀏覽器。

2.4 觸控交互

可視化交互設(shè)計(jì)與用戶體驗(yàn)密切相關(guān)，設(shè)計(jì)者必須確保觸控交互操作的直觀性、易理解性和易記憶性，引導(dǎo)分析者把關(guān)注點(diǎn)聚焦于分析任務(wù)，而不必過(guò)多關(guān)注實(shí)現(xiàn)任務(wù)的具體操作方式和流程。可視化系統(tǒng)有選擇、導(dǎo)航、重配、編碼、抽象/具象、過(guò)濾和關(guān)聯(lián)7大類交互任務(wù)，以實(shí)現(xiàn)縮放、平移、旋轉(zhuǎn)滾動(dòng)、數(shù)據(jù)篩選、可視化映射變量（點(diǎn)、線、面、形狀、位置、大小、顏色、紋理、方向等）控制、數(shù)據(jù)映射方式控制、細(xì)節(jié)控制等任務(wù)，系統(tǒng)根據(jù)反饋生成新的可視化結(jié)果。以鍵盤、鼠標(biāo)作為主要手段的交互技術(shù)無(wú)法滿足用戶與移動(dòng)終端設(shè)備之間的交互需求，多點(diǎn)觸控（MultiTouch）成為移動(dòng)終端環(huán)境下最主要的交互技術(shù)。它能夠同時(shí)辨識(shí)多個(gè)接觸點(diǎn)的數(shù)量和位置，允許用戶同時(shí)通過(guò)多個(gè)接觸點(diǎn)與系統(tǒng)進(jìn)行全屏交互，減少了對(duì)交互控件的依賴，簡(jiǎn)化了界面設(shè)計(jì)工作量。觸控交互方式主要有觸摸、手勢(shì)、鍵盤3種。觸摸事件有拍擊（Tap）、滑動(dòng)（Swipe）、捏合（Pinch）、拖曳（Drag）、旋轉(zhuǎn)（Rotate）、搖動(dòng)（Shake）。手勢(shì)事件被定義為兩個(gè)或多個(gè)觸摸事件同時(shí)發(fā)生，也可以通過(guò)定位、陀螺儀、光線感應(yīng)器、壓力感應(yīng)器等各種傳感器創(chuàng)建自然交互。張鋒[10]提出多點(diǎn)觸控系統(tǒng)除支持單用戶的單、雙手操作外，未來(lái)還能實(shí)現(xiàn)多人共享交互設(shè)備，提供用戶場(chǎng)景中對(duì)界面操作的對(duì)等性和公平性；陳亮[11]在博士論文中指出，在設(shè)備背后交互（Back-of-device Interaction）技術(shù)中，用戶可利用各種安裝在設(shè)備背后的輸入裝置（如攝像頭、觸控面板、物理鍵盤等）與設(shè)備進(jìn)行交互，在某些特殊的用戶界面中（如交互控件較小或?qū)?zhǔn)確率要求高的情況），可以作為前端觸控技術(shù)的輔助技術(shù)，從而改善或解決遮擋（Occlusion Problem）和“胖手指”問(wèn)題（Fat Finger Problem），增強(qiáng)用戶界面的可用性。觸控交互設(shè)計(jì)需要注意的問(wèn)題是：遵循手勢(shì)操作與任務(wù)統(tǒng)一的規(guī)范和用戶操作習(xí)慣，避免手勢(shì)與任務(wù)之間形成多種映射；引導(dǎo)用戶熟悉系統(tǒng)手勢(shì)設(shè)計(jì)與任務(wù)的對(duì)應(yīng)關(guān)系；受觸摸屏靈敏度、用戶手勢(shì)操作的熟練程度影響，手勢(shì)操作的精準(zhǔn)度不高，會(huì)導(dǎo)致手勢(shì)操作未被觸發(fā)、誤操作、與預(yù)期結(jié)果相悖等。

2.5 響應(yīng)式設(shè)計(jì)

響應(yīng)式設(shè)計(jì)的核心技術(shù)包括媒體查詢、流動(dòng)布局和彈性視覺媒體等。媒體查詢依據(jù)獲取的設(shè)備特性（如媒體類型、屏幕寬度等）來(lái)確定內(nèi)容組織、數(shù)據(jù)加載、樣式與資源選用；流動(dòng)布局能根據(jù)當(dāng)前設(shè)備的有效布局尺寸生成版面；彈性視覺媒體按照當(dāng)前版面區(qū)塊容器的寬高動(dòng)態(tài)調(diào)整視覺媒體大小。響應(yīng)式Web設(shè)計(jì)有效解決了可視化應(yīng)用與不同移動(dòng)終端設(shè)備的適配問(wèn)題，實(shí)現(xiàn)“一源多屏”，減少可視化Web設(shè)計(jì)和開發(fā)的工作量。在項(xiàng)目實(shí)踐中可以引用Twitter Bootstrap、Foundation等前端框架提高開發(fā)效率。響應(yīng)式設(shè)計(jì)存在的問(wèn)題包括：可視化應(yīng)用的移動(dòng)終端媒介查詢的斷點(diǎn)設(shè)置、不同布局視圖下的媒體選用與優(yōu)化、前端開發(fā)復(fù)雜度和成本控制、桌面端和移動(dòng)端交互的差異化及CSS代碼（甚至圖片資源文件）的網(wǎng)絡(luò)優(yōu)化等[12]。

3 結(jié)語(yǔ)

在大數(shù)據(jù)和移動(dòng)優(yōu)先設(shè)計(jì)的背景下，移動(dòng)可視化既面臨大數(shù)據(jù)處理中響應(yīng)速度、數(shù)據(jù)異構(gòu)和不確定性、數(shù)據(jù)挖掘等方面的挑戰(zhàn)，又面臨著移動(dòng)終端受限的處理能力、存儲(chǔ)能力、顯示能力和網(wǎng)絡(luò)可靠性等移動(dòng)計(jì)算環(huán)境的挑戰(zhàn)。為此，分析了移動(dòng)可視化的大數(shù)據(jù)處理、可視化算法及庫(kù)、瀏覽器、觸摸交互和響應(yīng)式設(shè)計(jì)5大關(guān)鍵技術(shù)，然后基于大數(shù)據(jù)處理技術(shù)和HTML5技術(shù)提出了移動(dòng)可視化系統(tǒng)架構(gòu)。該架構(gòu)由大數(shù)據(jù)處理子系統(tǒng)、Web服務(wù)子系統(tǒng)和移動(dòng)端子系統(tǒng)構(gòu)成，較好地解決了移動(dòng)可視化和大數(shù)據(jù)挖掘的難題。移動(dòng)可視化未來(lái)將呈現(xiàn)以下趨勢(shì)：①移動(dòng)終端功能多元化。隨著移動(dòng)計(jì)算環(huán)境的增強(qiáng)，未來(lái)移動(dòng)終端的計(jì)算能力、存儲(chǔ)能力、顯示能力和交互能力會(huì)更加強(qiáng)大，能夠執(zhí)行數(shù)據(jù)挖掘、數(shù)據(jù)存儲(chǔ)以及更復(fù)雜的可視化任務(wù)，更多地執(zhí)行現(xiàn)有大數(shù)據(jù)處理子系統(tǒng)的任務(wù)；②大數(shù)據(jù)處理專用化。商業(yè)公司和開源社區(qū)將適應(yīng)業(yè)務(wù)需求，基于Hadoop云計(jì)算基礎(chǔ)架構(gòu)開發(fā)專業(yè)化系統(tǒng)，解決數(shù)據(jù)處理引擎專用化、數(shù)據(jù)處理平臺(tái)多樣化和數(shù)據(jù)計(jì)算實(shí)時(shí)化的問(wèn)題；③可視化算法及庫(kù)方面，可視化算法為適應(yīng)特定應(yīng)用領(lǐng)域?qū)⒏訉Ｓ没?，為適應(yīng)實(shí)時(shí)應(yīng)用可視化算法趨向并行化，同時(shí)可視化類庫(kù)將更加具有多樣性、通用性和易用性。

參考文獻(xiàn)：

[1] 中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心.中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告[EB/OL].[2016-2-5].http：//www.cnnic.net.cn/hlwfzyj/hlwxzbg/201601/P020160122469130059846.pdf.

[2] 馬昱欣，曹震東，陳為.可視化驅(qū)動(dòng)的交互式數(shù)據(jù)挖掘方法綜述[J].計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào)，2016，28（1）：1-8.

[3] Gartner、IBM和Teradata發(fā)布大數(shù)據(jù)報(bào)告[EB/OL].http：//tech.ccidnet.com/art/40921/20121030/4408865_1.html，2012-11-20.

[4] 陳為，沈則潛，陶煜波，等.數(shù)據(jù)可視化[M].北京：電子工業(yè)出版社，2013：618.

[5] 雷輝，趙穎，王銘軍，等.面向?yàn)g覽器的醫(yī)學(xué)影像可視化系統(tǒng)[J].中國(guó)圖象圖形學(xué)報(bào)，2015，20（4）：0491-0498.

[6] MUZAMMIL KHAN， ALI SHAH， ISRAR AHMAD.Framework for interactive data mining results visualization on mobile devices[J].International Journal of Data Base and Application ，2014，7（4）：23-36.

[7] 程學(xué)旗，靳小龍，王元卓，等.大數(shù)據(jù)系統(tǒng)和分析技術(shù)綜述[J].軟件學(xué)報(bào)，2014，25（9）：1889-1908.

[8] [美]STEVE FULTON， JEFF FULTON.HTML5 Canvas開發(fā)詳解[M].任旻，羅澤鑫，譯.北京：人民郵電出版社，2014：564.

[9] Htmltest.How well does your browser support html5[EB/OL].[2016-3-7].http：//html5test.com/.

[10] 張鋒， 陳碩.多點(diǎn)觸控交互方式的回顧與展望[J].人類工效學(xué)，2010，16（4）：76-78.

[11] 陳亮.手持設(shè)備背后交互技術(shù)可用性研究[D].成都：電子科技大學(xué)，2015.

[12] [美]卡德萊茨.響應(yīng)式Web設(shè)計(jì)實(shí)踐[M].侯鴻儒，譯.北京：人民郵電出版社，2013.

（責(zé)任編輯：黃 健）