D3.js的应用：星巴克全球店址可视图

作为一个数据分析的新手，最近我也在kaggle上晃荡，不过主要是观摩大师以及寻找有趣的数据集的。这不，今天早上发现了一个星巴克的数据集，下载下来后，发现自带经纬度，就打算用刚学不久，还热乎的d3.js来做个可视化。

先上最终成果—— Starbucks Locations Worldwide
（鼠标放在绿点上会显示店名和店铺的地址）

截图也来一张（有没有觉得我的配色很友好=。=）：

星巴克全球店址

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

制作心得

注意：这个可视化使用的是d3的v4版

首先在把点画上去之前，先要把一幅地图放在页面上。这时候就导入我提前准备好的world_countries.json文件，这个文件生成自http://geojson.io/，它里面包含了不同国家地区的经纬度，就能在画布上画出一个地球。

添加svg的过程就不赘述了，具体来说下怎么画出地球和添加点。

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

利用d3.geoMercator()把地图平面投影化，为了接下来能画在2维的画布上。

var projection =  d3.geoMercator()
                               .scale(200)//根据个人喜好缩放
                               .translate( [760, 470]); //决定了投影的中心，根据个人喜好调整

第二步： 链接路径

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

这行代码虽短，但却至关重要，因为它根据之前设置的投影，生成了了一个SVG的路径数据串，简单点说，就是把路径添加到了画布上，我们能开始作画了！

附上英文解释：

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.

第三步：读取地图数据

        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); // 边界线宽度

大功告成！地图已经画在了页面上。

第四步：添加点

        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在画布中添加点最常用的方法，在这里点的横坐标和纵坐标就是对应着我们的经纬度。因此，我也需要把经纬度按照我们之前投影地图的方式转化，这样才能正确的显示在我们2d的地图中。[ +d["Longitude"]]这个写法的功能就是把longitude列中的字符串转化成数字。再用projection()给这个数值做个投影。

这样，所有的点就出现在地图上啦，大功告成！

第五步：美化

我还对可视化做了一点美化，调整了地图的位置，修改了样式，添加了标题，以及鼠标悬停显示店铺名和地点的功能。

参考文章

Mapping Data with D3