金昱成 張 東

?

D3的數(shù)據(jù)可視化與應(yīng)用

金昱成 張 東

華東師范大學(xué) 經(jīng)濟(jì)與管理學(xué)部，上海 200241

數(shù)據(jù)可視化自20世紀(jì)50年代誕生以來(lái)，其概念與實(shí)現(xiàn)平臺(tái)都得到與時(shí)俱進(jìn)的擴(kuò)充。當(dāng)今信息時(shí)代和大數(shù)據(jù)時(shí)代的到來(lái)又給可視化注入了新的元素。因此，以追溯數(shù)據(jù)可視化歷史、分析其技術(shù)含量為背景，著重介紹D3這一可視化平臺(tái)，歸納出D3繪制五種圖表的強(qiáng)大功能，用具體的條形圖繪制案例說(shuō)明D3的語(yǔ)法要求與使用方法，并通過(guò)交叉篩選器展示D3的廣泛實(shí)用性。由此認(rèn)為，D3作為一種數(shù)據(jù)可視化的重要實(shí)現(xiàn)平臺(tái)，具有極大的挖掘空間。

數(shù)據(jù)可視化；D3;可視化應(yīng)用；可視化工具

1 數(shù)據(jù)可視化與D3

數(shù)據(jù)可視化（Data Visualization）是以依據(jù)某種概要形式抽提出來(lái)的信息為基礎(chǔ)的關(guān)于數(shù)據(jù)視覺(jué)表現(xiàn)形式的研究。這一概念可以追溯到20世紀(jì)50年代的計(jì)算機(jī)圖形學(xué)領(lǐng)域，并且伴隨著其平臺(tái)不斷深入擴(kuò)展，應(yīng)用領(lǐng)域不斷拓寬，可視化表現(xiàn)形式也不斷深化。實(shí)時(shí)動(dòng)態(tài)可視化圖表和友好的用戶交互可視化也使得該項(xiàng)技術(shù)在統(tǒng)計(jì)學(xué)領(lǐng)域流行起來(lái)。由于逐漸滲入到不同學(xué)科領(lǐng)域，其地位也逐步提升。當(dāng)今，在大數(shù)據(jù)與可視化交融的年代，鋪天蓋地的數(shù)據(jù)量為數(shù)據(jù)可視化提供了新的契機(jī)，出現(xiàn)了諸多平臺(tái)，如R語(yǔ)言，Google套件，Tableau等。[1]

D3，也稱作d3.js，全稱為Data-Driven Documen ts（數(shù)據(jù)驅(qū)動(dòng)的文檔），是一款基于數(shù)據(jù)文檔操作的JavaScript工具，把數(shù)據(jù)和HTML、SVG、CSS等其他語(yǔ)言相結(jié)合，用于創(chuàng)建可交互的數(shù)據(jù)可視化圖表。其開(kāi)發(fā)起源于2011年斯坦福大學(xué)研究室有關(guān)數(shù)據(jù)驅(qū)動(dòng)文檔Javascript的若干論文。它不僅開(kāi)源免費(fèi)，且功能強(qiáng)大，可以繪制以下幾種類型圖表：（1）基本統(tǒng)計(jì)圖表（如箱線圖、條形圖、餅狀圖、時(shí)間序列圖等）；（2）動(dòng)態(tài)統(tǒng)計(jì)視圖（例如篩選器，動(dòng)態(tài)樹(shù)圖）；（3）關(guān)系圖（表示數(shù)據(jù)間關(guān)系的圖表，如聚類圖、動(dòng)態(tài)文件夾）； （4）區(qū)域視圖（例如美國(guó)數(shù)據(jù)地圖、區(qū)域氣溫圖）； （5）數(shù)據(jù)動(dòng)畫(huà)（根據(jù)需求定義網(wǎng)頁(yè)動(dòng)畫(huà)，如俄羅斯方塊、精子圖、水滴圖）。[2]

D3的調(diào)用也尤為簡(jiǎn)單，可通過(guò)官網(wǎng)下載該JavaScript庫(kù)并完成本地調(diào)用。

2 D3的使用方法

通過(guò)繪制統(tǒng)計(jì)條形圖來(lái)說(shuō)明其使用方法。

2.1 數(shù)據(jù)的讀取

數(shù)據(jù)可視化離不開(kāi)數(shù)據(jù)，D3可通過(guò)函數(shù)d3.csv（ ）或d3.json（ ）讀取對(duì)應(yīng)格式的數(shù)據(jù)。本章節(jié)中定義空集dataset，使用回調(diào)函數(shù)導(dǎo)入/New/data.csv中的數(shù)據(jù)，代碼如下：

var dataset； d3.csv（"data1.csv"，function （d）{dataset=d.map（function（r）{ }）；}）；

return +r.low；

2.2 元素的插入

D3插入的圖形元素屬于可縮放矢量圖，簡(jiǎn)稱SVG，則需先創(chuàng)建SVG的圖幅“畫(huà)板”。[3]

var svg = d3.select（"body"）.append（"svg"）. attr（"width"，800）.attr（"height"，300）；

該段代碼表示選中html中標(biāo)簽，并在其內(nèi)部創(chuàng)建800*300的圖幅。條形圖對(duì)應(yīng)的D3元素為rect，其綁定的數(shù)據(jù)集為讀取的dataset，最后向圖幅內(nèi)插入條形圖：

svg.selectAll（"rect"）.data（dataset）.enter（）.append（"rect"）.attr（"x"，function（d，i）{return i*30；}）.attr（"y"，function（d）{return 0；}）.attr （"width"，25） .attr（"height"， function（d）{return d；}）.attr（"fill"，function（d）{return "rgb（100，170，"+（d*10-20）+"）"；}）

其中.data（）函數(shù)用于綁定數(shù)據(jù)集，.enter（）完成占位引用，.append（）添加rect標(biāo)簽并插入條形。.attr（）用于設(shè)置SVG的顏色、長(zhǎng)度、位置等若干屬性。最后使用.text（）函數(shù)為每個(gè)條形添加其對(duì)應(yīng)的數(shù)值：

svg.selectAll（"text"）.data（dataset）.enter（）.append（"text"）.text（function（d）{return d；}）. attr（"x"，function（d，i）{return i*30+5；}） .attr （"y"，function（d）{return h-4*d+9；}）

經(jīng)過(guò)適當(dāng)?shù)奈恢谜{(diào)整，我們得到如下初步條形，詳見(jiàn)圖1。

圖1 初步制作條形圖

2.3 作品生成與美化

為使條形圖更加貼近統(tǒng)計(jì)意義，進(jìn)行如下優(yōu)化：

2.3.1 標(biāo)簽文字樣式設(shè)計(jì)

條形對(duì)應(yīng)的數(shù)值（文字）樣式也能自行設(shè)計(jì)。與上述相同，使用.attr（）對(duì)文字的大?。╢ont-size），字體（font-family）以及文字的顏色（fill） 進(jìn)行設(shè)置，代碼如下：

.attr（"font-family"，"sans-serif"）.attr（"fo nt-size"，"11px"） .attr（"fill"，"white"）；

2.3.2 比例尺自動(dòng)化

前面設(shè)計(jì)的圖幅面積和位置為人為給定的?，F(xiàn)引入比例尺，使條帶的長(zhǎng)與寬自動(dòng)調(diào)節(jié)，且布置于圖幅的適當(dāng)位置。[4]在此選用線性比例尺，按照線性比例進(jìn)行縮放：

var xScale = d3.scale.linear（）.domain（[0，d3.max（dataset，function（d，i）{return i}）]）.range （[0，w-50]）；

上述分別定義橫軸線性比例尺（.scale.linear（））及其定義域?yàn)閇0，dmax]，原數(shù)值按照線性比例縮放到整個(gè)圖幅之內(nèi)。[5]相似的，也可用同樣的方法對(duì)縱軸進(jìn)行操作。

2.3.3 添加坐標(biāo)軸

D3允許向條形圖中插入SVG元素的坐標(biāo)軸。為此使用.svg.axis（）定義一組坐標(biāo)軸：

var xAxis = d3.svg.axis（） .scale（xScale） .o rient（"bottom"）.ticks（30） ；

.orient（）設(shè)置坐標(biāo)軸的方位，.ticks（）設(shè)置坐標(biāo)軸的刻度線數(shù)量。定義后便可向條形圖內(nèi)插入坐標(biāo)軸：

svg.append（"g"）.call（xAxis）.attr（"class"，"axis"）.attr（"transform"，"translate（30，270）"）；

這里D3使用.append（）命令向HTML中添加標(biāo)簽，使用.call（ ）命令引用坐標(biāo)軸。經(jīng)過(guò)若干CSS樣式修改后，最終基于D3的制作的條形圖如圖2所示。

圖2 使用D3制作的條形圖成品

通過(guò)D3制作的條形圖不僅更加豐富了數(shù)據(jù)可視化的成果，又能夠借此來(lái)了解D3的工作方法，按照“讀取數(shù)據(jù)”——“定義元素”——“插入元素”的方法進(jìn)行處理。D3能夠快速的讀取數(shù)據(jù)并插入SVG，圖形的所有屬性都可以自定義處理，D3與CSS協(xié)同工作整體化處理圖形的樣式，對(duì)于數(shù)據(jù)開(kāi)發(fā)和研究者不失為一種極佳的選擇。[6]

3 D3的應(yīng)用案例

D3功能強(qiáng)大，圖形豐富，具有很強(qiáng)的操作性。下文將通過(guò)交叉篩選器的案例展現(xiàn)它的廣泛用途。

交叉篩選器（Crossfilter）是一種通過(guò)交叉選擇條件從而實(shí)現(xiàn)篩選的數(shù)據(jù)可視化功能。篩選將數(shù)據(jù)用各種統(tǒng)計(jì)類型圖表加以可視化進(jìn)行選擇，篩選的結(jié)果由數(shù)據(jù)框加以呈現(xiàn)，在顯示總數(shù)據(jù)個(gè)數(shù)的同時(shí)又可以統(tǒng)計(jì)出滿足用戶定義條件的數(shù)據(jù)量，不僅能夠方便普通人對(duì)數(shù)據(jù)的篩選和查看，還能夠通過(guò)美化后的數(shù)據(jù)篩選來(lái)進(jìn)行數(shù)據(jù)的查找，探尋數(shù)據(jù)規(guī)律。

本案例中設(shè)計(jì)的交叉篩選器名稱為“模擬在職教師論文發(fā)布審核統(tǒng)計(jì)表”，其中數(shù)據(jù)通過(guò)模擬產(chǎn)生。在設(shè)置方面，我們將篩選器以條形圖，餅狀圖和橫向柱狀圖呈現(xiàn)，篩選的結(jié)果在最下方的數(shù)據(jù)框加以展現(xiàn)，參見(jiàn)圖3。

圖3 基于D3制作的交叉篩選器

條形圖可篩選數(shù)據(jù)中的發(fā)表日期，橫坐標(biāo)以日為單位，縱坐標(biāo)表示發(fā)表文章的數(shù)據(jù)量；餅狀圖用來(lái)篩選文章發(fā)表者的姓名，與顏色相對(duì)應(yīng)，并在各自區(qū)域加以標(biāo)注；柱狀圖可篩選文章是否通過(guò)審核；數(shù)據(jù)框用來(lái)展現(xiàn)篩選出的結(jié)果。三個(gè)篩選器可實(shí)現(xiàn)交叉篩選，點(diǎn)擊“重新選擇”即可還原篩選器至初始狀態(tài)。

交叉篩選器將復(fù)雜枯燥的數(shù)據(jù)篩選通過(guò)圖形化加以動(dòng)態(tài)展示，可以應(yīng)用于審核系統(tǒng)、數(shù)據(jù)查詢體系等多個(gè)領(lǐng)域，是D3的重要應(yīng)用。與其他工具制作相比，D3搭建的交叉篩選器出色地完成多項(xiàng)篩選任務(wù)，更有流暢的動(dòng)畫(huà)增添美學(xué)效果。使用者可以根據(jù)自己的需求設(shè)置各個(gè)組件元素的位置，實(shí)現(xiàn)整體的統(tǒng)一。

4 總結(jié)

綜上所述，D3能夠把自定義的可視化元素與數(shù)據(jù)進(jìn)行綁定并插入到網(wǎng)頁(yè)之中，實(shí)現(xiàn)快捷而美觀的數(shù)據(jù)可視化圖表，改變了人們對(duì)數(shù)據(jù)可視化傳統(tǒng)意義上的認(rèn)識(shí)，為可視化提供了一個(gè)新的基礎(chǔ)性平臺(tái)。而D3作為數(shù)據(jù)可視化的一個(gè)重要實(shí)現(xiàn)平臺(tái)，豐富了可視化在現(xiàn)實(shí)生活中的意義，拓寬了可視化的渠道多樣性，并且賦予了可視化自定義創(chuàng)新的可能。與其他平臺(tái)相比，D3憑借其操作個(gè)性化和圖表多樣化更具有競(jìng)爭(zhēng)力，并且D3已經(jīng)作為一個(gè)基礎(chǔ)庫(kù)被深入開(kāi)發(fā)，例如對(duì)D3做統(tǒng)計(jì)篩選器方面的深度挖掘就得到了dc.js。由此可見(jiàn)，D3還有很大的空間等待我們?nèi)ヌ剿鳌?/p>

[1]Scott Murray.Interactive Data Visualization for the Web[M].CA，OREILLY，2013：15-23，59-78.

[2]Mike Dewar.Getting Started with D3[M].CA，OREILLY，2012：1-14.

[3]en Fry.Visualizing Data[M].CA，OREILLY，2007：31-53.

[4]Nick Qi Zhu.Data Visualization with D3.js Cookbook[M].Birmingham，PACKT，2013：1-6.

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

[6]張運(yùn)良,張兆鋒,張曉丹,等.使用D3.js的知識(shí)組織系統(tǒng)Web動(dòng)態(tài)交互可視化功能實(shí)現(xiàn)[J].現(xiàn)代圖書(shū)情報(bào)技術(shù), 2013（7）：127-131.

Data Visualization and Application of D3

Zhang Dong Jin Yucheng

Department of economics and management East China Normal University，Shanghai 200241

since the data visualization was born in the fifty's of the last century， the concept and implementation platform has been expanded with the times. In today's information age and the arrival of the era of big data has given a new visual elements. In this paper， tracing the history of data visualization， analyzing its technical content as the background， this paper focuses on the D3 visualization platform. The article mainly summarizes the D3 draw five kinds of graph's powerful function， use the concrete bar chart to draw the case to explain the D3 syntax request and the use method， and through the cross filter demonstration D3 wide practicality. The author believes that D3 is an important platform for data visualization， and it has a very high mining space.

Data visualization; D3; visual application; visualization tools

TP391.41

A

1009-6434(2016)6-0131-03