Creating world choropleth map with D3

Question

I am a new D3 user, and have been killing my brain the last week trying to figure out how to create a basic world choropleth map and have it actually run! I have been trying every single available code and tutorials, but nothing seems to work! The data that I am trying to show is also included in my json, as the "Species". In the end, I would like to just have a basic choropleth where it displays the Species data, and when I hover over it simply provides the country name and the value. Any suggestions or guidance is GREATLY appreciated.

Code currently using (edited to fit my information) (original found at 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);
}

Example of my 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

And in case it would be useful, here is a snippet of my 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

Any suggestions as to what I am doing wrong would be greatly appreciated. I feel like I won't have any hair left at the end of this haha.

What do you have so far? Any error in the console? Is the map showing up with no colours, or not showing up at all? What happens if you console.log "world" and "species"? The more information you provide the best. — Gerardo Furtado, Nov 15 '16 at 05:05
@GerardoFurtado so far there is nothing! i got an error that said "undefined is not an object (evaluating 'world.objects.countries')" When I typed in "world" I get = $1 and then "species" = $2 — Sandra W, Nov 15 '16 at 05:16
Put a `console.log(world)` as the first line of your "ready" function, the same with species, and tell me the result. — Gerardo Furtado, Nov 15 '16 at 05:26
Same error... :( `TypeError: undefined is not an object (evaluating 'world.objects.countries')` — Sandra W, Nov 15 '16 at 05:33
This is not the error I was expecting to see. Please, remove *everything* inside "ready" and leave only the two console.log, and tell me the result. — Gerardo Furtado, Nov 15 '16 at 05:50
Now states `ReferenceError: Can't find variable: world` and I'm assuming it would do the same for species — Sandra W, Nov 15 '16 at 05:53
OK, now you have a starting point to solve: your callbacks are not working. If you want someone to help you I suggest you create a (non) working code using Plunker, CodePen, JSfiddle or whatever. — Gerardo Furtado, Nov 15 '16 at 05:55
[https://plnkr.co/edit/mbn8E5RDZdep174fDKEH?p=info] Like that? — Sandra W, Nov 15 '16 at 06:01
Yes, but you have to add the CSV and GeoJSON files using the option "new file" on the left hand side panel. — Gerardo Furtado, Nov 15 '16 at 10:11

score 1 · Accepted Answer · edited May 23 '17 at 10:30

First, you need to decide if you want to use geojson or topojson to build your map. It looks like your map data is in geojson but you are trying to build it using topojson constructs.

Second, you haven't provide a projection for your map to control it's display.

Third, your color scale doesn't seem to match your data. The values are in the 10s while your scale only is defined in the hundredths.

Applying these fixes starts to make a map. See example here.

Note, I had to find my own GEOJson so it might not exactly match your format.

Creating world choropleth map with D3

1 Answers1