作為一個(gè)數(shù)據(jù)分析的新手细层，最近我也在kaggle上晃蕩，不過(guò)主要是觀摩大師以及尋找有趣的數(shù)據(jù)集的唬涧。這不疫赎，今天早上發(fā)現(xiàn)了一個(gè)星巴克的數(shù)據(jù)集，下載下來(lái)后碎节，發(fā)現(xiàn)自帶經(jīng)緯度捧搞，就打算用剛學(xué)不久，還熱乎的d3.js來(lái)做個(gè)可視化狮荔。
先上最終成果—— Starbucks Locations Worldwide
（鼠標(biāo)放在綠點(diǎn)上會(huì)顯示店名和店鋪的地址）
截圖也來(lái)一張（有沒有覺得我的配色很友好=胎撇。=）：
源碼都放在了我的github上：Starbucks Locations Worldwide on github
制作心得
注意：這個(gè)可視化使用的是d3的v4版
首先在把點(diǎn)畫上去之前，先要把一幅地圖放在頁(yè)面上殖氏。這時(shí)候就導(dǎo)入我提前準(zhǔn)備好的world_countries.json文件晚树，這個(gè)文件生成自http://geojson.io/，它里面包含了不同國(guó)家地區(qū)的經(jīng)緯度雅采，就能在畫布上畫出一個(gè)地球爵憎。
添加svg的過(guò)程就不贅述了，具體來(lái)說(shuō)下怎么畫出地球和添加點(diǎn)婚瓜。
第一步： 設(shè)定投影方法和位置
利用d3.geoMercator()把地圖平面投影化宝鼓，為了接下來(lái)能畫在2維的畫布上。
var projection = d3.geoMercator()
.scale(200)//根據(jù)個(gè)人喜好縮放
.translate( [760, 470]); //決定了投影的中心巴刻，根據(jù)個(gè)人喜好調(diào)整
第二步： 鏈接路徑
var path = d3.geoPath().projection(projection);
這行代碼雖短愚铡，但卻至關(guān)重要，因?yàn)樗鶕?jù)之前設(shè)置的投影胡陪，生成了了一個(gè)SVG的路徑數(shù)據(jù)串沥寥，簡(jiǎn)單點(diǎn)說(shuō)，就是把路徑添加到了畫布上柠座，我們能開始作畫了邑雅！
附上英文解釋：
The geographic path generator, d3.geoPath, is similar to the shape generators in d3-shape: given a GeoJSON geometry or feature object, it generates an SVG path data string or renders the path to a Canvas. Canvas is recommended for dynamic or interactive projections to improve performance. Paths can be used with projections or transforms, or they can be used to render planar geometry directly to Canvas or SVG.
第三步：讀取地圖數(shù)據(jù)
var map = svg.selectAll('path')
.data(geo_data.features)// 加入我們地圖文件geo_data中的特征
.enter()
.append('path') //添加到我們?cè)O(shè)置的路徑
.attr('d', path)
.style('fill', '#b3cccc') // 填充顏色
.style('stroke', 'black') //邊界線長(zhǎng)度
.style('stroke-width', 0.4); // 邊界線寬度
大功告成！地圖已經(jīng)畫在了頁(yè)面上愚隧。
第四步：添加點(diǎn)
svg.selectAll("circle")
.data(data) //這里的data是指我們的星巴克店址的data
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([ +d["Longitude"]]);
})
.attr("cy", function(d) {
return projection([ +d["Latitude"] ]);
})
.attr("r", 2.2)
.attr("fill", "#007245")
.attr('opacity', 0.6)
這是d3.js在畫布中添加點(diǎn)最常用的方法蒂阱，在這里點(diǎn)的橫坐標(biāo)和縱坐標(biāo)就是對(duì)應(yīng)著我們的經(jīng)緯度锻全。因此狂塘，我也需要把經(jīng)緯度按照我們之前投影地圖的方式轉(zhuǎn)化录煤，這樣才能正確的顯示在我們2d的地圖中。[ +d["Longitude"]]這個(gè)寫法的功能就是把longitude列中的字符串轉(zhuǎn)化成數(shù)字荞胡。再用projection()給這個(gè)數(shù)值做個(gè)投影妈踊。
這樣，所有的點(diǎn)就出現(xiàn)在地圖上啦泪漂，大功告成廊营！
第五步：美化
我還對(duì)可視化做了一點(diǎn)美化，調(diào)整了地圖的位置萝勤，修改了樣式露筒，添加了標(biāo)題，以及鼠標(biāo)懸停顯示店鋪名和地點(diǎn)的功能敌卓。
