移動互聯網下數據可視化及應用

摘要：隨著移動帶寬技術的發展，更多的傳感設備、移動終端隨時隨地地接入網絡。針對移動終端設備下的數據可視化是可視化技術在移動終端應用中提出的一種新的數據分析和處理技術。本文介紹了數據可視化的概念以及模型，提出了一種移動終端下的具有交互功能的數據可視化回路模型，并給出了電子商務數據在移動終端的可視化的應用。實驗表明該數據可視化技術借助圖形化手段，會生成直觀的比較結果，通過按需加載的模式能夠顯著的提升性能，提高用戶的體驗指數.

關鍵詞：移動互聯網；數據可視化；AMD異步加載技術；信息可視化

中國分類號：TP391 文獻標識碼：A

Abstract： With the rapid promotion of the mobile bandwidth technology， more sensing devices and mobile terminals gain access to networks. The data visualization of the mobile terminal equipment is the new technology proposed in mobile terminal applications for data analysis and processing by visualization technology.

This paper introduces the concept of data visualization and models. It has put forward a kind of implementation pattern about data visualization in the mobile terminal and e-commerce data are given in the visualizationof the application of the mobile terminal. The experiment shows that it will generate the intuitive comparison results with the help of a graphical method in the mobileInternet. Through uploading the model， it can significantly improve performance and enhance users experience index.

Keywords： Mobile Internet； Data Visualization； Asynchronous Module Definition； Information Visualization

0 引言

早在20世紀70年代，桌面操作系統、計算機圖形學、圖形顯示設備、人機交互等技術的發展推啟了人們對移動互聯網下數據可視化技術應用的現實研究風潮。處理范圍從簡單的統計數據擴展到更為復雜的網絡層次、數據庫、文本等非結構化與高緯度數據[1]。1986年10月，在美國國家科學基金會的“圖形圖像處理和工作站”討論會上，提出了“科學計算可視化”（Visualizationin Sciencific Computation，ViSC）[2]。此后，國內的各大科研單位開始在數據可視化領域投入了可觀的精力，為應用領域認識和使用數據可視化奠定了堅實的基礎。近年來，在我國互聯網的發展過程中，人們迫切希望能夠隨時隨地從互聯網中獲取信息和服務，移動互聯網[3]應運而生并在移動網絡[4]、移動游戲、移動即時通信[5]、移動購物、移動支付[6]等方面迅猛發展。然而數據可視化在移動端的發展并不順利，張青等人在文獻[7]中提出移動互聯網端的可視化具有重大的信息價值但卻仍然存在以下問題：（1）如何提供給用戶更好的交互方式；（2）如何為決策提供更為直觀的依據；曾悠在文獻[8]中描述了現階段可視化存在的問題：如何實現高性能的海量數據展示，減少用戶的等待時間和應該運用什么樣的繪圖技術；吳佳鑫 在 文獻[9]中提出早期數據可視化模型主要以流水線模型為主，具體描述了從數據空間到可視空間的映射，包含串行處理數據的各個階段：數據分析、數據過濾[10]、數據可視化映射和繪制，但缺少了用戶的交互功能。鑒于此，本文首先提出了一種將流水線改進成回路的數據可視化模型，增加了用戶和數據交互的功能；其次分析了Canvas繪圖技術的優缺點，并針對移動平臺，采用一種基于Canvas的數據驅動可視化工具echart.js，遵循AMD（Asynchronous Module Definition）異步加載規范，傳遞JSON（JavaScript Object Notation）數據，實現圖形界面的按需加載。該模式具有更強的可擴展性和可維護性，能夠顯著提升性能。

1相關技術

數據可視化是指利用人眼的感知能力對數據進行交互的可視表達以增強認知的技術，能夠將不可見或難以直接顯示的數據轉化為可感知的圖形、符號、顏色、紋理等增強數據的識別效率傳遞有效信息[8]。數據可視化涉及到數據可視化模型以及與其相關的一系列技術。

1.1數據可視化中的流水線模型

早期的數據可視化主要是以流水線模型為主，重點描述了從數據空間到可視空間的映射，包含串行處理數據的各個階段：數據分析、數據過濾、數據可視化映射和繪制。該流水線實際上是數據處理和圖形繪制的嵌套組合[11]。如圖1所示。

1.2 Canvas繪圖技術

Canvas最初是由蘋果公司內部使用自己的Mac OS X Webkit引擎進行設計、并組織推出的，蘋果大力推廣使用HTML5，促進了Canvas的發展和應用[12]。HTML5提供了畫布元素，同時HTML5定義了很多API支持腳本化客戶端繪圖操作。Canvas標簽和 SVG 以及 VML 之間的一個重要的不同就在于， SVG 和 VML 使用一個 XML 文檔來描述繪圖。SVG 繪圖很容易編輯，只要從其描述中移除元素即可做到。而Canvas則是 通過 JavaScript 來繪制 2D 圖形的。標簽中移除元素，往往需要擦掉繪圖，并進行重新繪制。而Canvas以位圖為基礎，決定了其在綻放處理方面要比SVG的適用性略差。Canvas不允許JavaScript使用其本身之外的任何API來執行外部操縱。另外，盡管改善其特性的工作正在進行中，但是Canvas適用于圖像操縱，并且基于其不訪問DOM的特點，所以對于在網頁上各個方位快速移動多個項目，Canvas表現出可見的良好性能，這即使得其作用將愈顯突出。

1.3esl加載器技術

esl是一款瀏覽器端、符合AMD（Asynchronous Module Definition）的標準加載器， 完整描述了模塊的定義，依賴關系，引用關系以及加載機制，適合現代Web瀏覽器端應用的入口與模塊管理。

AMD（ Asynchronous Module Definition）是一種用于動態加載JavaScript代碼的API 規范。 該規范提出了一種基于模塊的異步加載JavaScript 代碼的機制，通過將代碼封裝進一個個模塊，即取得模塊的引用[11]。

1.4JSON數據格式

JSON數據格式是一個無序的“名稱/值”對集合。一個對象以“{”開始，“}”結束，每個“名稱”后跟一個“：”，“名稱”使用“”括起來，“名稱/值”之間使用”，”將其分隔。

下面是一個簡單的示例：

var user = {“username”： “Jim”，”age”： 25，”sex”：”male”}；

這個對象包含了3個元素username、age、sex，其對應的值分別是Jim、25、male。JSON作為一種輕量級的數據交換格式，不僅具有更輕巧、更友好的Web客戶端的格式，同時易于機器生成和解析，這些特性使得JSON成為理想的數據交換格式，適用于服務器與移動端的交互。

2數據可視化回路模型的研究

2.1數據可視化回路模型

針對于1.1節中“數據可視化流水線模型”缺少了用戶交互功能，故本文在此提出了一種數據可視化回路模型。模型將流水線改進成回路后，用戶的交互可以出現在流程的任何階段，如圖2所示。

該數據可視化回路模型的結構分為兩大類：可視化呈現和用戶交互。

首先，可視化呈現的過程可詳述如下：

（1）選擇呈現維度（select）。了解與選擇可視化呈現的數據集。

（2）數據的預處理（Pre-processing）。對輸入數據集進行預處理，消除錯誤，彌補缺失的信息。

（3）抽取對應的數據集（Data mining）。在海量、清晰的數據集中抽取相對應的數據集，形成可視數據。

（4）利用canvas、SVG等進行繪圖（Plotting）。將數據進行分析繪制形成相應的可視化視圖，呈現給用戶。

其次，關于交互的過程則給出如下描述：

（1）用戶可通過UI界面進行數據的更改，形成新的數據進行可視化操作。

（2）用戶可對數據進行過濾、顏色、大小、布局進行更改，形成新的可視化圖形。

（3）用戶可以更改繪制器，進行新的數據可視化操作。

2.2移動互聯網下數據可視化交互模式

本數據可視化回路模型采用異步加載的交互模式如圖3所示。

由圖3可知，該模式是基于數據驅動的。實現中，主要依靠服務器提供相關的數據，通過internet向客戶端傳輸指定的JSON數據。當手機瀏覽器接收到服務器端傳來的JSON數據后，即通過esl.js按需加載echart-bar.js生成柱狀可視圖，同時一并按需加載echart-line.js生成折線數據可視圖。利用如上的按需加載特性，服務器端傳來的JSON數據將可渲染出指定圖形，從而能夠顯著提升性能。esl.js加載代碼如下：

require（[

'echarts'，

'echarts/chart/line'，

'echarts/chart/bar'

]）

3.移動互聯網下數據可視化應用

3.1 canvas數據格式

本應用根據2014年5～10月淘寶天貓的銷售信息數據，包含男裝、女裝、童裝、內衣、家紡等數據。首先定義數據集對象和數據化對象，數據集對象是指所有維度的可視化對象接收的數據；數據化對象則表示了指定維度的數據對象。將數據集對象過濾抽取出數據化對象，完成在瀏覽器中的圖形渲染，得到數據可視化結果。可視化對象由多個Canvas組件構成，考慮到代碼重用性，即根據可視化圖形的不同Canvas組件定義不同的模塊，模塊分為接收數據Canvas組件和不接收數據的Canvas組件兩種，通過對固定組件進行不同組合，可以得到多樣的數據可視化結果。

對于不同模塊圖形的渲染，可以不局限于使用每一Canvas組件，考慮到Canvas性能和esl.js按需加載的特性，可以選擇適合的、且所需的echarts圖表在移動端渲染可視化要求涉及的圖形界面。

數據集對象需要完成對數據源的預處理，從服務器端返回的數據源一定是JSON格式數據，數據集對象則需要提供特定的API構造成可視化對象option，并調用echarts指定方法進行圖像的渲染。可視化對象數據的定義格式如下：

var option = {

title ： {

text： '14年5月至10月'，

subtext： '淘寶天貓部分家紡用品銷售額'

}，

legend： { data：['水星家紡'，'富安娜'] }，

calculable ： true，

xAxis ： [{

type ： 'category'， boundaryGap ： false，

data ： ['5月'，'6月'，'7月'，'8月'，'9月'，'10月']

}]，

yAxis ： [{

type ： 'value'，

axisLabel ： {

formatter： '{value}萬元'

}，

splitNumber：5

}]，

series ： [{

name：'水星家紡'，

type：'line'，

data：[5269， 4819， 3171， 3720， 4868， 4759]，

}，

{

name：'富安娜'，

type：'line'，

data：[3417， 5399， 3813， 5004， 6638， 8359]，

}

]}；

其中{}表示對象，[]表示數組，相應的模塊并非全部需要，可以按照自身需求設計符合期望的可視化產品。

3.2移動互聯網下數據可視化的實現

文字描述較為抽象，而圖形圖像的展示相對來說要更為生動形象、直觀。通過數據可視化將數據進行更加清晰的站線，有效地傳遞信息，幫助用戶從中發現關系、規律、趨勢。本文基于echarts.js提供了豐富的Canvas類庫，將數據的格式封裝到option對象中，調用echart.js類庫中的setoption（）方法進行指定數據可視化的渲染。同時將電子商務的部分數據進行可視化分析處理，其中一組結果示例如圖5所示。通過數據的橫向和縱向比較，可以明白看出電子商務發展狀況的總體趨勢。從折線圖中就已真實反映出：富安娜家銷售金額在5～10月有大幅度的增長，水星家紡5～10月銷售金額有小幅的下降，夢潔家紡、恒源祥多喜愛、北極熊家紡5～10月份銷售金額在2000萬元左右，表現平穩。數據可視化目標就是讓用戶和系統之間可以進行和實現交互，echarts.js作為一個優秀的可視化工具，提供了一套對數據交互的事件，當用戶點擊數據視圖按鈕時將可直接呈現可視化背后的數據，如圖6所示。通過將數據呈現給用戶，用戶可對這些數據進行修改，而后進入新的一輪的數據可視化渲染，從而大大提升了用戶的體驗指數。

4結束語

在移動互聯網下數據可視化的發展是可視化研究領域的技術關注重點，本文提出了一種輕量級JSON數據傳輸，按需異步加載模式應用到移動互聯網中，對性能的提升具有顯著的效果。移動互聯網下的數據可視化作為一種新興技術正在蓬勃發展，并與虛擬現實技術、計算機動畫技術、人工智能、數據挖掘、數字地球、經濟趨勢，甚至與人類基因組計劃等誘人的前沿學科領域都有密切的聯系。如何有效處理和解釋這些包含豐富信息的海量數據是學界目前面臨的巨大挑戰，同時，這其中也蘊含這數據可視化技術所呈現給未來研究的艱巨卻矚目的成就及應用前景[13]。

參考文獻：

[1]HABER RB，MCNABB DA.Visualization idioms：A conceptual model for scientific Visualization systems[C]//Visualization in Scientific Computing，[S.l.]：IEEE，1990：74-93.

[2]CHEN Wei，DING Ziang，ZHANG Song，et al.A Novel Interface for interractive exploration of DTI fibers[J].IEEE Transations on Visualization and Computer Graphics，2012，15（6）：1433-1440.

[3]王文宇，劉玉紅. 移動互聯網終端安全分析與研究[J].計算機安全，2011（12）：21-23.

[4]郝龍. 移動網絡中即時通信業務特點的研究及端到端的優化[D].北京：北京郵電大學， 2012：4-5.

[5]T.Munzner，A nested model for visualzation design and valization[J].IEEE TransationVisualization and Computer Graphics， 2009，15（6）：921-928.

[6]謝雪梅，高艷苗. 用戶移動支付行為習慣成因研究[J].北京郵電學報（社會科學版）， 2013， 15（5）：33-37.

[7]張青，陶彩霞，陳翀. 移動互聯網數據可視化技術及應用研究[J]. 電信科學， 2014， 30（10）：8-14.

[8]吳佳鑫. Web環境下信息可視化模型研究[D]. 武漢：武漢大學，2009：23-24.

[9]楊海霞. 基于改進數據過濾算法的異構數據庫優化挖掘技術[J]. 科技通報，2013 （6）：125-127.

[10]曾悠. 大數據時代背景下的數據可視化概念研究[D]. 杭州：浙江大學，2014.

[11]劉大海. 海量數據可視化方法的研究[D]. 天津：天津大學 ，2014.

[12]朱文. 基于HTML5Canvas技術的在線圖像處理方法的研究[D]. 廣州：華南理工大學， 2013.

[13]賀全兵. 可視化技術的發展及應用[J].中國西部科技，2012（4）：4-7.