D3.js的應用：星巴克全球店址可視圖

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

先上最終成果—— Starbucks Locations Worldwide

（滑鼠放在綠點上會顯示店名和店鋪的地址）

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

製作心得

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

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

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

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

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

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

第二步： 鏈接路徑

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

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

附上英文解釋：

The geographic path generator, [d3.geoPath](d3/d3-geo), is similar to the shape generators in [d3-shape](d3/d3-shape): given a GeoJSON geometry or feature object, it generates an SVG path data string or [renders the path to a Canvas](d3.geoPath + Canvas). Canvas is recommended for dynamic or interactive projections to improve performance. Paths can be used with [projections](d3/d3-geo) or [transforms](d3/d3-geo), or they can be used to render planar geometry directly to Canvas or SVG.

第三步：讀取地圖數據

var map = svg.selectAll(path) nn .data(geo_data.features)// 加入我們地圖文件geo_data中的特徵nn .enter() nn .append(path) //添加到我們設置的路徑nn .attr(d, path)nn .style(fill, #b3cccc) // 填充顏色nn .style(stroke, black) //邊界線長度nn .style(stroke-width, 0.4); // 邊界線寬度n

大功告成！地圖已經畫在了頁面上。

第四步：添加點

svg.selectAll("circle")nn .data(data) //這裡的data是指我們的星巴克店址的datann .enter()nn .append("circle")nn .attr("cx", function(d) {nn return projection([ +d["Longitude"]]);nn })nn .attr("cy", function(d) {nn return projection([ +d["Latitude"] ]);nn })nn .attr("r", 2.2)nn .attr("fill", "#007245")nn .attr(opacity, 0.6)n

這是d3.js在畫布中添加點最常用的方法，在這裡點的橫坐標和縱坐標就是對應著我們的經緯度。因此，我也需要把經緯度按照我們之前投影地圖的方式轉化，這樣才能正確的顯示在我們2d的地圖中。[ +d["Longitude"]]這個寫法的功能就是把longitude列中的字元串轉化成數字。再用projection()給這個數值做個投影。

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

第五步：美化

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

參考文章

Mapping Data with D3