d3.js v5 - Promise.all replaced d3.queue

Question

I\'ve been using d3.js v4 for sometime now and I\'ve learned that Mike Bostock has replaced the d3.queue in the v5 release with the Promise native JavaScript object. I would

Answer 1

You can simplify that code a lot: you don't net to use new Promise with d3.json, since d3.json will itself create the promise.

So, you can just do:

var files = ["data1.json", "data2.json", "data3.json"];
var promises = [];

files.forEach(function(url) {
    promises.push(d3.json(url))
});

Promise.all(promises).then(function(values) {
    console.log(values)
});

Or, if you're into the code golf, even shorter:

var files = ["data1.json", "data2.json", "data3.json"];

Promise.all(files.map(url => d3.json(url))).then(function(values) {
    console.log(values)
});

Since I cannot use JSON files in the S.O. snippet, check the console in this bl.ocks: https://bl.ocks.org/GerardoFurtado/f08993c9c729b0b3452ef1803ad9dcbf/c4b45c5acce6033085a667cbb7d34203d15de0f0

Answer 2

Here's an approach with ES6 async functions and ES6 array destructuring:

async function chart() {
  const [first, second] = await Promise.all([
    d3.json('data1.json'),
    d3.json('data2.json'),
  ])
  console.log('data2.json :', second)
}

chart()

Answer 3

You can also add a formatting function for your data as such if you want to clean up your data to your preference. .then() will have your data in a nice array which you can use later.

const myData = d3.csv("data.csv", formatterFunction)
.then(data => /* do whatever*/ )

function formatterFunction(row){
  // do formatting
  return // formatted data
   }