chapter12-廈門大學(xué)-林子雨-大數(shù)據(jù)技術(shù)原理與應(yīng)用（第2版教材）-第12章-數(shù)據(jù)可視化（20

1、,廈門大學(xué)計(jì)算機(jī)科學(xué)系 2017年2月版本,林子雨廈門大學(xué)計(jì)算機(jī)科學(xué)系E-mail: ziyulin@xmu.edu.cn主頁：http://www.cs.xmu.edu.cn/linziyu,第12章 數(shù)據(jù)可視化 （PPT版本號(hào)：2017年2月版本）,,,,http://dblab.

2、xmu.edu.cn/post/bigdata,溫馨提示：編輯幻燈片母版，可以修改每頁P(yáng)PT的廈大?；蘸偷撞课淖?《大數(shù)據(jù)技術(shù)原理與應(yīng)用（第2版）》,本章配套教學(xué)視頻,《大數(shù)據(jù)技術(shù)原理與應(yīng)用（第2版）》《第12章 數(shù)據(jù)可視化》本章內(nèi)容較為簡(jiǎn)單，沒有錄制視頻,提綱,12.1 可視化概述12.2 可視化工具12.3 可視化典型案例12.4 可視化工具實(shí)踐,歡迎訪問《大數(shù)據(jù)技術(shù)原理與應(yīng)用》教材官方網(wǎng)站：http://dblab.x

3、mu.edu.cn/post/bigdata,本PPT是如下教材的配套講義：《大數(shù)據(jù)技術(shù)原理與應(yīng)用——概念、存儲(chǔ)、處理、分析與應(yīng)用》 （2017年2月第2版）ISBN:978-7-115-44330-4廈門大學(xué) 林子雨 編著，人民郵電出版社,12.1可視化概述,12.1.1什么是數(shù)據(jù)可視化12.1.2可視化的發(fā)展歷程12.1.3可視化的重要作用,12.1.1什么是數(shù)據(jù)可視化,數(shù)據(jù)可視化是指將大型數(shù)據(jù)集中的數(shù)據(jù)以圖形圖

4、像形式表示，并利用數(shù)據(jù)分析和開發(fā)工具發(fā)現(xiàn)其中未知信息的處理過程數(shù)據(jù)可視化技術(shù)的基本思想是將數(shù)據(jù)庫中每一個(gè)數(shù)據(jù)項(xiàng)作為單個(gè)圖元素表示，大量的數(shù)據(jù)集構(gòu)成數(shù)據(jù)圖像，同時(shí)將數(shù)據(jù)的各個(gè)屬性值以多維數(shù)據(jù)的形式表示，可以從不同的維度觀察數(shù)據(jù)，從而對(duì)數(shù)據(jù)進(jìn)行更深入的觀察和分析,12.1.2 可視化的發(fā)展歷程,圖 反映霍亂患者分布與水井分布的地圖,霍亂地圖分析了霍亂患者分布與水井分布之間的關(guān)系，發(fā)現(xiàn)在有一口井的供水范圍內(nèi)患者明顯偏多，據(jù)此找到了霍亂爆發(fā)的

5、根源是一個(gè)被污染的水泵,12.1.2 可視化的發(fā)展歷程,數(shù)據(jù)可視化歷史上的另一個(gè)經(jīng)典之作是1857年“提燈女神”南丁格爾設(shè)計(jì)的“雞冠花圖”(又稱玫瑰圖)，它以圖形的方式直觀地呈現(xiàn)了英國(guó)在克里米亞戰(zhàn)爭(zhēng)中犧牲的戰(zhàn)士數(shù)量和死亡原因，有力地說明了改善軍隊(duì)醫(yī)院的醫(yī)療條件對(duì)于減少戰(zhàn)爭(zhēng)傷亡的重要性,12.1.2 可視化的發(fā)展歷程,20世紀(jì)50年代，隨著計(jì)算機(jī)的出現(xiàn)和計(jì)算機(jī)圖形學(xué)的發(fā)展，人們可以利用計(jì)算機(jī)技術(shù)在電腦屏幕上繪制出各種圖形圖表，可視化技術(shù)開

6、啟了全新的發(fā)展階段。最初，可視化技術(shù)被大量應(yīng)用于統(tǒng)計(jì)學(xué)領(lǐng)域，用來繪制統(tǒng)計(jì)圖表，比如圓環(huán)圖、柱狀圖和餅圖、直方圖、時(shí)間序列圖、等高線圖、散點(diǎn)圖等，后來，又逐步應(yīng)用于地理信息系統(tǒng)、數(shù)據(jù)挖掘分析、商務(wù)智能工具等，有效促進(jìn)了人類對(duì)不同類型數(shù)據(jù)的分析與理解 隨著大數(shù)據(jù)時(shí)代的到來，每時(shí)每刻都有海量數(shù)據(jù)在不斷生成，需要我們對(duì)數(shù)據(jù)進(jìn)行及時(shí)、全面、快速、準(zhǔn)確的分析，呈現(xiàn)數(shù)據(jù)背后的價(jià)值，這就更需要可視化技術(shù)協(xié)助我們更好地理解和分析數(shù)據(jù)，可視化成為大數(shù)據(jù)分

7、析最后的一環(huán)和對(duì)用戶而言最重要的一環(huán),12.1.3 可視化的重要作用,在大數(shù)據(jù)時(shí)代，可視化技術(shù)可以支持實(shí)現(xiàn)多種不同的目標(biāo)：（1）觀測(cè)、跟蹤數(shù)據(jù),圖 百度地圖顯示的北京市實(shí)時(shí)交通路況信息,12.1.3 可視化的重要作用,（2）分析數(shù)據(jù),圖 用戶參與的可視化分析過程,12.1.3 可視化的重要作用,（3）輔助理解數(shù)據(jù),圖 微軟“人立方”展示的人物關(guān)系圖,12.1.3 可視化的重要作用,（4）增強(qiáng)數(shù)據(jù)吸引力,圖 一個(gè)可視化的圖表新聞實(shí)例,

8、12.2 可視化工具,12.2.1入門級(jí)工具12.2.2信息圖表工具12.2.3地圖工具12.2.4時(shí)間線工具12.2.5高級(jí)分析工具,12.2.1 入門級(jí)工具,Excel是微軟公司的辦公軟件Office家族的系列軟件之一，可以進(jìn)行各種數(shù)據(jù)的處理、統(tǒng)計(jì)分析和輔助決策操作，已經(jīng)廣泛地應(yīng)用于管理、統(tǒng)計(jì)、金融等領(lǐng)域,12.2.2 信息圖表工具,信息圖表是信息、數(shù)據(jù)、知識(shí)等的視覺化表達(dá)，它利用人腦對(duì)于圖形信息相對(duì)于文字信息更容

9、易理解的特點(diǎn)，更高效、直觀、清晰地傳遞信息，在計(jì)算機(jī)科學(xué)、數(shù)學(xué)以及統(tǒng)計(jì)學(xué)領(lǐng)域有著廣泛的應(yīng)用。,1. Google Chart API谷歌公司的制圖服務(wù)接口Google Chart API，可以用來為統(tǒng)計(jì)數(shù)據(jù)并自動(dòng)生成圖片，該工具使用非常簡(jiǎn)單，不需要安裝任何軟件，可以通過瀏覽器在線查看統(tǒng)計(jì)圖表。,圖 通過瀏覽器在線查看Google Chart統(tǒng)計(jì)圖表,12.2.2 信息圖表工具,2. D3D3是最流行的可視化庫之一，是一個(gè)用于網(wǎng)頁作圖

10、、生成互動(dòng)圖形的JavaScript函數(shù)庫，提供了一個(gè)D3對(duì)象，所有方法都通過這個(gè)對(duì)象調(diào)用。D3能夠提供大量線性圖和條形圖之外的復(fù)雜圖表樣式，例如Voronoi圖、樹形圖、圓形集群和單詞云等（如圖10-8所示）。,圖 通過瀏覽器在線查看Google Chart統(tǒng)計(jì)圖表,12.2.2 信息圖表工具,3. Visual.lyVisual.ly是一款非常流行的信息圖制作工具，非常好用，不需要任何設(shè)計(jì)相關(guān)的知識(shí)，就可以用它來快速創(chuàng)建自定義的、

11、樣式美觀且具有強(qiáng)烈視覺沖擊力的信息圖表。4. TableauTableau是桌面系統(tǒng)中最簡(jiǎn)單的商業(yè)智能工具軟件，更適合企業(yè)和部門進(jìn)行日常數(shù)據(jù)報(bào)表和數(shù)據(jù)可視化分析工作。Tableau實(shí)現(xiàn)了數(shù)據(jù)運(yùn)算與美觀的圖表的完美結(jié)合，用戶只要將大量數(shù)據(jù)拖放到數(shù)字“畫布”上，轉(zhuǎn)眼間就能創(chuàng)建好各種圖表。5. 大數(shù)據(jù)魔鏡大數(shù)據(jù)魔鏡是一款優(yōu)秀的國(guó)產(chǎn)數(shù)據(jù)分析軟件，它豐富的數(shù)據(jù)公式和算法可以讓用戶真正理解探索分析數(shù)據(jù)，用戶只要通過一個(gè)直觀的拖放界面就可創(chuàng)造

12、交互式的圖表和數(shù)據(jù)挖掘模型。,12.2.3 地圖工具,地圖工具在數(shù)據(jù)可視化中較為常見，它在展現(xiàn)數(shù)據(jù)基于空間或地理分布上有很強(qiáng)的表現(xiàn)力，可以直觀地展現(xiàn)各分析指標(biāo)的分布、區(qū)域等特征。當(dāng)指標(biāo)數(shù)據(jù)要表達(dá)的主題跟地域有關(guān)聯(lián)時(shí)，就可以選擇以地圖作為大背景，從而幫助用戶更加直觀地了解整體的數(shù)據(jù)情況，同時(shí)也可以根據(jù)地理位置快速地定位到某一地區(qū)來查看詳細(xì)數(shù)據(jù)。圖10-9就是以數(shù)據(jù)地圖形式呈現(xiàn)的2008年世界各國(guó)GDP數(shù)據(jù)，圖中，顏色越深的國(guó)家，其GDP

13、越高。,圖 2008年世界各國(guó)GDP數(shù)據(jù)地圖,12.2.3 地圖工具,1. Google Fusion TablesGoogle Fusion Tables讓一般使用者也可以輕松制作出專業(yè)的統(tǒng)計(jì)地圖。該工具可以讓數(shù)據(jù)表呈現(xiàn)為圖表、圖形和地圖，從而幫助發(fā)現(xiàn)一些隱藏在數(shù)據(jù)背后的模式和趨勢(shì)。 2. Modest MapsModest Maps是一個(gè)小型、可擴(kuò)展、交互式的免費(fèi)庫，提供了一套查看衛(wèi)星地圖的API，只有10KB大小，是目前最小

14、的可用地圖庫，它也是一個(gè)開源項(xiàng)目，有強(qiáng)大的社區(qū)支持，是在網(wǎng)站中整合地圖應(yīng)用的理想選擇。 3. LeafletLeaflet是一個(gè)小型化的地圖框架，通過小型化和輕量化來滿足移動(dòng)網(wǎng)頁的需要。,12.2.4 時(shí)間線工具,時(shí)間線是表現(xiàn)數(shù)據(jù)在時(shí)間維度的演變的有效方式，它通過互聯(lián)網(wǎng)技術(shù)，依據(jù)時(shí)間順序，把一方面或多方面的事件串聯(lián)起來，形成相對(duì)完整的記錄體系，再運(yùn)用圖文的形式呈現(xiàn)給用戶。時(shí)間線可以運(yùn)用于不同領(lǐng)域，最大的作用就是把過去的事物系統(tǒng)化、完

15、整化、精確化。自2012年Facebook在F8大會(huì)上發(fā)布了以時(shí)間線格式組織內(nèi)容的功能后，時(shí)間線工具在國(guó)內(nèi)外社交網(wǎng)站中開始大面積流行。 圖10-10顯示了我國(guó)戶籍制度在1994年到2014年間隨時(shí)間的演變情況，它采用了時(shí)間線表示方法。,12.2.4 時(shí)間線工具,1. TimetoastTimetoast是在線創(chuàng)作基于時(shí)間軸事件記載服務(wù)的網(wǎng)站，提供個(gè)性化的時(shí)間線服務(wù)，可以用不同的時(shí)間線來記錄你某個(gè)方面的發(fā)展歷程、心理路程、

16、進(jìn)度過程等等。Timetoast基于 flash 平臺(tái)，可以在類似 flash時(shí)間軸上任意加入事件，定義每個(gè)事件的時(shí)間、名稱、圖像、描述，最終在時(shí)間軸上顯示事件在時(shí)間序列上的發(fā)展，事件顯示和切換十分流暢，隨著鼠標(biāo)點(diǎn)擊可顯示相關(guān)事件，操作簡(jiǎn)單。 2. XtimelineXtimeline 是一個(gè)免費(fèi)的繪制時(shí)間線的在線工具網(wǎng)站，操作簡(jiǎn)便，用戶通過添加事件日志的形式構(gòu)建時(shí)間表，同時(shí)也可給日志配上相應(yīng)的圖表。不同于Timetoast的是，

17、Xtimeline是一個(gè)社區(qū)類型的時(shí)間軸網(wǎng)站，其中加入了組群功能和更多的社會(huì)化因素，除了可以分享和評(píng)論時(shí)間軸外，還可以建立組群討論所制作的時(shí)間軸。,12.2.5 高級(jí)分析工具,1. RR是屬于GNU系統(tǒng)的一個(gè)自由、免費(fèi)、源代碼開放的軟件，它是一個(gè)用于統(tǒng)計(jì)計(jì)算和統(tǒng)計(jì)制圖的優(yōu)秀工具，使用難度較高。R的功能包括數(shù)據(jù)存儲(chǔ)和處理系統(tǒng)、數(shù)組運(yùn)算工具（具有強(qiáng)大的向量、矩陣運(yùn)算功能）、完整連貫的統(tǒng)計(jì)分析工具、優(yōu)秀的統(tǒng)計(jì)制圖功能、簡(jiǎn)便而強(qiáng)大的編程語言，

18、可操縱數(shù)據(jù)的輸入和輸出，實(shí)現(xiàn)分支、循環(huán)以及用戶可自定義功能等，通常用于大數(shù)據(jù)集的統(tǒng)計(jì)與分析。 2. WekaWeka是一款免費(fèi)的、基于Java環(huán)境的、開源的機(jī)器學(xué)習(xí)以及數(shù)據(jù)挖掘軟件，不但可以進(jìn)行數(shù)據(jù)分析，還可以生成一些簡(jiǎn)單圖表。 3. GephiGephi是一款比較特殊也很復(fù)雜的軟件，主要用于社交圖譜數(shù)據(jù)可視化分析，可以生成非?？犰诺目梢暬瘓D形。,12.3可視化典型案例,12.3.1全球黑客活動(dòng)12.3.2互

19、聯(lián)網(wǎng)地圖12.3.3編程語言之間的影響力關(guān)系圖12.3.4百度遷徙12.3.5世界國(guó)家健康與財(cái)富之間的關(guān)系12.3.63D可視化互聯(lián)網(wǎng)地圖APP,12.3.1全球黑客活動(dòng),安全供應(yīng)商N(yùn)orse打造了一張能夠反映全球范圍內(nèi)黑客攻擊頻率的地圖（http://map.ipviking.com），它利用Norse 的“蜜罐”攻擊陷阱顯示出所有實(shí)時(shí)滲透攻擊活動(dòng)。如圖10-11所示，地圖中的每一條線代表的都是一次攻擊活動(dòng)，借此可以了

20、解每一天、每一分鐘甚至每一秒世界上發(fā)生了多少次惡意滲透。,圖 一張能夠反映全球范圍內(nèi)黑客攻擊頻率的地圖,12.3.2 互聯(lián)網(wǎng)地圖,為了探究互聯(lián)網(wǎng)這個(gè)龐大的宇宙，俄羅斯工程師 Ruslan Enikeev 根據(jù) 2011 年底的數(shù)據(jù)，將全球 196 個(gè)國(guó)家的 35 萬個(gè)網(wǎng)站數(shù)據(jù)整合起來，并根據(jù) 200 多萬個(gè)網(wǎng)站鏈接將這些“星球”通過關(guān)系鏈聯(lián)系起來，每一個(gè)“星球”的大小根據(jù)其網(wǎng)站流量來決定，而“星球”之間的距離遠(yuǎn)近則根據(jù)鏈接出現(xiàn)的頻率、強(qiáng)

21、度和用戶跳轉(zhuǎn)時(shí)創(chuàng)建的鏈接來確定，由此繪制得到了“互聯(lián)網(wǎng)地圖”（http://internet-map.net），如圖10-12所示。,圖 俄羅斯工程師繪制的“互聯(lián)網(wǎng)地圖”,12.3.3 編程語言之間的影響力關(guān)系圖,Ramio Gómez利用來自Freebase上的編程語言維護(hù)表里的數(shù)據(jù)，繪制了編程語言之間的影響力關(guān)系圖，如圖10-13所示，圖中的每個(gè)節(jié)點(diǎn)代表一種編程語言，之間的連線代表該編程語言對(duì)其他語言有影響，有影響力

22、的語言會(huì)連線多個(gè)語言，相應(yīng)的節(jié)點(diǎn)也會(huì)越大。,圖 編程語言之間的影響力關(guān)系圖,12.3.4 百度遷徙,2014年1月25日晚間，央視與百度合作，啟用百度地圖定位可視化大數(shù)據(jù)播報(bào)春節(jié)期間全國(guó)人口遷徙情況（如圖10-14所示），引起廣泛關(guān)注。,圖 百度遷徙展示的全國(guó)8小時(shí)遷徙圖,12.3.5 世界國(guó)家健康與財(cái)富之間的關(guān)系,如圖10-15所示，“世界國(guó)家健康與財(cái)富之間的關(guān)系”利用可視化技術(shù)，把世界上200個(gè)國(guó)家，從1810年到2010

23、年歷時(shí)200年其各國(guó)國(guó)民的健康、財(cái)富變化數(shù)據(jù)（收集了1千多萬個(gè)數(shù)據(jù)）制作成三維動(dòng)畫進(jìn)行了直觀展示（http://www.moojnn.com/Index/whn）。,圖 世界國(guó)家健康與財(cái)富之間的關(guān)系圖,12.3.6 3D可視化互聯(lián)網(wǎng)地圖APP,3D可視化是描繪和理解數(shù)據(jù)的一種手段，是數(shù)據(jù)的一種表征形式，并非模擬技術(shù)。3D可視化以一種獨(dú)特的立體視角為用戶呈現(xiàn)數(shù)據(jù)，可以幫助用戶發(fā)現(xiàn)一些在2D模式下無法察覺的內(nèi)容。Peer 1開發(fā)了一個(gè)

24、稱為“互聯(lián)網(wǎng)地圖”的APP（如圖10-16所示），這是一個(gè)建立在小盒子形式上的3D地圖。,圖 Peer 1開發(fā)的“互聯(lián)網(wǎng)地圖”,12.4.1 D3可視化庫使用指南12.4.2 Easel.ly信息圖制作實(shí)踐12.4.3 數(shù)據(jù)可視化之魔鏡12.4.4 數(shù)據(jù)可視化之ECharts,12.4 可視化工具實(shí)踐,訪問地址：http://dblab.xmu.edu.cn/blog/765/,《數(shù)據(jù)可視化 學(xué)習(xí)指南》,請(qǐng)參考廈門大學(xué)數(shù)據(jù)庫實(shí)

25、驗(yàn)室建設(shè)的中國(guó)高校大數(shù)據(jù)課程公共服務(wù)平臺(tái)的技術(shù)文章：,12.4.1 D3可視化庫使用指南,一、D3可視化庫介紹二、D3可視化庫的安裝三、預(yù)備知識(shí)四、基本操作,完整指南請(qǐng)參考廈門大學(xué)數(shù)據(jù)庫實(shí)驗(yàn)室制作教程《D3可視化庫的使用指南》http://dblab.xmu.edu.cn/blog/216/,12.4.1 D3可視化庫使用指南,一、D3可視化庫介紹,D3 的全稱是（Data-Driven Documents），顧名思義，它是一

26、個(gè)被數(shù)據(jù)驅(qū)動(dòng)的文檔。聽名字有點(diǎn)抽象，說簡(jiǎn)單一點(diǎn)，其實(shí)就是一個(gè) JavaScript 的函數(shù)庫，使用它主要是用來做數(shù)據(jù)可視化的學(xué)習(xí) D3 最好的地方是：http://d3js.org/,12.4.1 D3可視化庫使用指南,二、D3可視化庫的安裝,D3 是一個(gè) JavaScript 函數(shù)庫，并不需要通常所說的“安裝”。它只有一個(gè)文件，在 HTML 中引用即可。有兩種方法：方法一：下載 D3.js 的文件，解壓后，在 HTML 文件中包

27、含相關(guān)的 js 文件即可。方法二：可以直接包含網(wǎng)絡(luò)的鏈接，這種方法較簡(jiǎn)單：,,但使用的時(shí)候要保持網(wǎng)絡(luò)連接有效，不能在斷網(wǎng)的情況下使用。,12.4.1 D3可視化庫使用指南,三、預(yù)備知識(shí),學(xué)習(xí)D3可視化庫需要的一些基礎(chǔ)知識(shí)如下：HTML：超文本標(biāo)記語言，用于設(shè)定網(wǎng)頁的內(nèi)容，比如和標(biāo)簽CSS：層疊樣式表，用于設(shè)定網(wǎng)頁的樣式JavaScript：一種直譯式腳本語言，用于設(shè)定網(wǎng)頁的行為DOM：文檔對(duì)象模型，用于修改文檔的內(nèi)容和結(jié)構(gòu)

28、SVG：可縮放矢量圖形，用于繪制可視化的圖形,12.4.1 D3可視化庫使用指南,四、基本操作,12.4.1 D3可視化庫使用指南,2、數(shù)據(jù)綁定D3可以處理哪些類型的數(shù)據(jù)？它會(huì)接受幾乎任何數(shù)值數(shù)組，字符串，或?qū)ο螅ū旧戆渌麛?shù)組或鍵/值對(duì)）。它可以處理JSON和GeoJSON,12.4.1 D3可視化庫使用指南,d3.select(“body”)查找DOM中的body。selectAll(“p”)選擇DOM中的所有段落。由于

29、沒有存在，這將返回一個(gè)空的選擇。這個(gè)選擇為空，代表段落很快就會(huì)存在。data(dataset)計(jì)數(shù)和分析我們的數(shù)據(jù)值。有五個(gè)值，之后我們的數(shù)據(jù)集執(zhí)行了5次，每個(gè)值一次。enter()綁定數(shù)據(jù)和DOM元素。這個(gè)方法將數(shù)據(jù)傳遞到DOM中。如果數(shù)據(jù)值比相應(yīng)的DOM元素多，就用enter()創(chuàng)建一個(gè)新元素的占位符。append(“p”)通過enter()創(chuàng)建的占位符 在DOM中插入一個(gè)p元素。text(“New paragraph

30、!”)為新創(chuàng)建的p標(biāo)簽插入一個(gè)文本值。,語法說明,運(yùn)行效果如下：,12.4.1 D3可視化庫使用指南,12.4.1 D3可視化庫使用指南,源代碼,運(yùn)行效果圖,12.4.1 D3可視化庫使用指南,4、SVG概要,（1）簡(jiǎn)單形狀,SVG標(biāo)簽包含一些視覺元素，包括矩形，圓形，橢圓形，線條，文字和路徑等。基于像素的坐標(biāo)系統(tǒng)，其中瀏覽器的左上角是原點(diǎn)(0,0)。x,y的正方向分別是右和下。,矩形。使用x和y的指定左上角的坐標(biāo)，width和he

31、ight指定的尺寸。繪制SVG的矩形可以這樣寫：,,圓。使用cx和cy，指定指定半徑的中心的坐標(biāo)，和?表示半徑。例如：,,橢圓。使用cx和cy，指定指定半徑的中心的坐標(biāo)，rx和ry分別指定x方向和y方向上圓的半徑，例如：,,12.4.1 D3可視化庫使用指南,線。使用x1和Y1到指定線的一端的坐標(biāo)，x2和y2指定的另一端的坐標(biāo)。stroke指定描邊使得線是可見的。例如：,,文本。使用 x和y指定文本的位置。例如：,Easy-peasy,

32、可以給文本設(shè)置樣式。例如：,Easy-peasy,12.4.1 D3可視化庫使用指南,（2）SVG的默認(rèn)樣式,SVG的默認(rèn)樣式是黑色填充。如果想換顏色，就必須將樣式應(yīng)用到相應(yīng)的元素。常見的SVG性質(zhì)：1. 填充（fill） -顏色值。正如用CSS，顏色可以被指定為* 命名的顏色- green*　十六進(jìn)制值- ＃3388aa或38A* RGB值- RGB(10,150,20)* RGB與Alpha透明度- RGBA(10,150

33、,20,0.5)2. 描邊（stroke） -顏色值。3. 描邊寬度（stroke-width） -數(shù)字（通常以像素為單位）。4. 不透明度（opacity） – 0.0（完全透明）和1.0（完全不透明）之間的數(shù)值。5. 有了文字，也可以使用CSS樣式，如：* 字體類型（font-family）* 字體大?。╢ont-size）,12.4.1 D3可視化庫使用指南,

34、 Easy-peasy ,

35、 testD3-6-SVG.html .pumpkin { fill: yellow; stroke: orange; stroke-width: 5; } ,備注：左邊和右邊代碼是一段完整的代碼，垂直放不下，所以分開左右兩

36、段寫,12.4.1 D3可視化庫使用指南,運(yùn)行效果圖,12.4.2 Easel.ly信息圖制作實(shí)踐,Easel.ly 是現(xiàn)下非常流行的信息圖制作軟件之一，其具有界面簡(jiǎn)潔、操作簡(jiǎn)a便、圖片精美等特點(diǎn)。用戶只需要登錄Easel.ly官方網(wǎng)站即可開始進(jìn)行信息圖制作。,信息圖形是指數(shù)據(jù)、信息或知識(shí)的可視化表現(xiàn)形式。信息圖形主要應(yīng)用于必須要有一個(gè)清楚準(zhǔn)確的解釋或表達(dá)甚為復(fù)雜且大量的信息，例如在各式各樣的文件檔案上、各個(gè)地圖及標(biāo)志、新聞或教程文件，

37、表現(xiàn)出的設(shè)計(jì)是化繁為簡(jiǎn)。下圖是一個(gè)典型的信息圖，顯示的是全球各大洲的石油消費(fèi)情況。,12.4.2 Easel.ly信息圖制作實(shí)踐,Easel.ly信息圖制作步驟：第一步：選擇模板第二步：編輯內(nèi)容第三步：導(dǎo)出圖片,詳細(xì)過程請(qǐng)參考廈門大學(xué)數(shù)據(jù)庫實(shí)驗(yàn)室制作教程：《Easel.ly信息圖制作實(shí)踐》http://dblab.xmu.edu.cn/blog/easel-ly_use/,12.4.2 Easel.ly信息圖制作實(shí)踐,第一步：

38、選擇模板,進(jìn)入Easel.ly頁面后，可以開始創(chuàng)建信息圖，如下圖所示，可以選擇兩種方法創(chuàng)建信息圖：方法1：創(chuàng)建空白模版；2、選擇一個(gè)已有模版，在其基礎(chǔ)上進(jìn)行制作，模版內(nèi)的內(nèi)容可以修改。目前Easel.ly官網(wǎng)上已經(jīng)有數(shù)量超過2百萬的模版，且可以通過選項(xiàng)進(jìn)行篩選，推薦使用模版進(jìn)行制作。,12.4.2 Easel.ly信息圖制作實(shí)踐,第二步：編輯內(nèi)容,選好模版后便可以開始進(jìn)行信息圖的制作。下圖展示的是Easel.ly的操作臺(tái)，其展示了Eas

39、el.ly的所有功能，從左到右依次是：1、“Vhemes”模版選擇；2、“Objects”添加元素；3、“backgrounds”選擇背景；4、“shaps”添加線條；5、“text”添加文本；6、“charts”添加數(shù)據(jù)圖表，可選直方圖、曲線圖、衛(wèi)星圖、雷達(dá)圖、餅狀圖；7、“upload”上傳圖片。只要將元素拖到需要添加的地方便能完成元素的添加，過程十分簡(jiǎn)便。,12.4.2 Easel.ly信息圖制作實(shí)踐,第三步：導(dǎo)出圖片,在運(yùn)用Ea

40、sel.ly制作出信息圖后，便可以進(jìn)行圖片的導(dǎo)出：1、先點(diǎn)擊操作臺(tái)最右側(cè)的“Present”；2、用鼠標(biāo)右鍵點(diǎn)擊完成的圖片選擇“圖片另存為”，便可將制作的圖片保存到本機(jī)。,12.4.2 Easel.ly信息圖制作實(shí)踐,中文不兼容問題【問題】Easel.ly確實(shí)存在導(dǎo)出圖片時(shí)中文字體顯示錯(cuò)亂問題。這是由于其網(wǎng)站內(nèi)部的問題，目前暫無完美解決方案，這里給出一個(gè)不完全的解決方案。,問題：圖片中的中文有粗有細(xì)，不美觀,12.4.2 Easel.

41、ly信息圖制作實(shí)踐,中文不兼容問題【方案】在信息圖制作完成后，點(diǎn)擊頂部菜單中的“Save”選項(xiàng)保存，再點(diǎn)擊“Share”選項(xiàng)選擇“View in Browser”。此時(shí)，你制作好的信息圖就可以在瀏覽器中顯示，此時(shí)中文是顯示正常的。最后把瀏覽器中的顯示效果進(jìn)行截屏得到圖片，或者直接把瀏覽器中的圖片點(diǎn)擊右鍵另存為，就可以保存成圖片。但是這種方法存在清晰度不高的問題。,圖片中的中文粗細(xì)一致,12.4.3 數(shù)據(jù)可視化之魔鏡,魔鏡是國(guó)內(nèi)國(guó)云數(shù)據(jù)

42、旗下的數(shù)據(jù)可視化產(chǎn)品，底層封裝了可視化庫接口，用戶通過一個(gè)直觀的拖放界面就可以創(chuàng)建交互式的圖表和完美的儀表盤。通過強(qiáng)大的篩選器分類整理和探索自己ed數(shù)據(jù)。簡(jiǎn)單拖拽的操作、上選下旋轉(zhuǎn)的功能，更為用戶實(shí)現(xiàn)更自由化、探索化的分析挖掘。大數(shù)據(jù)魔鏡同時(shí)擁有市面上最豐富的可視化效果，500多種圖形庫，涵蓋了各種主流的可視化展現(xiàn)形式，絢麗而易讀。探索式的分析結(jié)合豐富的可視化效果，給用戶前所未有的產(chǎn)品體驗(yàn)和視覺沖擊。以下四個(gè)圖形效果選自于魔鏡官網(wǎng)，

43、展示魔鏡制作圖形的效果。,詳細(xì)教程請(qǐng)參考廈門大學(xué)數(shù)據(jù)庫實(shí)驗(yàn)室制作的教程：《數(shù)據(jù)可視化中級(jí)教程：數(shù)據(jù)可視化工具魔鏡》http://dblab.xmu.edu.cn/blog/592/,12.4.3 數(shù)據(jù)可視化之魔鏡,來自魔鏡官網(wǎng)的可視化效果圖,12.4.3 數(shù)據(jù)可視化之魔鏡,來自魔鏡官網(wǎng)的可視化效果圖,12.4.3 數(shù)據(jù)可視化之魔鏡,來自魔鏡官網(wǎng)的可視化效果圖,12.4.3 數(shù)據(jù)可視化之魔鏡,來自魔鏡官網(wǎng)的可視化效果圖,12.4.3

44、數(shù)據(jù)可視化之魔鏡,首先登陸魔鏡官方網(wǎng)站點(diǎn)擊右上角“登陸/注冊(cè)”，先注冊(cè)一個(gè)賬號(hào)，然后再用戶賬號(hào)登陸。登陸之后界面如右側(cè)所示：,使用魔鏡制作可視化圖的簡(jiǎn)單步驟,12.4.3 數(shù)據(jù)可視化之魔鏡,首先點(diǎn)擊新建項(xiàng)目，接下來輸入項(xiàng)目名，數(shù)據(jù)源選擇Excel表格，導(dǎo)入數(shù)據(jù)，點(diǎn)擊保存即可出現(xiàn)個(gè)人制作管理后臺(tái)：,12.4.3 數(shù)據(jù)可視化之魔鏡,然后點(diǎn)擊新建圖表，即可出現(xiàn)制作圖形的工作區(qū)：,其中左邊為數(shù)據(jù)的兩個(gè)維度，維度(X軸)為文本屬性，度量(Y軸)

45、為數(shù)值屬性。當(dāng)我們需要制作某個(gè)圖表時(shí)，只需要用鼠標(biāo)將維度拖至箭頭指向的行，將度量拖至箭頭指向的列（也可以點(diǎn)擊維度或度量后面的箭頭），然后點(diǎn)擊右邊框中的各種圖表，即可生成相應(yīng)的圖表類型。,12.4.3 數(shù)據(jù)可視化之魔鏡,我們來分析下每個(gè)地區(qū)的銷售額和利潤(rùn)，首先將地區(qū)拖至行，然后銷售額和利潤(rùn)拖至列，然后點(diǎn)擊某種圖表即可生成，如下：,12.4.4 數(shù)據(jù)可視化之ECharts,Echarts簡(jiǎn)介Echarts開發(fā)環(huán)境Echarts例子講解,

46、詳細(xì)教程請(qǐng)參考廈門大學(xué)數(shù)據(jù)庫實(shí)驗(yàn)室制作的教程：《數(shù)據(jù)可視化中級(jí)教程：數(shù)據(jù)可視化之ECharts》http://dblab.xmu.edu.cn/blog/592/,12.4.4 數(shù)據(jù)可視化之ECharts,ECharts是由百度商業(yè)前端數(shù)據(jù)可視化團(tuán)隊(duì)研發(fā)的圖表庫，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級(jí)的 Canvas 類庫

47、ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表ECharts 提供了非常豐富的圖表類型，常規(guī)的折線圖，柱狀圖，散點(diǎn)圖，餅圖，K線圖，用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖，熱力圖，線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖，treemap，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭，滿足用戶絕大部分用戶分析數(shù)據(jù)時(shí)的圖表制作需求,Echarts簡(jiǎn)介,12.4.4 數(shù)據(jù)可視化

48、之ECharts,Echarts開發(fā)環(huán)境,ECharts是一款可視化開發(fā)庫，底層用的是javascript封裝，所以可以在網(wǎng)頁HTML中嵌入ECharts代碼顯示數(shù)據(jù)圖表。在網(wǎng)頁中嵌入ECharts步驟如下：,1.下載ECharts,2.HTML引入 ECharts,因?yàn)镋Charts底層是javascript，所以可以像javascript一樣，直接嵌入到HTML中，如下：, ,12.4.4 數(shù)據(jù)可

49、視化之ECharts,Echarts開發(fā)環(huán)境,3.繪制一個(gè)簡(jiǎn)單的圖表(1)在繪圖前我們需要為 ECharts 準(zhǔn)備一個(gè)具備高寬的 dom 容器。, ,(2)然后就可以通過 echarts.init 方法初始化一個(gè) echarts 實(shí)例并通過 setOption 方法生成一個(gè)簡(jiǎn)單的柱狀圖，下面是完整代碼,12.4.4 數(shù)據(jù)可視化之ECharts, ECharts ,

50、 // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項(xiàng)和數(shù)據(jù) var option = { title: { text: 'ECh

51、arts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫",&

52、quot;褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10

53、, 20] }] }; // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。 myChart.setOption(option); ,備注：左邊和右邊代碼是一段完整的代碼，垂直放不下，所以分開左右兩段寫,12.4.4 數(shù)據(jù)可視化之ECharts,上面代碼是ECharts官網(wǎng)提供的一個(gè)簡(jiǎn)單示例，顯示一個(gè)柱狀圖。在官網(wǎng)下載echarts.js文件，然后在echarts

54、.js同一個(gè)文件夾下面新建一個(gè)html文件（注意改后綴為.html），將上述示例代碼復(fù)制進(jìn)去，然后雙擊html文件即可在瀏覽器顯示。,12.4.4 數(shù)據(jù)可視化之ECharts,(3)圖片導(dǎo)出ECharts可以很方便的導(dǎo)出制作的圖表只要在代碼中加入如下代碼，即可顯示上圖右上角的工具欄，其中最右邊藍(lán)框中的圖標(biāo)即為導(dǎo)出圖表。,toolbox: { show : true, feature : {

55、 dataZoom: {}, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, restore: {}, saveAsImage: {} }},12.4.4 數(shù)據(jù)可視化之ECharts,如果只是簡(jiǎn)單的制作

56、圖表，而不是用于網(wǎng)頁中，最簡(jiǎn)單的辦法是打開ECharts提供的一個(gè)示例，將示例代碼清除，直接在示例的編輯器編輯即可，而且不會(huì)出現(xiàn)亂碼，圖片導(dǎo)出操作和上述所說一樣。,比如，在Echarts中打開“微博簽到數(shù)據(jù)點(diǎn)亮中國(guó)”這個(gè)示例，如下圖所示，將左邊的代碼清除，寫入顯示柱狀圖的代碼，就可以運(yùn)行得到柱狀圖（見下頁）,12.4.4 數(shù)據(jù)可視化之ECharts,運(yùn)行得到的柱狀圖,12.4.4 數(shù)據(jù)可視化之ECharts,下面用全國(guó)主要城市空氣質(zhì)量圖

57、的示例來解釋ECharts圖表制作過程,12.4.4 數(shù)據(jù)可視化之ECharts,原始數(shù)據(jù),數(shù)據(jù)集一：城市空氣質(zhì)量圖表中城市坐標(biāo)在瀏覽器中打開下面網(wǎng)頁查看數(shù)據(jù)：http://dblab.xmu.edu.cn/blog/wp-content/uploads/2016/01/%E9%99%84%E5%BD%95A.txt,數(shù)據(jù)集二：全國(guó)主要城市的空氣質(zhì)量,在瀏覽器中打開下面網(wǎng)頁查看數(shù)據(jù)：http://dblab.xmu.edu.cn/

58、blog/wp-content/uploads/2016/01/%E9%99%84%E5%BD%95B.txt,12.4.4 數(shù)據(jù)可視化之ECharts,標(biāo)題組件 即為這幅圖表所展示的主題，標(biāo)題有分為主標(biāo)題和副標(biāo)題，而且還可以為標(biāo)題設(shè)置連接，文字屬性等等，相應(yīng)的代碼為：,12.4.4 數(shù)據(jù)可視化之ECharts,工具欄組件 即針對(duì)制作的圖表的一些操作，例如導(dǎo)出圖片，數(shù)據(jù)視圖，動(dòng)態(tài)類型切換，數(shù)據(jù)區(qū)域縮放，重置五個(gè)工具。相應(yīng)的代碼如下：,1

59、2.4.4 數(shù)據(jù)可視化之ECharts,提示框組件 當(dāng)鼠標(biāo)點(diǎn)擊或者滑過圖表中的點(diǎn)線時(shí)，彈出關(guān)于這點(diǎn)線的數(shù)據(jù)信息。相應(yīng)的代碼如下：,tooltip: { trigger: 'item'//這個(gè)為觸發(fā)類型，ECharts支持兩種觸發(fā)類型，’item’為數(shù)據(jù)項(xiàng)圖形觸發(fā)，’axis’為坐標(biāo)軸觸發(fā) },,12.4.4 數(shù)據(jù)可視化之ECharts,圖例組件 圖例組件展現(xiàn)了不同系列的標(biāo)記(symbol)，顏色和名字

60、。可以通過點(diǎn)擊圖例控制哪些系列不顯示。相應(yīng)代碼為：,12.4.4 數(shù)據(jù)可視化之ECharts,視覺組件 視覺組件是用于進(jìn)行【視覺編碼】，也就是將數(shù)據(jù)映射到視覺元素（視覺通道），在圖中表現(xiàn)為將數(shù)據(jù)根據(jù)視覺組件映射到不同顏色的圖例。相應(yīng)代碼如下：,12.4.4 數(shù)據(jù)可視化之ECharts,地圖坐標(biāo)系組件 用于地圖的繪制，支持在地里坐標(biāo)系上繪制散點(diǎn)圖，線集。相應(yīng)代碼如下：,geo: { map: 'china'

61、,//地圖類型，這里用的是中國(guó)地圖，ECharts還支持其他地圖 //圖形上的文本標(biāo)簽，課用于說明圖形的一些數(shù)據(jù)信息，比如值，名稱等。在這個(gè)地圖中，即為省的名稱 label: { emphasis: { show: false//如果改為true，鼠標(biāo)浮在省份上，會(huì)顯示省份的名稱 } }, //

62、地圖區(qū)域的多邊形 圖形樣式，有 normal 和 emphasis 兩個(gè)狀態(tài)，normal 是圖形正常的樣式，emphasis 是圖形高亮的樣式，比如鼠標(biāo)懸浮或者圖例聯(lián)動(dòng)高亮的時(shí)候會(huì)使用 emphasis 作為圖形的樣式。 itemStyle: { normal: { areaColor: '#323c48',//正常情況顯示的省份顏色

63、 borderColor: '#111'//正常情況下省份的邊界顏色 }, emphasis: { areaColor: '#2a333d'//鼠標(biāo)浮在省份上時(shí)，即高亮?xí)r省份的顏色 } } },,12.4.4 數(shù)據(jù)可視化之ECharts,series（系列列表）

64、，即在同一個(gè)圖表上可以制作一系列的多個(gè)圖表，然后疊在一起，形成一個(gè)圖表。每個(gè)系列通過type決定自己的圖表類型。ECharts支持多種圖表類型，折線圖（line），柱狀圖（bar），餅圖（pie），散點(diǎn)（氣泡）圖（scatter）等。全國(guó)主要城市空氣質(zhì)量圖采用的散點(diǎn)圖（scatter）。系列組件中還將數(shù)據(jù)映射到地圖的圖標(biāo)，相應(yīng)代碼如下：,12.4.4 數(shù)據(jù)可視化之ECharts,series: [ {

65、 name: 'pm2.5',//這個(gè)系列圖表的名稱 type: 'scatter’//圖表的類型，這里使用的是散點(diǎn)（氣泡）圖 coordinateSystem: 'geo',//使用地理坐標(biāo)系，還有二維坐標(biāo)系和極坐標(biāo)系 data: convertData([//這是個(gè)函數(shù)，將數(shù)據(jù)拼接成指定格式。

66、 //城市空氣質(zhì)量數(shù)據(jù)請(qǐng)看附錄B ]), symbolSize: 12,//圖標(biāo)的大小 label: {//圖形上的文本標(biāo)簽，可用于說明圖形的一些數(shù)據(jù)信息。 normal: { show: false//圖標(biāo)上是否顯示數(shù)值，如果改為true，則每個(gè)圖標(biāo)上有相應(yīng)的數(shù)值

67、 }, emphasis: { show: false } }, itemStyle: {//圖標(biāo)的樣式 emphasis: {//圖的高亮樣式 borderColor: '#fff',

68、//高亮?xí)r的邊界顏色 borderWidth: 1//高亮?xí)r邊界寬度 } } } ],12.4.4 數(shù)據(jù)可視化之ECharts,其中用到數(shù)據(jù)轉(zhuǎn)換函數(shù)定義為：,var convertData = function (data) { var res = []; for (var i = 0; i <

69、data.length; i++) { var geoCoord = geoCoordMap[data[i].name];//取出城市的坐標(biāo) if (geoCoord) { res.push(geoCoord.concat(data[i].value));//將空氣質(zhì)量值拼接在坐標(biāo)后面 } } return res;};,制作一張圖表，最重要的是數(shù)