如何使用d3创建世界的choropleth？ [英] How to create a choropleth of the world using d3?
问题描述
本教程非常适合使用d3创建choropleths，但它的数据是以美国为中心的。在哪里可以获得世界地图的相应数据？
我确定它在文档的某个地方，但我找不到它。 这是我找到的最近的，但在那里的一个世界地图具体说，它不推荐choropleths。此外，
注意：这个答案是为d3的版本2。版本3是现在，它有真棒新的功能，创建更好的几何分割和解决下面提到的填充问题。此外，用于设置投影的界面_ 可能会在V3中更改（不确定bc我没有尝试过）。
有一个json文件可用于整个世界，你可以渲染它等价于us-states.json coropleth（使用Albers等面积投影） - 假设你理解（和确定）的事实，一个Albers投影的世界地图看起来像这，这不是多数人认出世界地图。
首先，您需要整个世界的json数据，这是世界使用的相同数据
$ b
$ b
<！DOCTYPE html>
< meta charset =utf-8>
< title> Mercator投影< / title>
< style>
path {
fill：#ccc;
stroke：#fff;
}
< / style>
< svg width =960height =500>< / svg>
< script src =http://d3js.org/d3.v2.js?2.9.1>< / script>
< script type =text / javascript>
d3.json（world-countries.json，function（collection）{
d3.select（svg）。selectAll（path）
.data（collection.features ）
.enter（）。append（path）
.attr（d，d3.geo.path（）。projection（
d3.geo.albers $ b .parallels（[10，80]）
.origin（[0,40]）
.translate（[500,250]）
.scale（100）
） ;
}）;
< / script>
origin（）， parallels（）， translate（）和调整得到不同的结果。
Antartica有一个问题，由于这个投影的性质，它被翻转，并不是一个闭合的形状，所以它的填充覆盖了整个世界。你必须从json中删除它，或者不应用填充。
同样由于某种原因，巴西（和其他几个人）没有得到正确的呈现时，我试过这个。邓诺为什么。你必须检查svg和数据，找出为什么。
This tutorial is a great intro to creating choropleths with d3, but it's data is US-centric. Where do I get the corresponding data for a world map?
I'm sure it's in the docs somewhere, but I can't find it. This is the closest I've found, but the one world map on there specifically says it's not recommended for choropleths. Also,
NOTE: This answer was written for version 2 of d3. Version 3 is out now, and it has awesome new features that create better geometry segmentation and solve the fill issue mentioned below. Also, the interface for setting up projections _may_ have changed in V3 (not sure bc I haven't tried).
There is a json file available for the entire world, and you can render it equivalently to the us-states.json coropleth (using an Albers equal area projection) – assuming you understand (and are ok with) the fact that an Albers-projected world map looks like this, which is not quite how most people recognize a world map.
First you need the json data for the entire world, which is the same data used by the world mercator projection example.
Then you need to render the world json data using a customized Albers projection:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Mercator Projection</title>
<style>
path {
fill: #ccc;
stroke: #fff;
}
</style>
<svg width="960" height="500"></svg>
<script src="http://d3js.org/d3.v2.js?2.9.1"></script>
<script type="text/javascript">
d3.json("world-countries.json", function(collection) {
d3.select("svg").selectAll("path")
.data(collection.features)
.enter().append("path")
.attr("d", d3.geo.path().projection(
d3.geo.albers()
.parallels([10, 80])
.origin([0,40])
.translate([500,250])
.scale(100)
));
});
</script>
origin(), parallels(), translate(), and scale() values can be tweaked to get different results.
There's a problem with Antartica, which – due to the nature of this projection – gets "flipped" and is not a closed shape, so its fill covers the whole world. You either have to remove it from the json, or don't apply fill to it.
Also for some reason Brazil (and couple of others) didn't get rendered properly when I tried this. Dunno why. You'd have to examine the svg and the data to figure out why.
这篇关于如何使用d3创建世界的choropleth？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
