score:1

Accepted answer

topojson is a really powerfull tool. it has its own cli (command line interface) to generate your own topojson files.

that cli allows you to create a unique file with the topology and the data you want to merge with.

even though it is in its v3.0.2 the first versión looks the clear one to me. this is an example of how you can merge a csv file with a json through a common id attribute.

# simplified versión from https://bl.ocks.org/luissevillano/c7690adccf39bafe583f72b044e407e8
# note is using topojson cli v1
topojson \
  -e data.csv \
  --id-property cusec,cod \
  -p population=+t1_1,area=+shape_area \ 
  -o cv.json \
  -- cv/shapes/census.json

there is a data.csv file with a cod column and census.json file with a property named cusec. - using the --id-property you can specify which attributes will be used in the merge. - with the property -p you can create new properties on the fly.

this is the solid solution where you use one unique file (with one unique request) with the whole data. this best scenario is not always possible so another solution could be the next one.

getting back to javascript, you can create a new variable accessible through the attribute in common the following way. having your data the format:

// countrystatistics
{
  "idtopo": "004",
  "country": "afghanistan",
  "countrycode": "afg",
  // ..
},

and your topojson file the structure:

{"type":"polygon","arcs":[[0,1,2,3,4,5]],"id":"004"},
{"type":"multipolygon","arcs":[[[6,7,8,9]],[[10,11,12]]],"id":"024"} // ...



a common solution to this type of situation is to create an array variable accessible by that idtopo:

var databyid = [];
countrystatistics.foreach(function(d) {
    databyid[d.idtopo] = d;
});

then, that variable will have the next structure:

[
    004:{
      "idtopo": "004",
      "country": "afghanistan",
      "countrycode": "afg",
      //...
  },
    008: {
      //...
    }
]

from here, you can access the properties through its idtopo attribute, like this:

databyid['004'] // {"idtopo":"004","country":"afghanistan","countrycode":"afg" ...}

you can decide to iterate through the topo data and add these properties to each feature:

var countries = topojson
  .feature(data, data.objects.countries)
  .features.map(function(d) {
    d.properties = databyid[d.id];
    return d
  });

or use this array whenever you need it

// ...
.on("mouseover", function(d) {
  d3.select(this).classed("hovered", true);
  console.log(databyid[d.id]);
});

Related Query