數(shù)據(jù)可視化基礎(chǔ)第十章-地理數(shù)據(jù)的可視化

1第十課地理數(shù)據(jù)的可視化學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)了解墨卡托地圖投影了解點(diǎn)，線，區(qū)域的地理數(shù)據(jù)的可視化方法及其注意事項(xiàng)實(shí)現(xiàn)常用的地理數(shù)據(jù)可視化能能力目標(biāo)能夠根據(jù)數(shù)據(jù)選擇合適的地理數(shù)據(jù)的可視化方法能夠繪制地圖能夠完成地圖上的常見(jiàn)可視化圖形2地圖投影現(xiàn)實(shí)世界中的數(shù)據(jù)中經(jīng)常包括位置信息，這里的地理位置特指真實(shí)的人類生活的空間。對(duì)這類數(shù)據(jù)，信息的載體和編碼方式都非常獨(dú)特，也是可視化中非常重要的一部分。在廣泛使用了移動(dòng)設(shè)備以及傳感器之后，每時(shí)每刻都產(chǎn)生更多海量的地理空間數(shù)據(jù)。為我們進(jìn)行可視化提出了更多的挑戰(zhàn)。地圖是最常用的最簡(jiǎn)單的探索地理位置數(shù)據(jù)的方法,可以把所有數(shù)值都放到地理坐標(biāo)系中。這個(gè)地理坐標(biāo)系就關(guān)系到地圖投影的問(wèn)題。因?yàn)榈厍蚴乔蛐蔚?，我們需要將三維的地理坐標(biāo)轉(zhuǎn)換到二維的屏幕坐標(biāo)。有多種投影的方法，最常見(jiàn)的就是墨卡托投影。墨卡托投影有成為正軸等角圓柱投影，由荷蘭地圖學(xué)家墨卡托與1569年發(fā)明。在這種投影生成的二維視圖中，經(jīng)線是一組豎直的等距離平行直線，緯線是一組垂直于經(jīng)線的平行直線，相鄰緯線之間的距離由赤道向兩級(jí)增加大。但是投影中每個(gè)點(diǎn)上任何方向的長(zhǎng)度比均相等，及沒(méi)有角度變形。但是面積變形明顯，赤道上的保持原始面積，離赤道越遠(yuǎn)的面積變大越多。點(diǎn)數(shù)據(jù)的可視化點(diǎn)數(shù)據(jù)描述的對(duì)象是地理空間中離散的點(diǎn)，具有經(jīng)度和緯度的坐標(biāo)，但是不具備大小尺寸。這是地理數(shù)據(jù)中最常見(jiàn)最基本的一種，如地標(biāo)性建筑，區(qū)域內(nèi)的餐館等。常見(jiàn)的點(diǎn)數(shù)據(jù)的可視化方法就是直接根據(jù)坐標(biāo)在地圖上畫(huà)點(diǎn)，如圖是百度地圖上標(biāo)注的南京地區(qū)的美食地點(diǎn)。3對(duì)于數(shù)據(jù)對(duì)象的其他屬性，可以通過(guò)其他視覺(jué)編碼的方式表示，比方說(shuō)顏色和大小可以表示分類型和數(shù)值型數(shù)據(jù)。下圖就是舊金山灣區(qū)的Airbnb房費(fèi)，顏色代表房屋的種類，圓點(diǎn)的大小代表房費(fèi)的高低以上例子中數(shù)據(jù)都是離散的，在數(shù)據(jù)量非常大的時(shí)候，會(huì)產(chǎn)生重疊。處理的一種方法可以將地圖分割成小塊，采用合適的重建或是差值算法講數(shù)據(jù)轉(zhuǎn)換成連續(xù)的形式呈現(xiàn)，例如以下的熱力圖表示世界各地實(shí)時(shí)發(fā)Twitter的消息數(shù)量。4上面的方法抽象的顯示統(tǒng)計(jì)數(shù)據(jù)而不是每一個(gè)數(shù)據(jù)點(diǎn)。繪制每一個(gè)數(shù)據(jù)點(diǎn)可以讓可視化展示更多數(shù)據(jù)細(xì)節(jié)，但是需要調(diào)整數(shù)據(jù)點(diǎn)的位置來(lái)解決重疊問(wèn)題，常見(jiàn)的方法是將重疊的點(diǎn)在一個(gè)目標(biāo)位置周圍小范圍內(nèi)隨機(jī)移動(dòng)。下圖就是用類似的算法可視化芝加哥和紐約地區(qū)的各種族地域分布。通過(guò)半透明的模式，可以清晰的辨別不同種族的聚居區(qū)域，也了解到聚居區(qū)交接的區(qū)域通常存在不同種族混居的情況。5線數(shù)據(jù)的可視化線數(shù)據(jù)的可視化地理位置空間數(shù)據(jù)中，線數(shù)據(jù)通常指連接兩個(gè)或更多地點(diǎn)的線段或者路徑。線數(shù)據(jù)具有長(zhǎng)度屬性，常見(jiàn)的例子是地圖上兩點(diǎn)之間的行車路線。線數(shù)據(jù)也可以是一些自然地理對(duì)象，例如河流等。最基本的線數(shù)據(jù)可視化通常采用繪制線段來(lái)連接相應(yīng)的地點(diǎn)。如圖就是百度地圖展示從東南大學(xué)四牌樓校區(qū)到九龍湖校區(qū)的行車路線。其中還采用不同的可視化方法達(dá)到更好的效果，例如顏色，線型，寬度，標(biāo)注等表示數(shù)據(jù)的屬性。這里用紅色，黃色和綠色表示路線的擁堵情況，不同的線型代表不同的鐵路，地鐵，公路交通的路線。在線數(shù)據(jù)在地圖上展示時(shí)，要注意減少重疊和交叉的情況，增加可讀性。比如在有限的地圖上顯示大量的線數(shù)據(jù)會(huì)造成嚴(yán)重的視覺(jué)混淆。一種處理方法就是，如果是理解數(shù)據(jù)的整體模式，可以簡(jiǎn)化線條，聚類為若干類線束來(lái)展示。如圖是美國(guó)國(guó)內(nèi)飛機(jī)航線的可視化圖，用顏色表示飛機(jī)的型號(hào)，透明度表示航班的數(shù)量，盡管有大量線段重疊和交叉，但是整體反映了美國(guó)國(guó)內(nèi)航班的地理分布特征。6在有的實(shí)際情況中，需要清晰的呈現(xiàn)每一條連線，并進(jìn)行信息檢索。此時(shí)，如果有大量線條重疊和交叉就阻礙了信息檢索的效率，甚至變得不可行。這種情況下需要通過(guò)改變連線的形狀和布局減少連線的重疊和交叉。通常稱之為連線綁定。按照線的走向，將相互接近的部分合并起來(lái)，減少屏幕上的連線數(shù)量和交叉情況。人們很早就開(kāi)始使用這種方法，如圖是1864年法國(guó)葡萄酒出口圖，有向連線從法國(guó)出發(fā)到相應(yīng)的進(jìn)口地區(qū)，線的寬度表示出口數(shù)量，連線按照走勢(shì)被綁定在一起。7區(qū)域數(shù)據(jù)的可視區(qū)域數(shù)據(jù)的可視化區(qū)域數(shù)據(jù)包含比點(diǎn)數(shù)據(jù)和線數(shù)據(jù)更多的信息。區(qū)域是一個(gè)二維的閉合空間，可以是國(guó)家，省，或者湖泊或是街區(qū)，可視化區(qū)域數(shù)據(jù)的目的是為了表現(xiàn)區(qū)域的屬性，如人口密度，人均收入等，最常用的方法是用顏色表示區(qū)域的屬性。OChoropleth地圖Choropleth地圖是假設(shè)數(shù)據(jù)的屬性在一個(gè)區(qū)域內(nèi)是平均分布的，因此用同一種顏色來(lái)表示。如圖是全球糖尿病患病率的可視化圖，根據(jù)國(guó)家區(qū)域來(lái)查看各地的糖尿病的患病率。Choropleth地圖是依靠顏色來(lái)表示數(shù)據(jù)的，在數(shù)據(jù)的值域大或是數(shù)據(jù)類型多樣的時(shí)候，選擇合適的顏色非常重要。這里推薦為地圖提供配色方案的工具：ColorBrewer。可以提供配色建議。8Choropleth地圖最大的問(wèn)題是，數(shù)據(jù)分布和地理區(qū)域大小的不對(duì)稱。通常大的數(shù)據(jù)集中在人口密集的區(qū)域，而人口稀疏的地區(qū)卻占用的大多數(shù)的屏幕空間。經(jīng)常使用戶對(duì)數(shù)據(jù)產(chǎn)生錯(cuò)誤理解。因此產(chǎn)生了Cartogram地圖。OCartogram地圖Cartogram地圖可視化是按照地理區(qū)域的屬性值，對(duì)各個(gè)區(qū)域進(jìn)行適當(dāng)?shù)淖冃翁幚恚朔﨏horopleth地圖對(duì)空間使用的不合理之處。例如，下圖就是根據(jù)世界人口重新繪制的視覺(jué)地圖，可以看到中國(guó)和印度兩個(gè)人口大國(guó)占據(jù)了更大的空間，而澳大利亞，加拿大等人口較少的國(guó)家，面積縮減得非常多。O規(guī)則形狀地圖人們也嘗試用更簡(jiǎn)單的幾何形狀來(lái)表示地圖上的區(qū)域，讓用戶更容易判斷域面積的大小。例如矩陣或是圓形，這種規(guī)則的幾何圖形使用戶更容易判斷面積的大小。如圖是紐約時(shí)報(bào)繪制的2008北京奧運(yùn)會(huì)獎(jiǎng)牌排名的可視化圖表。圓表示國(guó)家，圓的大小表示所獲得的獎(jiǎng)牌的數(shù)量，顏色表示國(guó)家所在的大洲。能夠非常直觀的看到貨獎(jiǎng)牌最多的國(guó)家和地區(qū)。9地地理數(shù)據(jù)可視化的應(yīng)用地理信息數(shù)據(jù)可視化在日常中的廣泛應(yīng)用，尤其是移動(dòng)互聯(lián)網(wǎng)和物聯(lián)網(wǎng)的快速發(fā)展，地理位置更加容易獲得，我們?cè)谌粘Ｖ型ㄟ^(guò)地圖進(jìn)行導(dǎo)航，尋找房屋，打車或是尋找共享單車，包括旅游等等中，都離不開(kāi)地圖以及地圖上可視化展示。在大量網(wǎng)頁(yè)或是應(yīng)用中，都會(huì)用地圖來(lái)作為查詢或是搜索的方式。這里對(duì)標(biāo)示的設(shè)計(jì)和展示需要合理的利用視覺(jué)編碼的方式。同樣，科學(xué)研究，經(jīng)濟(jì)，人口，就業(yè)，教育，醫(yī)療和環(huán)境研究中也會(huì)大量使用地圖和地理信息數(shù)據(jù)，下圖是經(jīng)濟(jì)合作與發(fā)展組織(OECD)針對(duì)各個(gè)地區(qū)的相關(guān)指數(shù)進(jìn)行分析，組成完整的數(shù)據(jù)分析系統(tǒng)。地地圖繪制演示ONGeoJSON是描述地理信息的一種基本格式，我們著重介紹這種格式。GeoJson的地圖格式文件GeoJSON是用于描述地理空間信息的數(shù)據(jù)格式，其語(yǔ)法規(guī)范都是符合JSON格式的，只是對(duì)其名稱進(jìn)行了規(guī)范，專門(mén)用于表示地理信息。GeoJSON里的對(duì)象也是名稱/值對(duì)的集合，名稱總是字符串，值可以是字符串，數(shù)據(jù)，布爾值，對(duì)象，數(shù)值，null等等。我們可以從已有的GeoJSON文件中看到，這里整個(gè)中國(guó)地圖就是一個(gè)特征集合，每個(gè)特征，都有對(duì)應(yīng)的properties和geometry數(shù)據(jù)。我們可以從網(wǎng)上搜到到絕大部分國(guó)家和地區(qū)的GeoJSON文件，例如一些網(wǎng)站也提供常用的GeoJSON文件供下載。http:///static/tools/atlas/wordpress/668/如果還找不到需要的文件，可以到/網(wǎng)站上獲取原文件，自行轉(zhuǎn)換并簡(jiǎn)化完成。這個(gè)過(guò)程比較復(fù)雜，我們就不詳細(xì)闡述了。繪制中國(guó)地圖中國(guó)地圖一般是這樣表示的，一個(gè)大的矩形框里，畫(huà)上中國(guó)大陸和港澳臺(tái)的，矩形的右下角有一個(gè)小框，繪制南海諸島。我們只通過(guò)GeoJSON文件繪制大陸和港澳臺(tái)地區(qū)。繪制地圖首先要定義地圖的投影，我們介紹了墨卡托投影方式，可以用d3的方法定義投影方式//聲明投影方式墨卡托投影varprojection=d3.geoMercator().center([109.5996,35.6396])//參考json數(shù)據(jù)中的properties.cp,現(xiàn)在將陜西作為中心點(diǎn).scale(800)//后續(xù)放大縮小地圖使用projection.cale(xxx).translate([width/2,height/2]);varpath=d3.geoPath(projection);這里d3.geoMercator是投影方法，center是地圖的中心位置，目前我們?cè)O(shè)置為陜西的中心位置坐標(biāo)。Scale和translate是設(shè)置縮放量和平移量。然后通過(guò)geoPath生成對(duì)應(yīng)的地理路徑生成器。。然后可以加載數(shù)據(jù)，讀取json文件，其中data.features是各省的輪廓數(shù)據(jù)，添加足夠數(shù)量的<path>元素，每一個(gè)<path>中繪制一個(gè)省的路徑。并在每個(gè)省里填充不同的顏色。d3.json("../data/china.json",function(error,data){if(error){throwerror}g.selectAll(".map-feature").data(data.features).enter().append("path").attr("class","map-feature").attr("d",path).style("cursor","pointer").attr("fill",function(d,i){returncolor(i);最終生成的地圖如下。繪制地鐵站點(diǎn)在地鐵上繪制點(diǎn)是非常常見(jiàn)的地圖可視化方法，我們通過(guò)繪制上海地鐵站的位置，來(lái)說(shuō)明如何在地圖上繪制點(diǎn)。首先和上面的例子類似，我們先繪制上海地圖，獲取上海的GeoJSON數(shù)據(jù)，用墨卡托投影的方法完成繪制。//聲明投影方式墨卡托投影varprojection=d3.geoMercator().center([121.528,31.2966])//參考shanghai.json中的properties.cp,現(xiàn)在將楊浦區(qū)作為中心點(diǎn).scale(31000)//后續(xù)放大縮小地圖使用projection.cale(xxx).translate([width/2,height/2]);varpath=d3.geoPath(projection);d3.json("../data/shanghai.json",function(error,data){if(error){throwerror}g.selectAll(".map-feature").data(data.features).enter().append("path").attr("class","map-feature")..attr("d",path)根據(jù)獲取的上海一號(hào)地鐵站的經(jīng)緯度信息表，我們這里簡(jiǎn)單放到html里面//抓取一號(hào)線的各個(gè)站點(diǎn)坐標(biāo)varlineOne=[{name:'富錦路',lnglat:[121.41994771125192,31.394206890381277]},{name:'友誼西路',lnglat:[121.42330658143267,31.38308882623357]},{name:'寶安公路',lnglat:[121.42628952009215,31.371680032971014]},{name:'共富新村',lnglat:[121.4294548390692,31.357221366445227]},然后完成點(diǎn)的繪制，這里最主要的是通過(guò)投影函數(shù)，把經(jīng)緯度映射為坐標(biāo)位置g.selectAll(".map-station").data(lineOne).enter().append("circle").attr("class","map-station").attr("fill","black").attr("r",2).attr("cx",function(d){//這是知識(shí)點(diǎn)returnprojection(d.lnglat)[0]}).attr("cy",function(d){returnprojection(d.lnglat)[1]})完成的效果圖繪制地鐵線除了使用GeoJSON，還有很多第三方插件提供了地圖服務(wù)。我們這里就用Leaflet插件在上圖的基礎(chǔ)上，如果要把各個(gè)站點(diǎn)鏈接起來(lái)，完成地鐵線路的繪制，需要在上圖基礎(chǔ)上增加一個(gè)線路徑path,。注意經(jīng)度對(duì)應(yīng)x軸，緯度對(duì)應(yīng)y軸。varlinePath=d3.line().x(function(d){returnd.pxLng}).y(function(d){returnd.pxLat}).curve(d3.curveCatmullRom.alpha(0.5));//繪制線g.append("path").datum(lineOne).attr("fill","none").attr("stroke","black").attr("stroke-width","2").attr("d",function(d){vartemp;d.forEach(function(d){temp=projection(d.lnglat);d.pxLng=temp[0]d.pxLat=temp[1]})returnlinePath(d);})為了看清楚路線，我們放大了地圖的顯示。使用Leaflet加載地圖說(shuō)明。Leaflet是一個(gè)開(kāi)源的JavaScript庫(kù)，兼容移動(dòng)端提供交互地圖服務(wù)。只需要下載庫(kù)文件，并加載到HTML中即可。<!--/--><!--/reference-1.0.3.html--><scripttype="text/javascript"src="../js/leaflet/leaflet-src.js"></script><scripttype="text/javascript">然后通過(guò)幾行代碼就可以完成一個(gè)地圖varcp=[33.56,108.98];varmap=L.map('map',{zoomControl:false});map.setView(cp,4);L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{attribution:'©<a}).addTo(map);/其中，L.map()就是獲得一個(gè)<divid=“map”></div>，把地圖數(shù)據(jù)繪制其中，setview用來(lái)設(shè)置地圖的中心點(diǎn)的經(jīng)緯度和比例尺，，作為用戶的視圖區(qū)域。然后L.titleLayer是矢量瓦片地圖，用對(duì)應(yīng)的URL上找到對(duì)應(yīng)的z，y,x。而s是分布式服務(wù)器快速選取，一般是1-4，最后tileLayer圖層要addTo(map)加載到地圖區(qū)域去。我們這里用的而是openstreetmap。還可以方便的在地圖上增加標(biāo)注和繪制點(diǎn)。通過(guò)marker或是cy