Loading and parsing TOPOJSON

导入Topojson d3文件
地址：https://unpkg.com/topojson@3.0.2/dist/topojson.min.js
想要找d3文件的话去unpkg.com好像大部分都能找到的样子

Rendering geographic features

寻找合适的地图数据：谷歌搜索world-atlas npm，第一个网站点进去，然后选择合适的d3文件。
这个文件里面的地图是Topojson格式的，想要转化为geojson需要使用topojson中的feature函数，传入两个参数，例如：

json('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then(data => { const countries = feature(data, data.objects.countries);console.log(countries);    }

然后就可以使用数据，给每个数据添加path，然后通过设置属性d进行绘制

Using different map projections

图形的不同关键就在绘制d的函数的不同。
d3官网上有许多绘制不同形状地图的函数，可以根据需要选择自己喜欢的。
网址：https://github.com/d3/d3-geo-projection
这里选择的是geoEqualEarth，这个函数需要从d3文件中导入。于此同时还需要导入geoPath函数

const projection = geoEqualEarth();
const pathGenerator = geoPath().projection(projection);json('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then(data => { const countries = feature(data, data.objects.countries);console.log(countries);   svg.selectAll('path').data(countries.features).enter().append('path').attr('class', 'country').attr('d', pathGenerator);});

Rendering the projected sphere outline

然后就是通过设置CSS文件设置颜色，为了让地图的圆形凸显出来，我们要先给边框创建一个path

svg.append('path').attr('class', 'sphere').attr('d', pathGenerator({type:"Sphere"}));

然后在CSS文件中根据设置的类设置颜色：

.country{fill: #15ed76;stroke: black;stroke-opacity: 0.3;
}.sphere{fill: #15beed;
}

Tweaking map styles

最后的图形效果如图：
代码地址：https://vizhub.com/Edward-Elric233/b21d1d4d6db34c9092c3252f39212bda

Highlighting on Hover using CSS

上面的效果已经不错了，但是如果我们想要鼠标放在上面就自动变色的话，我们可以在CSS文件里面添加hover属性，然后就可以了。

styles.css

.country:hover {/*   鼠标放在上面可以变色 */fill : red;
}

效果图：

Adding simple tooltips(using )

我们还希望鼠标停留在上面的画可以提示国家的名称，想要做到这点，我们可以给每个path添加title，然后设置文本为国家名称即可。例如：
index.js

g.selectAll('path').data(countries.features).enter().append('path').attr('class', 'country').attr('d', pathGenerator).append('title')//添加title，然后鼠标放在上面就可以出现标题.text(d => d.properties.name);

我这里的数据直接就有国家名称，视频中的没有还需要使用tsv文件查找。如果有需要的话可以看原视频。

Loading multiple data files

Looking up country name from id

Panning & Zooming

当然我们还希望能够放大和缩小，这样才能看到更多的细节。为了实现这个效果，我们要把所有的东西都放到g上，然后再让svg.call(zoom().on('zoom', callback))添加鼠标滑轮事件。具体到这里我们希望图像的大小可以跟随滑轮的滚动而变化：

const g = svg.append('g');svg.call(zoom().on('zoom',() => {g.attr('

效果图：
这里的地图应该比上面的清晰许多，是因为这里使用的数据是以10m为单位的，所以分辨率高一点。如果需要的话只需要把最前面地图的topojson的网址换成10m的即可：https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-10m.json

（比较大，加载稍微有点慢）

视频中的内容到这里就结束了，可是我总觉得这样的颜色有些丑，我想起来在以前做柱状图的时候我嫌弃他的颜色太丑自己做了一个选择颜色的函数，在这里也可以用一下：

let colorSet = ['#eb2617', '#ffaa00', '#4dff00', '#00fbff', '#bb00ff', '#eeff00'];const createGetColor = (idx)=>{var i = idx || -1;return {get : () => {i=(i+1)%colorSet.length; return colorSet[i];}};
};const getColor = createGetColor();

createGetColor函数会返回一个对象，对象中get属性为函数，这个函数中使用了外层的变量i，因此i不会被释放掉，相当于静态变量，每次调用这个函数这个变量都会加一，起到遍历颜色数组的功能。

在有了这个获取颜色函数以后我们只需要删掉CSS文件中设置地图颜色语句，然后在append后面设置属性即可。

g.selectAll('path').data(countries.features).enter().append('path').attr('class', 'country').attr('fill', getColor.get).attr('d', pathGenerator).append('title')//添加title，然后鼠标放在上面就可以出现标题.text(d => d.properties.name);

效果图：

颜色选择的有点鲜艳，不过看起来还不错，有点世界地图的感觉。

代码地址：https://vizhub.com/Edward-Elric233/2e91c94015e345afb0c9f3ae6cde412f

感觉这个球体部分地方有些变形，我们可以换一个地图的形状

例如换成geoMercator：

数据可视化【十】绘制地图相关推荐

数据可视化——如何绘制地图
文章目录前言如何绘制地图添加配置项根据已有数据绘制地图整体代码展示前言前面我们学习了如何利用提供的数据来对数据进行处理,然后以折线图的形式展现出来,那么今天我将为大家分享如何将提数据以地 ...
前端数据可视化可绘制地图等插件:Highcharts、Echarts和D3
前端数据可视化插件有很多,但我用过的只有Highcharts(https://www.hcharts.cn/).Echarts(http://echarts.baidu.com/)和D3(https: ...
Python入门到实战（五）自动化办公、pandas操作Excel、数据可视化、绘制柱状图、操作Word、数据报表生成、pip install国内镜像下载
Python入门到实战(五)conda使用.pandas操作Excel.数据可视化.绘制柱状图.操作Word.数据报表生成.pip install国内镜像下载 conda使用常用操作配置VS+Co ...
python作中国地图背景气泡图_Python数据可视化：香港地图、房价可视化，绘制气泡图...
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 以下文章来源于DataCharm ,作者宁海涛前言今天的推文教程使用geopandas进行空间 ...
python气泡图的地图_Python数据可视化：香港地图、房价可视化，绘制气泡图
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 以下文章来源于DataCharm ,作者宁海涛前言今天的推文教程使用geopandas进行空间 ...
Python数据可视化：香港地图、房价可视化，绘制气泡图
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 以下文章来源于DataCharm ,作者宁海涛前言今天的推文教程使用geopandas进行空间 ...
2015-03-29-绘图和可视化(3)-绘制地图：图形化显示海地地震危机数据
--------------------------------------------------------------------------------------- -----(三)绘制地图 ...
数据图表可视化_数据可视化十大最有用的图表
数据图表可视化分析师每天使用的最佳数据可视化图表列表. (List of best data visualization charts that Analysts use on a daily ba ...
数据可视化: matplotlib绘制动态图及3维动画
动画可以有趣地展示某种现象.相比于静态图表,人们更容易被动画和交互式的图表所吸引.在描绘时间序列数据时,动画更有意义,例如多年来股票价格的波动,过去十年气候的季节性变化和和趋势,因为我们可以看到特定参 ...
数据可视化：绘制部分图表的核心代码实现
matplotlib和pyecharts绘制图表 pyecahrts 漏斗图核心代码地图核心代码柱状图核心代码组合图表核心代码数据大屏核心代码 matplotlib 棉棒图核心代码 ...

数据可视化【十】绘制地图