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?

Gerardo Furtado · Accepted Answer · 2019-12-10T23:23:54.057

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, set an array with the respective URLs. The order of the elements in the array is important, because I'll use the indices to set 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 = d3.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
});

PS: not related to the question, but it's worth mentioning that d3.map will be deprecated soon. So, if you plan to upgrade to future D3 releases, use the vanilla JavaScript new Map() instead.

how to use Promise.all instead of queue in d3

1 Answers1