作為一個數(shù)據(jù)分析的新手，最近我也在kaggle上晃蕩，不過主要是觀摩大師以及尋找有趣的數(shù)據(jù)集的。這不，今天早上發(fā)現(xiàn)了一個星巴克的數(shù)據(jù)集，下載下來后，發(fā)現(xiàn)自帶經(jīng)緯度，就打算用剛學不久，還熱乎的d3.js來做個可視化。

先上最終成果—— Starbucks Locations Worldwide
（鼠標放在綠點上會顯示店名和店鋪的地址）

截圖也來一張（有沒有覺得我的配色很友好=。=）：

星巴克全球店址

源碼都放在了我的github上：Starbucks Locations Worldwide on github

制作心得

注意：這個可視化使用的是d3的v4版

首先在把點畫上去之前，先要把一幅地圖放在頁面上。這時候就導入我提前準備好的world_countries.json文件，這個文件生成自http://geojson.io/，它里面包含了不同國家地區(qū)的經(jīng)緯度，就能在畫布上畫出一個地球。

添加svg的過程就不贅述了，具體來說下怎么畫出地球和添加點。

第一步： 設定投影方法和位置

利用d3.geoMercator()把地圖平面投影化，為了接下來能畫在2維的畫布上。

var projection =  d3.geoMercator()
                               .scale(200)//根據(jù)個人喜好縮放
                               .translate( [760, 470]); //決定了投影的中心，根據(jù)個人喜好調(diào)整

第二步： 鏈接路徑

var path = d3.geoPath().projection(projection);

這行代碼雖短，但卻至關(guān)重要，因為它根據(jù)之前設置的投影，生成了了一個SVG的路徑數(shù)據(jù)串，簡單點說，就是把路徑添加到了畫布上，我們能開始作畫了！

附上英文解釋：

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') //添加到我們設置的路徑
                     .attr('d', path)
                     .style('fill', '#b3cccc') // 填充顏色
                     .style('stroke', 'black') //邊界線長度
                     .style('stroke-width', 0.4); // 邊界線寬度

大功告成！地圖已經(jīng)畫在了頁面上。

第四步：添加點

        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在畫布中添加點最常用的方法，在這里點的橫坐標和縱坐標就是對應著我們的經(jīng)緯度。因此，我也需要把經(jīng)緯度按照我們之前投影地圖的方式轉(zhuǎn)化，這樣才能正確的顯示在我們2d的地圖中。[ +d["Longitude"]]這個寫法的功能就是把longitude列中的字符串轉(zhuǎn)化成數(shù)字。再用projection()給這個數(shù)值做個投影。

這樣，所有的點就出現(xiàn)在地圖上啦，大功告成！

第五步：美化

我還對可視化做了一點美化，調(diào)整了地圖的位置，修改了樣式，添加了標題，以及鼠標懸停顯示店鋪名和地點的功能。

參考文章

Mapping Data with D3