數(shù)據(jù)可視化技術在Web中的研究及應用

劉長娥

摘要：數(shù)據(jù)可視化將大量數(shù)據(jù)映射成圖形，從而以更加直觀、清晰的表達方式傳遞數(shù)據(jù)信息。該文對Web應用領域中經常用到的幾種典型的數(shù)據(jù)可視化組件進行了深入分析；在歸納總結這些典型組件優(yōu)劣的基礎上，詳細描述了數(shù)據(jù)可視化庫D3，并使用D3實現(xiàn)了某企業(yè)員工人物關系網(wǎng)的數(shù)據(jù)可視化。

關鍵詞：數(shù)據(jù)可視化；Echarts；Highcharcs；D3.js

中圖分類號：TF311 文獻標識碼：A 文章編號：1009-3044（2017）18-0007-02

隨著大數(shù)據(jù)時代的蓬勃發(fā)展，每天都會產生海量數(shù)據(jù)，對數(shù)據(jù)的處理能力和使用僅僅通過單一的文本數(shù)據(jù)的表達方式和分析手段已經不能滿足人們的要求。數(shù)據(jù)可視化技術應運而生，它以人們容易理解和接受的圖形圖像形式直觀地把晦澀難懂的傳統(tǒng)數(shù)據(jù)表達出來，極大地加快了人們對數(shù)據(jù)的吸收、消化能力，提高理解交互力度。

隨著近年來Web應用的快速發(fā)展，數(shù)據(jù)可視化的范圍和能力也在不斷隨著Web的應用而不斷延伸，數(shù)據(jù)可視化技術應用于Web環(huán)境下，必然能夠促進Web應用在傳播大量數(shù)據(jù)、交互速度快等方面有更大的提升，成為目前Web應用領域開發(fā)的熱點。

1 Web應用中數(shù)據(jù)可視化技術

Highcharts圖表組件是一個JavaScript腳本編寫的圖表庫，并且開源和免費。目前Highcharts5.0.7支持面積圖、散點圖、儀表圖、雷達圖、金字塔圖等19種不同類型的圖表。Highcharts適用于多種瀏覽器（包括IE6及以上、Chrome等），并支持對移動端瀏覽器操作。Highcharts是以SVG為底層繪圖語言，它輸出的圖形是矢量圖形，顯示品質高。Highchans擁有完整的實例演示、功能介紹及詳細的API文檔，一般開發(fā)人員非常容易實現(xiàn)，但是，有限的圖表類型及圖表與用戶交互性欠缺是Highcharts不能令人滿意的方面。

Echarts是一個免費開源的可視化圖表組件。Echarts利用輕量級Canvas類庫ZRender繪制數(shù)據(jù)可視化圖表。在處理大數(shù)據(jù)量和3D繪圖方面，Echarts有明顯優(yōu)勢。Echarts兼容所有主流的瀏覽器，包括：IE6及以上、FkeFox等，并對移動端的支持做了優(yōu)化。目前，Echarts3.0擁有柱狀圖、矩形樹圖等19種不同類型的豐富圖表，并且支持圖與圖之間的混搭。從技術看來看，Echarts無法改變圖表的大小，只能縮放顯示。此外，從學習成本來看，Echarts3.0在完善API文檔及增加實例演示方面有了很大改進，但對于普通開發(fā)人員來說不夠全面。

以上這些數(shù)據(jù)可視化組件都是在Web應用中經常用到，并且有一定用戶基礎的。雖然數(shù)據(jù)可視化技術有很多種，Web應用的類別、需求也不盡相同，但對于Web應用既要考慮當前需要，又要考慮對未來業(yè)務需求不斷變化選擇合適的數(shù)據(jù)可視化組件。下文是對數(shù)據(jù)可視化庫D3相關技術的描述及D3在Web應用的實例分析。

2數(shù)據(jù)可視化工具D3的相關技術

D3是一種基于JavaScript庫的可視化數(shù)據(jù)處理技術，代碼開源。它允許綁定任意數(shù)據(jù)到DOM，然后將數(shù)據(jù)驅動轉換應用到文檔中，將數(shù)據(jù)通過使用HTML、SVG和CSS實現(xiàn)可視化展示。D3基于Web標準，兼容IE9及以上的所有主流瀏覽器，支持移動端的縮放和手勢操作。D3支持多種數(shù)據(jù)文件的讀取，如JSON、XML、CSV、HTML等。

D3采用了與網(wǎng)頁開發(fā)常用的iQuery庫相同的鏈式語法，代碼簡潔。

D3基于SVG，在任意縮放、旋轉或改變形狀時，圖形清晰，同時就文件大小來說，SVG文件所需空間小。此外，基于D3提供了大量、豐富的圖形生成器，在SVG上繪制圖形亦將變得非常簡單。

D3中，數(shù)據(jù)轉換與繪制是相互獨立的。一般來說，需要很多數(shù)學算法，才能夠將數(shù)據(jù)變成絢麗多彩的圖表。以繪制餅狀圖為例，一些數(shù)據(jù)可視化庫會提供一個drawPie（）函數(shù)，導人初始數(shù)據(jù)，然后直接將餅狀圖繪制出來。D3提供函數(shù)一個com-putePie（）函數(shù)，先將初始數(shù)據(jù)轉換成繪制餅狀圖所需的數(shù)據(jù)，然后開發(fā)者使用符合業(yè)務需求的方式來繪制餅狀圖。D3中將數(shù)據(jù)轉換和繪制分開，在圖表比較復雜的時候，極大地提高了自由度，甚至D3計算的數(shù)據(jù)可以使用其他的數(shù)據(jù)可視化工具來顯示。

D3擁有豐富的布局，能夠支持各種圖表的制作。D3的布局有餅狀圖（Pie）、弦圖（Chord）、力導向圖（Force）、打包圖（Pack）、分區(qū)圖（Partition）等12個布局。此外，D3還提供了選擇集（select和selectAll）、比例尺（scale）、geo、過渡效果（transi-tion）等豐富的可視化方法接口。

3 D3可視化在人物關系數(shù)據(jù)可視化中的應用

3.1人物關系數(shù)據(jù)的可視化研究

本文對人物關系數(shù)據(jù)的可視化研究是基于數(shù)據(jù)分析軟件，它能夠實現(xiàn)海量多源異構數(shù)據(jù)的集成接人、存儲、分析等功能，支持批量處理、內存計算等計算模式、支持結構化、半結構化、非結構化數(shù)據(jù)混合存儲，有效整合與利用數(shù)據(jù)資源。本文研究的人物關系網(wǎng)絡的數(shù)據(jù)是基于某企業(yè)全體員工的信息，包括：部門、姓名、ID、職務、性別、房間號、座機分機號、照片等，并將人物關系網(wǎng)絡數(shù)據(jù)存儲在數(shù)據(jù)分析軟件的底層支撐圖數(shù)據(jù)庫。本文對人物關系數(shù)據(jù)可視化的研究采用了D3內置的力導向圖布局，其圖形化的表現(xiàn)形式能夠讓企業(yè)員工更加直觀、清晰地了解到企業(yè)內部的人員組織結構。

使用D3數(shù)據(jù)可視化庫對人物關系數(shù)據(jù)可視化是一個持續(xù)的過程。首先，由于可視化庫D3是將內存中的數(shù)據(jù)進行可視化實現(xiàn)，因此要將具體的存儲在數(shù)據(jù)分析軟件底層支撐圖數(shù)據(jù)庫中某企業(yè)員工的基本數(shù)據(jù)信息加載到相關瀏覽器的工作空間中。這其中，某企業(yè)員工的基本數(shù)據(jù)源的JSON格式如下：

{“nodes”：[{“name”：“劉嫦娥”，“id”：“l(fā)iuchange”，“gender”：“女”，“tel”：“5322”，“dept”：“人力資源處”，“l(fā)oca”：“辦公區(qū)1501”，“post”：“普通職工”，“image”：“images/people/liuchange.png”}]，“edges”：[{“source”：0，“target”：1，“relation”：“同事”}]}

然后就是將加載完成的數(shù)據(jù)綁定到相應的關聯(lián)文檔，定義數(shù)據(jù)信息與關系文檔中的文檔元素關聯(lián)原則，確保這兩組數(shù)據(jù)的有效連接，實現(xiàn)數(shù)據(jù)和圖元的映射關系。本文的實例中，就是在最終網(wǎng)頁顯示中的可視化圖表中應綁定某企業(yè)員工的基本數(shù)據(jù)源里的nodes和edges兩組數(shù)據(jù)，即將數(shù)據(jù)信息與圖表中節(jié)點及連線相對應。與此同時整個可視化圖表中有兩類的元素：存在于可視化圖表中的元素和數(shù)據(jù)可視化展示過程中的后臺系統(tǒng)設計參數(shù)。其中，可視化圖表中的元素主要包括節(jié)點、關系連線、節(jié)點文本及節(jié)點間關系的文本，同時基于這類元素數(shù)據(jù)，更加直觀地顯示了最終的可視化結果。數(shù)據(jù)可視化展示過程中的后臺系統(tǒng)設計參數(shù)包括畫布大小、展示數(shù)據(jù)可視化圖形實際區(qū)域大小以及關鍵后臺系統(tǒng)參數(shù)信息。數(shù)據(jù)可視化展示過程中的后臺系統(tǒng)設計參數(shù)信息的存在，使得數(shù)據(jù)可視化圖形信息的真實性和準確性有了極大地提高。

3.2應用結果分析

某企業(yè)員工人物關系數(shù)據(jù)可視化界面如圖1所示。

在界面左側的圖形中，展示的是某企業(yè)人物關系網(wǎng)絡圖。同時基于這一圖形，單擊其中某一位員工照片，即可查找出與這位員工相關的人物關系網(wǎng)絡圖，顯示在界面的右下角，同時這位員工的基本信息顯示在界面的右上角?？梢暬瘓D形的制作和應用能夠最大限度地展現(xiàn)出企業(yè)人物關系網(wǎng)絡、員工基本信息及相關人物關系網(wǎng)絡圖，為企業(yè)管理人員對企業(yè)內部組織結構的管理、企業(yè)整體運行的狀態(tài)、員工信息資源深層次挖掘提供了可靠依據(jù)。

4結束語

本文在總結了Web應用領域中經常用到的幾種典型的數(shù)據(jù)可視化技術的基礎上，對可視化庫D3的基本特性、D3可視化技術在人物關系數(shù)據(jù)可視化應用作了系統(tǒng)的介紹。采用了D3可視化技術后，圖形化的表現(xiàn)形式使用戶更加簡單、清楚地了解到企業(yè)內員工與員工間信息，增強了直觀性。endprint