35

I'm trying to load data from a CSV file in D3; I have this code:

function update (error, data) {
    if (error !== null) {
        alert ("Couldn't load the dataset!");
    } else {
        //do something
    };

function changeData () {
    d3.csv ("data/dataset.csv", update);
}

If I use D3 v4 it works fine, but if I switch to v5 it doesn't work anymore. Can someone explain to me how to modify the code to make it work with D3 v5?

StormPooper
  • 493
  • 1
  • 6
  • 11
  • 1
    [The answer here](https://stackoverflow.com/questions/49281531/unable-to-load-csv-to-d3/49281661#49281661) may point you in the right direction. The API around it channged slightly and now it returns a promise. – pmkro Apr 01 '18 at 15:38
  • Take a look at the [changes markdown](https://github.com/d3/d3/blob/master/CHANGES.md). – Mark Apr 01 '18 at 16:49
  • @pmkro I can't close this as a duplicate because this question obviously is not a duplicate of that one you linked. On top of that, your answer for that one is wrong (regarding OP's question), you can even see a downvote. So, feel free to copy that answer here (without the stack snippets, stack snippet is for **running** code only) and deleting that one, since it's wrong. – Gerardo Furtado Apr 02 '18 at 00:53
  • @GerardoFurtado yes, repostedy answer on the more appropriate question. – pmkro Apr 02 '18 at 01:04

2 Answers2

67

d3 v5 uses the fetch API and returns a promise requiring the below code.

d3.csv('yourcsv.csv')
  .then(function(data) {
      // data is now whole data set
      // draw chart in here!
  })
  .catch(function(error){
     // handle error   
  })

In case in the future people want v4. d3 v4 on the other hand uses the XMLHttpRequest method, and does not return a promise requiring this code

d3.csv('yourcsv.csv', function(data) {
    //whole data set
    // draw chart here
})

csv loading is async so make sure to run your chart code within the csv function.

pmkro
  • 2,542
  • 2
  • 17
  • 25
  • Removed the depends on version. Kept the version 4 code for people who find this later. – pmkro Apr 02 '18 at 11:56
  • 3
    @Bananasaurus If the response is *not ok*, i.e. HTTP status other than 200-299, the returned promise will be rejected. You can use [`.catch()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) to handle these errors. D3 will not report any other errors nor will it give you access to the `Response` object. This has been raised as an [issue](https://github.com/d3/d3-fetch/issues/7) but was rejected by Mike Bostock, who encourages the use of the Fetch API should there be any need for further error handling. – altocumulus Apr 03 '18 at 09:47
  • I'm getting a `ReferenceError: fetch is not defined` – Zee Oct 28 '18 at 12:45
  • @Zee which browser are you using? This should work for all modern browsers https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API#Browser_compatibility You may need a polyfill to support IE versions. – pmkro Oct 29 '18 at 14:14
8

@pmkro's answer is good, but if you want to use ES7 async/await instead of Promise.then:

async function doThings() {
  const data = await d3.csv('yourcsv.csv');
  // do whatever with data here
}

doThings();
humfuzz
  • 201
  • 3
  • 8