how to use Promise.all instead of queue in d3

Question

var popByName = d3.map();
queue()
.defer(d3.json, "municipalities-topo-simple.json")
.defer(d3.csv, "population-edited.csv", function(d) {
    popByName.set(d.name, +d.population);
})
.await(ready);

I use this code in D3 v3, but in d3 v5 queue was deprecated.

How can I change this code for using Promise.all?

Answer 1

At first glance your question seemed to be a duplicate of this one, but that's not the case for two reasons: you have a mix of d3.json and d3.csv and, besides that, your d3.csv requires a row conversion function.

Therefore, this is what you can do: first, create an array with the respective URLs. The order of the elements in the array is important because in this answer I'll use the indices to choose the correct method (so, if you have more URLs, you'll need a more scalable way to tell JSON from CSV).

const files = ["municipalities-topo-simple.json", "population-edited.csv"];

Then, we set the row conversion function:

const popByName = new Map();
function row(d) {
    popByName.set(d.name, +d.population);
};

Finally, we push the promises to an array, which we'll use with Promise.all:

const promises = [];

files.forEach(function(url, index) {
    promises.push(index ? d3.csv(url, row) : d3.json(url))
});

Promise.all(promises).then(function(data) {
    console.log(data); //check if all data was loaded
    //any code that depends on 'data' goes here
});