Создание мировой карты choropleth с D3

Я новый пользователь D3, и на прошлой неделе я убил свой мозг, пытаясь понять, как создать базовую карту мира хороплетов и запустить ее на самом деле! Я пробовал каждый доступный код и учебники, но ничего не работает! Данные, которые я пытаюсь показать, также включены в мой json, как «Species». В конце концов, я хотел бы просто иметь базовый choropleth, где он отображает данные видов, и когда я навис над ним, просто указывается название страны и ее значение. Любые предложения или рекомендации НАСТОЯТЕЛЬНО оценены.Создание мировой карты choropleth с D3

код в настоящее время с использованием (отредактирован, чтобы соответствовать моей информации) (оригинал найден в 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.12 ], [ -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

Любые предложения относительно того, что я делаю неправильно wo uld. Я чувствую, что у меня не останется никаких волос в конце этого хаха.

источник

2016-11-15 Sandra W

Что у вас есть? Любая ошибка в консоли? Отображается ли карта без цветов или вообще не отображается? Что произойдет, если вы console.log «мир» и «вид»? Чем больше информации вы предоставляете, тем лучше. –

@GerardoFurtado до сих пор нет ничего! Я получил ошибку, которая сказала, что «undefined не является объектом (оценка« world.objects.countries »)« Когда я набрал «мир», я получаю = $ 1, а затем «species» = $ 2 –

Поместите консоль.log (мир) 'как первая строка вашей« готовой »функции, то же самое с видами, и скажите мне результат. –

Прежде всего, вам необходимо создать decide if you want to usegeojson или topojson. Похоже, что ваши данные карты находятся в geojson, но вы пытаетесь их построить с помощью конструкций topojson.

Во-вторых, у вас нет проекции для вашей карты, чтобы контролировать ее display.

В-третьих, ваша цветовая гамма, похоже, не соответствует вашим данным. Значения находятся в 10-ти, пока ваш масштаб определяется только в сотых долях.

Применение этих исправлений начинает составлять карту. See example here.

Примечание, мне пришлось найти свой собственный GEOJson, чтобы он не соответствовал вашему формату.

источник

2016-11-15 14:14:35 Mark

Создание мировой карты choropleth с D3

ответ

Смежные вопросы