使用 D3 创建世界等值线图
Creating world choropleth map with D3
我是 D3 的新用户，上周一直在绞尽脑汁想弄清楚如何创建基本的世界等值线地图并实际使用它 运行！我一直在尝试每一个可用的代码和教程，但似乎没有任何效果！我要显示的数据也包含在我的 json 中，如 "Species"。最后，我想要一个基本的等值线，它显示物种数据，当我将鼠标悬停在它上面时，它只提供国家名称和值。非常感谢任何建议或指导。
当前使用的代码（已编辑以适合我的信息）（原始代码位于 http://bl.ocks.org/mbostock/3306362）
var width = 960,
height = 500;
var color = d3.scale.threshold()
.domain([0.02, 0.04, 0.06, 0.08, 0.10])
.range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]);
var path = d3.geo.path();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
queue()
.defer(d3.json, "World.geojson")
.defer(d3.csv, "species.csv")
.await(ready);
function ready(error, world, species) {
if (error) throw error;
var rateById = {};
species.forEach(function(d) { rateById[d.ISO_3DIGIT] = +d.Species; });
svg.append("g")
.attr("class", "countries")
.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
.enter().append("path")
.attr("d", path)
.style("fill", function(d) { return color(rateById[d.ISO_3DIGIT]); });
svg.append("path")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a.ISO_3DIGIT !== b.ISO_3DIGIT; }))
.attr("class", "countries")
.attr("d", path);
}
我的例子json
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "OBJECTID": 3, "FIPS_CNTRY": "AA", "ISO_3DIGIT": "ABW", "NAME": "Aruba", "LONG_NAME": "Aruba", "Shape_Leng": 0.698924, "Shape_Area": 0.015129, "Number_of_": 26.000000, "Species": "26" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -69.991201758254533, 12.564936161074968 ], [ -69.987234354082148, 12.559555769083488 ], [ -69.983659267461235, 12.557785153262216 ], [ -69.977896332649607, 12.558793663796507 ], [ -69.979292630850239, 12.557989954972413 ], [ -69.978672147201848, 12.556384921426968 ], [ -69.97182917607563, 12.552132010383957 ], [ -69.971315503107974, 12.549742102516007 ], [ -69.969411254325905, 12.550420641899109 ], [ -69.963384270467714, 12.546648621736495 ], [ -69.962705135733415, 12.546379327843681 ], [ -69.960937500265402, 12.54659593135716 ], [ -69.958110928376641, 12.546536564410928 ], [ -69.957436323527475, 12.545586347931589 ], [ -69.956397414109347, 12.543688773917779 ], [ -69.955672860014488, 12.537055253996755 ], [ -69.94667124708036, 12.540498614219644 ], [ -69.944165825792197, 12.536637425376853 ], [ -69.940813541711577, 12.53483021254425 ], [ -69.933964252848, 12.527834058095266 ], [ -69.928611516808019, 12.525171756371435 ], [ -69.928868055616249, 12.521762966987296 ], [ -69.926651835613711, 12.517770409676643 ], [ -69.926916956652235, 12.515210151327381 ], [ -69.924417734390943, 12.515246749238088 ], [ -69.924206257013111, 12.513279556906014 ], [ -69.918271422188354, 12.508972763881957 ], [ -69.917961121008943, 12.506630659477366 ], [ -69.909244775725824, 12.502312660001223 ], [ -69.898086666766233, 12.489711761488593 ], [ -69.895915150263988, 12.485523343527461 ], [ -69.890029430114112, 12.485061645078815 ], [ -69.887601852343607, 12.482514620253482 ], [ -69.886337637571899, 12.480468749832937 ], [ -69.886398077409353, 12.480468749832937 ], [ -69.884469747480864, 12.478347062966577 ], [ -69.883330345119305, 12.475240111242101 ], [ -69.881198167661296, 12.463264107552504 ], [ -69.87345480879236, 12.447664141786674 ], [ -69.873569250220726, 12.43877196285581 ], [ -69.871752858007994, 12.436580657671186 ], [ -69.868788957844117, 12.423137068321012 ], [ -69.865280151257934, 12.41843080543731 ], [ -69.866732954762028, 12.415024757186757 ], [ -69.870972514469941, 12.414948224880675 ], [ -69.873276234010973, 12.412573218779016 ], [ -69.88098335289942, 12.41400110746514 ], [ -69.88356542610353, 12.413048505983738 ], [ -69.884616732676079, 12.414072513635574 ], [ -69.884146571607005, 12.417217254872412 ], [ -69.887623310167612, 12.420512437399054 ], [ -69.890819430572265, 12.421990751971634 ], [ -69.895043253943015, 12.42066562162114 ], [ -69.904002309159239, 12.426742315505464 ], [ -69.905593753049232, 12.426611900318903 ], [ -69.908368229909854, 12.430709243037143 ], [ -69.911455273342199, 12.430269956593236 ], [ -69.912853240684512, 12.431570410446056 ], [ -69.91991043122141, 12.431113004461565 ], [ -69.92511200921183, 12.433772921183333 ], [ -69.9261195655655, 12.432376146342051 ], [ -69.927280545360873, 12.432524561459331 ], [ -69.927960872596202, 12.433737158742872 ], [ -69.927171945928535, 12.435858845609232 ], [ -69.924864053533213, 12.436950207086397 ], [ -69.925641417617328, 12.439117670344217 ], [ -69.932209610784923, 12.441419124492995 ], [ -69.931949854202401, 12.440304756559271 ], [ -69.932809710399795, 12.440086125973949 ], [ -69.940516829288242, 12.441873311803874 ], [ -69.941695213663195, 12.444035648926047 ], [ -69.944575071282486, 12.443960070800586 ], [ -69.949141621788385, 12.447995424149497 ], [ -69.953771352366005, 12.450386046978451 ], [ -69.957332611011168, 12.454207063105457 ], [ -69.960015535088871, 12.455209255003126 ], [ -69.960937500265402, 12.457031249992156 ], [ -69.965335846072435, 12.46140086695641 ], [ -69.968737721468642, 12.463189721028812 ], [ -69.970178961489864, 12.465870976864096 ], [ -69.971952557664395, 12.465869546042711 ], [ -69.975418925243218, 12.468608975423876 ], [ -69.974787950103803, 12.474527478560276 ], [ -69.975870370521193, 12.473966240449613 ], [ -69.976553559399235, 12.469965219619155 ], [ -69.977643847085858, 12.469150305242351 ], [ -69.978891372239048, 12.470363021236437 ], [ -69.977841854418045, 12.47226095228109 ], [ -69.990635752837704, 12.478773474716093 ], [ -69.989674448616881, 12.47935545479038 ], [ -69.990520358128038, 12.480256677103966 ], [ -69.99439775904932, 12.481073141012644 ], [ -69.995885371712518, 12.478585839265065 ], [ -69.998836756011485, 12.480469346083453 ], [ -70.000186443249731, 12.480844259055289 ], [ -70.000915646839644, 12.484424948452613 ], [ -70.010489702537711, 12.488595008552807 ], [ -70.012077451113441, 12.49105381977796 ], [ -70.009847760165997, 12.490551233652525 ], [ -70.009806275339315, 12.492042660340474 ], [ -70.017953276922185, 12.499185323343966 ], [ -70.020050763931579, 12.499186754165351 ], [ -70.020542144504361, 12.499400615645868 ], [ -70.028274059500234, 12.503120660390152 ], [ -70.029504418394197, 12.50432467454408 ], [ -70.030076026587324, 12.50544083122935 ], [ -70.030136943065486, 12.509627223017901 ], [ -70.033386826740639, 12.514538526831529 ], [ -70.036986828179579, 12.514753103273108 ], [ -70.042536974401855, 12.518800258425188 ], [ -70.043136954406918, 12.520274519753286 ], [ -70.046085357453251, 12.521554708283134 ], [ -70.050869106823825, 12.525797605375146 ], [ -70.053049444776036, 12.530033350158988 ], [ -70.056365132744645, 12.530872344782892 ], [ -70.058509111106559, 12.536482572912405 ], [ -70.063081979349874, 12.539495944782004 ], [ -70.062934040873301, 12.541902780588828 ], [ -70.062373756943316, 12.543691158020522 ], [ -70.055176973638424, 12.554270028938674 ], [ -70.055221438818307, 12.560495853800603 ], [ -70.047874331135461, 12.568862318741026 ], [ -70.045472264433442, 12.575522660942056 ], [ -70.04475784300007, 12.580821037460908 ], [ -70.04475784300007, 12.581284642472269 ], [ -70.046714544740439, 12.588581204658851 ], [ -70.050084113790831, 12.595303773650244 ], [ -70.053751349445236, 12.610625743683102 ], [ -70.058658242084221, 12.616226554112188 ], [ -70.057161450040894, 12.622090339797353 ], [ -70.052592754651869, 12.623774051431326 ], [ -70.051294803612279, 12.623705506004285 ], [ -70.049635767576603, 12.621721744562819 ], [ -70.046384453979329, 12.620525240647339 ], [ -70.041723132016898, 12.613908410344834 ], [ -70.033449649781517, 12.609635948939854 ], [ -70.03106045687457, 12.606407165158544 ], [ -70.023722171540953, 12.603497504905931 ], [ -70.017495036366824, 12.595313549280888 ], [ -70.013124227800859, 12.586606860018549 ], [ -69.99986994304345, 12.572924852300105 ], [ -69.993902921482629, 12.568243979975705 ], [ -69.991201758254533, 12.564936161074968 ] ] ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 4, "FIPS_CNTRY": "AC", "ISO_3DIGIT": "ATG", "NAME": "Antigua and Barbuda", "LONG_NAME": "Antigua and Barbuda", "Shape_Leng": 2.893306, "Shape_Area": 0.037020, "Number_of_": 32.000000, "Species": "32" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -62.34320020652433, 16.932690858
如果它有用，这里是我的 cvs 的片段：
OBJECTID,ISO_3DIGIT,NAME,LONG_NAME,Species
3,ABW,Aruba,Aruba,26
4,ATG,Antigua and Barbuda,Antigua and Barbuda,32
5,ARE,United Arab Emirates,United Arab Emirates,37
6,AFG,Afghanistan,Islamic Republic of Afghanistan,33
7,DZA,Algeria,People's Democratic Republic of Algeria,68
8,AZE,Azerbaijan,Republic of Azerbaijan,38
9,ALB,Albania,Republic of Albania,57
10,ARM,Armenia,Republic of Armenia,27
任何关于我做错了什么的建议将不胜感激。感觉看完了头发都不剩了哈哈
首先，您需要 decide if you want to use geojson 或 topojson 来构建您的地图。看起来您的地图数据在 geojson 中，但您正在尝试使用 topojson 构造来构建它。
其次，您还没有为您的地图提供投影来控制它 display。
第三，您的色标似乎与您的数据不匹配。这些值以 10 为单位，而您的比例仅以百分之一定义。
应用这些修复程序开始制作地图。 See example here。
注意，我必须找到自己的 GEOJson，所以它可能与您的格式不完全匹配。
我是 D3 的新用户，上周一直在绞尽脑汁想弄清楚如何创建基本的世界等值线地图并实际使用它 运行！我一直在尝试每一个可用的代码和教程，但似乎没有任何效果！我要显示的数据也包含在我的 json 中，如 "Species"。最后，我想要一个基本的等值线，它显示物种数据，当我将鼠标悬停在它上面时，它只提供国家名称和值。非常感谢任何建议或指导。
当前使用的代码（已编辑以适合我的信息）（原始代码位于 http://bl.ocks.org/mbostock/3306362）
var width = 960,
height = 500;
var color = d3.scale.threshold()
.domain([0.02, 0.04, 0.06, 0.08, 0.10])
.range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]);
var path = d3.geo.path();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
queue()
.defer(d3.json, "World.geojson")
.defer(d3.csv, "species.csv")
.await(ready);
function ready(error, world, species) {
if (error) throw error;
var rateById = {};
species.forEach(function(d) { rateById[d.ISO_3DIGIT] = +d.Species; });
svg.append("g")
.attr("class", "countries")
.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
.enter().append("path")
.attr("d", path)
.style("fill", function(d) { return color(rateById[d.ISO_3DIGIT]); });
svg.append("path")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a.ISO_3DIGIT !== b.ISO_3DIGIT; }))
.attr("class", "countries")
.attr("d", path);
}
我的例子json
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "OBJECTID": 3, "FIPS_CNTRY": "AA", "ISO_3DIGIT": "ABW", "NAME": "Aruba", "LONG_NAME": "Aruba", "Shape_Leng": 0.698924, "Shape_Area": 0.015129, "Number_of_": 26.000000, "Species": "26" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -69.991201758254533, 12.564936161074968 ], [ -69.987234354082148, 12.559555769083488 ], [ -69.983659267461235, 12.557785153262216 ], [ -69.977896332649607, 12.558793663796507 ], [ -69.979292630850239, 12.557989954972413 ], [ -69.978672147201848, 12.556384921426968 ], [ -69.97182917607563, 12.552132010383957 ], [ -69.971315503107974, 12.549742102516007 ], [ -69.969411254325905, 12.550420641899109 ], [ -69.963384270467714, 12.546648621736495 ], [ -69.962705135733415, 12.546379327843681 ], [ -69.960937500265402, 12.54659593135716 ], [ -69.958110928376641, 12.546536564410928 ], [ -69.957436323527475, 12.545586347931589 ], [ -69.956397414109347, 12.543688773917779 ], [ -69.955672860014488, 12.537055253996755 ], [ -69.94667124708036, 12.540498614219644 ], [ -69.944165825792197, 12.536637425376853 ], [ -69.940813541711577, 12.53483021254425 ], [ -69.933964252848, 12.527834058095266 ], [ -69.928611516808019, 12.525171756371435 ], [ -69.928868055616249, 12.521762966987296 ], [ -69.926651835613711, 12.517770409676643 ], [ -69.926916956652235, 12.515210151327381 ], [ -69.924417734390943, 12.515246749238088 ], [ -69.924206257013111, 12.513279556906014 ], [ -69.918271422188354, 12.508972763881957 ], [ -69.917961121008943, 12.506630659477366 ], [ -69.909244775725824, 12.502312660001223 ], [ -69.898086666766233, 12.489711761488593 ], [ -69.895915150263988, 12.485523343527461 ], [ -69.890029430114112, 12.485061645078815 ], [ -69.887601852343607, 12.482514620253482 ], [ -69.886337637571899, 12.480468749832937 ], [ -69.886398077409353, 12.480468749832937 ], [ -69.884469747480864, 12.478347062966577 ], [ -69.883330345119305, 12.475240111242101 ], [ -69.881198167661296, 12.463264107552504 ], [ -69.87345480879236, 12.447664141786674 ], [ -69.873569250220726, 12.43877196285581 ], [ -69.871752858007994, 12.436580657671186 ], [ -69.868788957844117, 12.423137068321012 ], [ -69.865280151257934, 12.41843080543731 ], [ -69.866732954762028, 12.415024757186757 ], [ -69.870972514469941, 12.414948224880675 ], [ -69.873276234010973, 12.412573218779016 ], [ -69.88098335289942, 12.41400110746514 ], [ -69.88356542610353, 12.413048505983738 ], [ -69.884616732676079, 12.414072513635574 ], [ -69.884146571607005, 12.417217254872412 ], [ -69.887623310167612, 12.420512437399054 ], [ -69.890819430572265, 12.421990751971634 ], [ -69.895043253943015, 12.42066562162114 ], [ -69.904002309159239, 12.426742315505464 ], [ -69.905593753049232, 12.426611900318903 ], [ -69.908368229909854, 12.430709243037143 ], [ -69.911455273342199, 12.430269956593236 ], [ -69.912853240684512, 12.431570410446056 ], [ -69.91991043122141, 12.431113004461565 ], [ -69.92511200921183, 12.433772921183333 ], [ -69.9261195655655, 12.432376146342051 ], [ -69.927280545360873, 12.432524561459331 ], [ -69.927960872596202, 12.433737158742872 ], [ -69.927171945928535, 12.435858845609232 ], [ -69.924864053533213, 12.436950207086397 ], [ -69.925641417617328, 12.439117670344217 ], [ -69.932209610784923, 12.441419124492995 ], [ -69.931949854202401, 12.440304756559271 ], [ -69.932809710399795, 12.440086125973949 ], [ -69.940516829288242, 12.441873311803874 ], [ -69.941695213663195, 12.444035648926047 ], [ -69.944575071282486, 12.443960070800586 ], [ -69.949141621788385, 12.447995424149497 ], [ -69.953771352366005, 12.450386046978451 ], [ -69.957332611011168, 12.454207063105457 ], [ -69.960015535088871, 12.455209255003126 ], [ -69.960937500265402, 12.457031249992156 ], [ -69.965335846072435, 12.46140086695641 ], [ -69.968737721468642, 12.463189721028812 ], [ -69.970178961489864, 12.465870976864096 ], [ -69.971952557664395, 12.465869546042711 ], [ -69.975418925243218, 12.468608975423876 ], [ -69.974787950103803, 12.474527478560276 ], [ -69.975870370521193, 12.473966240449613 ], [ -69.976553559399235, 12.469965219619155 ], [ -69.977643847085858, 12.469150305242351 ], [ -69.978891372239048, 12.470363021236437 ], [ -69.977841854418045, 12.47226095228109 ], [ -69.990635752837704, 12.478773474716093 ], [ -69.989674448616881, 12.47935545479038 ], [ -69.990520358128038, 12.480256677103966 ], [ -69.99439775904932, 12.481073141012644 ], [ -69.995885371712518, 12.478585839265065 ], [ -69.998836756011485, 12.480469346083453 ], [ -70.000186443249731, 12.480844259055289 ], [ -70.000915646839644, 12.484424948452613 ], [ -70.010489702537711, 12.488595008552807 ], [ -70.012077451113441, 12.49105381977796 ], [ -70.009847760165997, 12.490551233652525 ], [ -70.009806275339315, 12.492042660340474 ], [ -70.017953276922185, 12.499185323343966 ], [ -70.020050763931579, 12.499186754165351 ], [ -70.020542144504361, 12.499400615645868 ], [ -70.028274059500234, 12.503120660390152 ], [ -70.029504418394197, 12.50432467454408 ], [ -70.030076026587324, 12.50544083122935 ], [ -70.030136943065486, 12.509627223017901 ], [ -70.033386826740639, 12.514538526831529 ], [ -70.036986828179579, 12.514753103273108 ], [ -70.042536974401855, 12.518800258425188 ], [ -70.043136954406918, 12.520274519753286 ], [ -70.046085357453251, 12.521554708283134 ], [ -70.050869106823825, 12.525797605375146 ], [ -70.053049444776036, 12.530033350158988 ], [ -70.056365132744645, 12.530872344782892 ], [ -70.058509111106559, 12.536482572912405 ], [ -70.063081979349874, 12.539495944782004 ], [ -70.062934040873301, 12.541902780588828 ], [ -70.062373756943316, 12.543691158020522 ], [ -70.055176973638424, 12.554270028938674 ], [ -70.055221438818307, 12.560495853800603 ], [ -70.047874331135461, 12.568862318741026 ], [ -70.045472264433442, 12.575522660942056 ], [ -70.04475784300007, 12.580821037460908 ], [ -70.04475784300007, 12.581284642472269 ], [ -70.046714544740439, 12.588581204658851 ], [ -70.050084113790831, 12.595303773650244 ], [ -70.053751349445236, 12.610625743683102 ], [ -70.058658242084221, 12.616226554112188 ], [ -70.057161450040894, 12.622090339797353 ], [ -70.052592754651869, 12.623774051431326 ], [ -70.051294803612279, 12.623705506004285 ], [ -70.049635767576603, 12.621721744562819 ], [ -70.046384453979329, 12.620525240647339 ], [ -70.041723132016898, 12.613908410344834 ], [ -70.033449649781517, 12.609635948939854 ], [ -70.03106045687457, 12.606407165158544 ], [ -70.023722171540953, 12.603497504905931 ], [ -70.017495036366824, 12.595313549280888 ], [ -70.013124227800859, 12.586606860018549 ], [ -69.99986994304345, 12.572924852300105 ], [ -69.993902921482629, 12.568243979975705 ], [ -69.991201758254533, 12.564936161074968 ] ] ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 4, "FIPS_CNTRY": "AC", "ISO_3DIGIT": "ATG", "NAME": "Antigua and Barbuda", "LONG_NAME": "Antigua and Barbuda", "Shape_Leng": 2.893306, "Shape_Area": 0.037020, "Number_of_": 32.000000, "Species": "32" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -62.34320020652433, 16.932690858
如果它有用，这里是我的 cvs 的片段：
OBJECTID,ISO_3DIGIT,NAME,LONG_NAME,Species
3,ABW,Aruba,Aruba,26
4,ATG,Antigua and Barbuda,Antigua and Barbuda,32
5,ARE,United Arab Emirates,United Arab Emirates,37
6,AFG,Afghanistan,Islamic Republic of Afghanistan,33
7,DZA,Algeria,People's Democratic Republic of Algeria,68
8,AZE,Azerbaijan,Republic of Azerbaijan,38
9,ALB,Albania,Republic of Albania,57
10,ARM,Armenia,Republic of Armenia,27
任何关于我做错了什么的建议将不胜感激。感觉看完了头发都不剩了哈哈
首先，您需要 decide if you want to use geojson 或 topojson 来构建您的地图。看起来您的地图数据在 geojson 中，但您正在尝试使用 topojson 构造来构建它。
其次，您还没有为您的地图提供投影来控制它 display。
第三，您的色标似乎与您的数据不匹配。这些值以 10 为单位，而您的比例仅以百分之一定义。
应用这些修复程序开始制作地图。 See example here。
注意，我必须找到自己的 GEOJson，所以它可能与您的格式不完全匹配。