基于D3.js的公安數(shù)據(jù)間關(guān)聯(lián)關(guān)系可視化研究與應(yīng)用

姚礪 潘敏男

摘 要： 隨著中國信息化建設(shè)和國民經(jīng)濟(jì)的不斷發(fā)展，加速了社會(huì)人口的流動(dòng)，同時(shí)公安機(jī)構(gòu)的各個(gè)部門也積累了越來越多的數(shù)據(jù)。目前這些數(shù)據(jù)正以階梯式增長。公安數(shù)據(jù)包含了大量的關(guān)聯(lián)信息，將這些看似分散、雜亂無章的數(shù)據(jù)，以一種直觀、簡明的可視化形式展示出來，能夠提高偵查破案和預(yù)警能力。本文提出的基于D3.js的可視化方案，將合理地整合有效數(shù)據(jù)，并利用相關(guān)算法，實(shí)現(xiàn)關(guān)聯(lián)關(guān)系的可視化展示。

關(guān)鍵詞： 數(shù)據(jù)；關(guān)聯(lián)關(guān)系；可視化；D3.js

Abstract：With the construction of China's informationization and the continuous development of the national economy the flow of social population has been accelerated. At the same time various departments of public security agencies have also accumulated more and more data. At present these data are increasing in the stepwise way.Public security data contains a large amount of related information. Displaying these seemingly scattered and disorganized data in an intuitive and concise visualization can improve the ability of investigation detection and early warning. The visualization scheme based on D3.js proposed in this paper will integrate valid data rationally and make use of related algorithms to visualize the relationship.

Key words： data；relationships；visualization；D3.js

引言

隨著信息技術(shù)的不斷發(fā)展，公安部門積累的數(shù)據(jù)量日趨增多，其中蘊(yùn)含信息量也更加豐富，但是由于未能合理利用這些數(shù)據(jù)，很多數(shù)據(jù)便被長期閑置并且占用了大量的內(nèi)存。

隨著數(shù)據(jù)可視化的不斷普及，對(duì)國內(nèi)公安機(jī)關(guān)的數(shù)據(jù)進(jìn)行可視化，能夠預(yù)防和打擊犯罪、輔助偵查破案、維護(hù)社會(huì)安定[1]。

可視化技術(shù)是一種計(jì)算方法，并且融合了多門優(yōu)秀學(xué)科。該技術(shù)能夠?qū)⒎?hào)描述轉(zhuǎn)換成幾何描述，呈現(xiàn)出期望的計(jì)算結(jié)果和仿真效果[2]。

數(shù)據(jù)可視化經(jīng)歷了復(fù)雜的發(fā)展過程。在以往的數(shù)據(jù)可視化過程中，想要將復(fù)雜的數(shù)據(jù)衍生出多種有意義的數(shù)據(jù)可視化方案，就必須對(duì)包括統(tǒng)計(jì)學(xué)和設(shè)計(jì)學(xué)等多門學(xué)科有足夠的了解和認(rèn)知。但是隨著信息技術(shù)的飛速進(jìn)步，數(shù)據(jù)可視化應(yīng)用的需求量和普及量均已顯出遞增態(tài)勢(shì)，數(shù)據(jù)可視化工具也開始出現(xiàn)并日益發(fā)展起來。數(shù)據(jù)可視化工具經(jīng)歷了從用于單一的專業(yè)技術(shù)并且操作復(fù)雜的工具，演變進(jìn)化為功能集成、能夠用于多個(gè)專業(yè)領(lǐng)域的工具。數(shù)據(jù)可視化工具的優(yōu)勢(shì)在于能夠根據(jù)使用者的不同需求設(shè)計(jì)推出符合用戶需求的數(shù)據(jù)可視化方案[3]。

D3.js是一款優(yōu)秀的數(shù)據(jù)可視化工具，因其參照了Web標(biāo)準(zhǔn)，生成的框架更具表達(dá)性，能夠進(jìn)行生動(dòng)的可視化展示。同時(shí)，D3.js還提供了多種類型的布局函數(shù)和可視化方法的接口。D3.js中的布局函數(shù)能夠根據(jù)特定的需求，將初始數(shù)據(jù)采用合適的布局進(jìn)行重新映射，轉(zhuǎn)換成新的數(shù)據(jù)格式，來滿足特定類型的圖表設(shè)定效果[4]。

1 總體設(shè)計(jì)

1.1 總體功能設(shè)計(jì)思路

該系統(tǒng)分為三大模塊，具體是：綜合查詢模塊、決策分析模塊、GIS分析模塊。針對(duì)這三大模塊，本次研究的總體功能設(shè)計(jì)內(nèi)容的主旨表述可見如下：

（1）可視化展示。將數(shù)據(jù)倉庫中的數(shù)據(jù)通過數(shù)據(jù)抽取、數(shù)據(jù)清洗加工成需要的關(guān)聯(lián)關(guān)系數(shù)據(jù)，接下來通過可視化工具D3.js，轉(zhuǎn)換成可視化圖形呈現(xiàn)出來。

（2）圖形的交互處理。在顯示可視化圖形時(shí)，為了便于用戶更深入地查詢?nèi)嘶蛭镏g的某項(xiàng)關(guān)聯(lián)信息，需要對(duì)可視化圖形增加用戶自定義編輯功能，比如：用戶可以根據(jù)自身需求，刪除或者隱藏與查詢要求關(guān)聯(lián)度不大的連接線和連接點(diǎn)。為了提升系統(tǒng)的人性化設(shè)計(jì)，交互功能還包括：圖形整體或者局部的拖拽、縮放、展開收縮隱藏，以及可選擇的動(dòng)畫效果。

1.2 數(shù)據(jù)可視化相關(guān)概念

1.2.1 關(guān)聯(lián)關(guān)系數(shù)據(jù)

關(guān)聯(lián)關(guān)系數(shù)據(jù)是數(shù)據(jù)的一個(gè)子類。普通數(shù)據(jù)的可視化方法也適用于關(guān)聯(lián)關(guān)系數(shù)據(jù)。但是關(guān)聯(lián)關(guān)系數(shù)據(jù)也有異于普通數(shù)據(jù)的方面，比如：關(guān)聯(lián)關(guān)系數(shù)據(jù)具有統(tǒng)一的數(shù)據(jù)結(jié)構(gòu)和交換格式，可以實(shí)現(xiàn)跨域的數(shù)據(jù)整合與數(shù)據(jù)分析[5]。

1.2.2 數(shù)據(jù)可視化概念

數(shù)據(jù)可視化是信息可視化與和科學(xué)可視化兩大領(lǐng)域的融合。數(shù)據(jù)可視化不僅能夠以圖形的形式展示數(shù)據(jù)內(nèi)容，也能夠通過圖形發(fā)現(xiàn)數(shù)據(jù)中隱藏的新的關(guān)聯(lián)信息。數(shù)據(jù)可視化展示的必須是與主題相關(guān)的信息，因?yàn)檎故镜男畔⒃蕉啵脩臬@取自身需要信息的時(shí)間就越長，這樣不利于數(shù)據(jù)可視化的高效展示[6]。

1.2.3 D3.js介紹

可視化庫D3.js的全稱是數(shù)據(jù)驅(qū)動(dòng)文檔（Data-Driven Documents）。D3.js是一個(gè)JavaScript庫，使用函數(shù)式的JavaScript編程風(fēng)格，可以通過數(shù)據(jù)來操作文檔。并且，還嚴(yán)格遵循Web標(biāo)準(zhǔn)，不依賴于任何框架[7]。

本文采用的是V4版本。相較于之前的版本，V4版本不僅支持SVG，也開始支持Canvas的使用，由于公安數(shù)據(jù)的特殊性，本文采用的是SVG。

SVG是基于可擴(kuò)展標(biāo)記語言（XML）的，可以用來描述二維矢量圖形。SVG具有可伸縮性，對(duì)一幅SVG圖形任意的放大縮小，均不會(huì)丟失精度[8]。SVG提供了良好的動(dòng)畫效果和交互效果，通過定義相應(yīng)的鍵盤事件或者鼠標(biāo)事件，再輔以一定的腳本編程，即可做出用戶需要的效果。

1.3 公安數(shù)據(jù)間關(guān)聯(lián)關(guān)系可視化的實(shí)現(xiàn)框架及流程

根據(jù)數(shù)據(jù)可視化的一般流程，可將框架細(xì)分成4個(gè)模塊，分別是：數(shù)據(jù)導(dǎo)入模塊、算法選擇模塊、數(shù)據(jù)映射模塊和可視化實(shí)現(xiàn)模塊。即根據(jù)數(shù)據(jù)對(duì)象的類型與應(yīng)用需求的特點(diǎn)，確定數(shù)據(jù)內(nèi)容到圖形之間的映射關(guān)系，選擇合適的數(shù)據(jù)可視化工具，實(shí)現(xiàn)可視化[9]。

公安數(shù)據(jù)間關(guān)聯(lián)關(guān)系的可視化系統(tǒng)將在整體上可為三大層次，具體是：數(shù)據(jù)層、映射層、可視化層。這里，關(guān)于本次研究的總體設(shè)計(jì)流程則如圖1所示。

2 數(shù)據(jù)可視化的實(shí)現(xiàn)

在可視化實(shí)現(xiàn)的過程中，數(shù)據(jù)狀態(tài)經(jīng)歷了一系列的變化。存儲(chǔ)在數(shù)據(jù)倉庫中的原始數(shù)據(jù)稱為用戶數(shù)據(jù)，是數(shù)據(jù)的最初狀態(tài)。

接下來，對(duì)數(shù)據(jù)進(jìn)行抽取。首先確定需要的數(shù)據(jù)庫表和數(shù)據(jù)字段，然后在目標(biāo)數(shù)據(jù)庫內(nèi)創(chuàng)建新表存儲(chǔ)數(shù)據(jù)和相應(yīng)的字段，并使用存儲(chǔ)過程進(jìn)行維護(hù)。由于數(shù)據(jù)中存在關(guān)聯(lián)關(guān)系數(shù)據(jù)，就需要根據(jù)這種關(guān)聯(lián)關(guān)系以及數(shù)據(jù)抽取的調(diào)度周期，定時(shí)運(yùn)行存儲(chǔ)過程。數(shù)據(jù)抽取結(jié)束后，再對(duì)數(shù)據(jù)展開清洗，去掉不符合要求的數(shù)據(jù)，留下符合要求的關(guān)聯(lián)關(guān)系數(shù)據(jù)，此時(shí)的數(shù)據(jù)狀態(tài)又發(fā)生了變化，稱為標(biāo)準(zhǔn)數(shù)據(jù)。

根據(jù)用戶的需求，還要將標(biāo)準(zhǔn)數(shù)據(jù)轉(zhuǎn)化為JSON格式。JSON是一種輕量級(jí)的數(shù)據(jù)交換格式，數(shù)據(jù)格式易于解析、易于維護(hù)。JSON格式的兼容性很高，能夠在不同的平臺(tái)之間提供有效的數(shù)據(jù)交換[10]。根據(jù)用戶的具體需求把JSON格式整理成指定的數(shù)組形式用于傳輸存儲(chǔ)，該數(shù)據(jù)將可以直接應(yīng)用于公安數(shù)據(jù)間關(guān)聯(lián)關(guān)系可視化系統(tǒng)中。此時(shí)數(shù)據(jù)狀態(tài)又發(fā)生變化，稱為可視數(shù)據(jù)。

2.1 圖形算法

公安關(guān)聯(lián)關(guān)系數(shù)據(jù)中包含了大量的個(gè)人信息，如：個(gè)人的基本信息、個(gè)人的虛擬身份、個(gè)人的主要行為以及個(gè)人的主要活動(dòng)場所等。當(dāng)然，關(guān)聯(lián)關(guān)系數(shù)據(jù)中隱藏的大量關(guān)聯(lián)關(guān)系也是極具價(jià)值的。如：個(gè)人與高校之間的關(guān)聯(lián)關(guān)系、個(gè)人與涉外領(lǐng)館之間的關(guān)聯(lián)關(guān)系等。

為了更趨高效地實(shí)現(xiàn)可視化，需根據(jù)不同的需求選擇合適的圖形算法。

2.1.1 點(diǎn)值法

可視化系統(tǒng)中需要?jiǎng)?chuàng)建具有關(guān)聯(lián)關(guān)系的人口區(qū)域分布點(diǎn)密度圖，本系統(tǒng)將采用點(diǎn)值法。

利用點(diǎn)值法展示關(guān)聯(lián)關(guān)系人口在地圖中的分布情況。首先，將點(diǎn)權(quán)值的大小進(jìn)行固定，圖中的每一個(gè)子點(diǎn)代表該展示對(duì)象的具體數(shù)值大小，這些子點(diǎn)形狀大小均相同，能夠反映這些人口的空間分布情況以及數(shù)量特征。在整張圖的布局中，通過利用點(diǎn)值法，密度相對(duì)較大的地區(qū)中，各個(gè)子點(diǎn)的展示將不會(huì)出現(xiàn)子點(diǎn)與子點(diǎn)重疊的現(xiàn)象。點(diǎn)權(quán)值的計(jì)算公式如下：

其中，P表示各個(gè)區(qū)域中密度最大的區(qū)域面積，A表示在這個(gè)區(qū)域中制圖對(duì)象的數(shù)量之和[11]。

2.1.2 力布局算法

力布局能夠在粒子級(jí)別下，模擬牛頓運(yùn)動(dòng)方程。在D3.js中，力布局生成了可擴(kuò)展的圖形約束。連接約束是力布局中的一個(gè)重要因素，在連接約束中，有2個(gè)很重要的參數(shù)：連接強(qiáng)度和連接距離。其中，連接距離可以是函數(shù)，也可以是常量。當(dāng)力布局啟動(dòng)時(shí)，就開始連續(xù)不斷地計(jì)算各個(gè)結(jié)點(diǎn)之間的連接距離，并且與期望的連接距離進(jìn)行實(shí)時(shí)比較，然后做出相應(yīng)的調(diào)整。連接強(qiáng)度同樣也可以是函數(shù)或者常量，可以將連接的強(qiáng)度值設(shè)置在0～1之間的范圍內(nèi)。算法設(shè)計(jì)可概述為：首先預(yù)先設(shè)置需要的連接距離、連接強(qiáng)度，接著將各個(gè)結(jié)點(diǎn)連接起來。此處用到的作用力的強(qiáng)度與結(jié)點(diǎn)間的距離是成正比的，與彈簧作用力類似。力布局示例即如圖2所示。

在該部分的布局中，連接度較高的結(jié)點(diǎn)位于布局的中心位置，即為查詢的重點(diǎn)；而連接度較低的結(jié)點(diǎn)分布在中心位置的四周，即為與查詢重點(diǎn)相關(guān)聯(lián)的部分[12]。突出主次關(guān)系，為用戶的可視化查詢提供便利。

2.2 部分效果圖展示

本節(jié)中展示的效果圖，滿足了總體功能設(shè)計(jì)的要求。

2.2.1 個(gè)人信息詳情圖

如圖3所示，這是個(gè)人信息詳情圖。采用餅圖布局，把個(gè)人的詳細(xì)信息分為三大層次。第一層次也是餅圖的最內(nèi)圈，顯示了個(gè)人頭像、姓名、出生年份、常住地址。第二層次也是餅圖的第二圈，顯示了基本信息、虛擬身份、關(guān)系人員等6個(gè)部分。第三層次也是餅圖的最外圈，是在第二圈分塊的基礎(chǔ)上，對(duì)6個(gè)部分提供進(jìn)一步細(xì)分。共分為33個(gè)信息塊。

2.2.2 人物之間的關(guān)系圖

如圖4所示，這是人物之間的關(guān)系圖。將餅圖布局和力布局相結(jié)合，在個(gè)人信息詳情圖的基礎(chǔ)上，擴(kuò)展呈現(xiàn)多個(gè)人之間的關(guān)聯(lián)關(guān)系信息。人物之間通過判斷最外圈之間信息是否有關(guān)聯(lián)關(guān)系，若有，就從中心圓具有關(guān)聯(lián)關(guān)系的結(jié)點(diǎn)處，生成線段，與具有關(guān)聯(lián)關(guān)系的人物圖的中心連接。

3 結(jié)束語

采用了可視化庫D3.js，并研發(fā)提出了基于D3.js的公安數(shù)據(jù)間關(guān)聯(lián)關(guān)系可視化方案，將看似雜亂的數(shù)據(jù)轉(zhuǎn)換成圖形顯示在屏幕上，使公安內(nèi)部人員直觀洞悉、并發(fā)現(xiàn)數(shù)據(jù)背后隱藏的關(guān)聯(lián)關(guān)系，有助于快速精準(zhǔn)地定位犯罪同伙，提升偵查破案的速度，并且能夠增強(qiáng)社會(huì)整體配備的預(yù)警能力和治安管理能力。優(yōu)化可視化算法、加快圖形顯示速度，將是下一步研究的重點(diǎn)。

參考文獻(xiàn)

[1] 李代超，吳升. 面向不同主題的犯罪大數(shù)據(jù)可視分析[J]. 地球信息科學(xué)學(xué)報(bào)，2014，16（5）：735-745.

[2] 李代超. 犯罪信息可視化研究[D]. 福州：福州大學(xué)，2014.

[3] LAHER R. Thoth： Software for data visualization & statistics[J]. Astronomy and Computing，2016 17： 177-185.

[4] 黃冠華，楊鶴標(biāo). 基于D3.js的微博輿情分析可視化研究[J]. 軟件導(dǎo)刊，2016，15（6）：142-144.

[5] 劉竟，孫薇，袁潤. 國內(nèi)關(guān)聯(lián)數(shù)據(jù)研究現(xiàn)狀及趨勢(shì)的可視化分析[J]. 圖書情報(bào)研究，2016，9（2）：70-76.

[6] 張浩，郭燦. 數(shù)據(jù)可視化技術(shù)應(yīng)用趨勢(shì)與分類研究[J]. 軟件導(dǎo)刊，2012，11（5）：169-172.

[7] 權(quán)慶樂，連衛(wèi)民. 對(duì)可視化庫D3.js的應(yīng)用研究[J]. 電子技術(shù)與軟件工程，2014（18）：203.

[8] DAILEY D FROST J STRAZZULLO D. Building Web applications with SVG[M]. USA：Microsoft Press，2012.

[9] 權(quán)鑫. 基于D3.js的數(shù)據(jù)可視化系統(tǒng)框架設(shè)計(jì)與實(shí)現(xiàn)[D]. 北京：北京交通大學(xué)，2016.

[10]SUN Baojun. Comparison and research of JSON and XML[J].Inner Mongolia Science Technology & Economy，2009（12） ：122-126.

[11]STEELE J，ILIINSKY N. 數(shù)據(jù)可視化之美[M]. 北京：機(jī)械工業(yè)出版社，2011.

[12]BOSTOCK M OGIEVETSKY V HEER J. D3： Data-driven documents[J]. IEEE Transactions on Visualization and Computer Graphics 2011 17（12）： 2301-2309.