How to load csv file into variable for usage with d3.js

Question

I need to write all values from a specific column in a .csv file to an array. Please execute the following working example and notice, that all the values from the column Address are successfully written into the array variable tmpArr

var csvString= "Address,longitude,latitude,geometry\n"+
"1,2,3,4\n5,6,7,8\n2,3,4,5\n6,7,8,9";

var t = d3.csv.parse(csvString);
var tmpArr = t.map(function(d){return d.Address;});
console.log(tmpArr);

<script src="https://d3js.org/d3.v3.min.js"></script>

But how can I load a .csv file into the variable csvString instead of a hardcoded string?

I successfully load the .csv file via ajax, but I only get the output ,,,

csvToChart("daten/kundenimporte/", "test.csv");

function csvToChart(basepath, filename)
{
    $.ajax({
        url: basepath + filename,
        method: "GET",
        success: myCallback
    });
}

function myCallback(response)
{
    var t = d3.csv.parse(response);
    d3.select("#output").html(
        t.map(function(d){
            return d.Kundengruppe;
        })
    );
}

I get ReferenceError: d is not defined.

How can I successfully load my .csv file?

Why use jQuery at all? [`d3.csv()`](https://github.com/d3/d3-fetch#csv) will do both, the loading **and** the parsing: `d3.csv("daten/kundenimporte/test.csv", myCallback);`. In `myCallback()` just use `response` which contains the parsed CSV as an array of objects already, no need for `t`. — altocumulus, Apr 18 '18 at 11:26
Im not sure how exactly to use your solution. It would be very nice if you could help me out — Black, Apr 18 '18 at 11:39
Ok, I'll put that into an answer. Are you bound to using D3 **v3** or could you opt for *v5*? — altocumulus, Apr 18 '18 at 11:40

altocumulus · Accepted Answer · 2018-04-18T12:50:07.117

1

There is no need to mix in jQuery as D3 provides methods for conveniently loading and parsing CSV files.

In the old versions 3 or 4 of D3 you could use d3.csv() which was part of the now deprecated d3-request module. This will employ an Ajax request for loading the file's content:

d3.csv("daten/kundenimporte/test.csv", function(data) {
  d3.select("#output").html(
    data.map(function(d){
      return d.Address;
    })
  );
});

If you decide on upgrading to v5, however, things have slightly changed, since d3.csv() despite having the same name is now part of the d3-fetch module and will return a Promise instead of executing a callback. Your code then becomes:

d3.csv("daten/kundenimporte/test.csv")
  .then(function(data) {   // Handle the resolved Promise
    d3.select("#output").html(
      data.map(function(d){
        return d.Address;
      })
    );
  });

edited Apr 18 '18 at 12:50

answered Apr 18 '18 at 12:28

altocumulus

21,179
13
61
84

Hey thanks for your answer, but the parameter `data` seems to be unused? I also get `ReferenceError: t is not defined` on your first example. – Black Apr 18 '18 at 12:34
1

@Black My bad, of course it needs to be `data` instead of the `t` I copied over from your code. See the update. – altocumulus Apr 18 '18 at 12:37
1

You don't have a property `Kundengruppe` in your CSV, hence, it logs `undefined`, try `Address` instead. – altocumulus Apr 18 '18 at 12:50
Ohh man Im so sorry, It was only because I accidentially used `Kundengruppe` instead of `Address`... now it works!Thx! – Black Apr 18 '18 at 12:51
My company uses `;` in .csv files for whatever reason, can someone please tell me how to deal with this? I replaced `d3.csv` with `d3.dsv` but It does not work. My only idea is to read the .csv file and replace the chars with javascript then load it with `d3.csv` – Black Apr 18 '18 at 13:45
Yes I tried it, it did not worked. But I finally solved it like this `d3.dsv(';')("daten/kundenimporte/test.csv", function(data) { ... }` – Black Apr 18 '18 at 14:03

score -2 · Answer 2 · answered Apr 18 '18 at 11:34

If you dont mind using a jQuery library, here might be an answer for you problem: How to read data From *.CSV file using javascript?

Otherwise a person added his own "quick and dirty" function above ^that answer.

Hope that helps.

/Good luck and happy coding

aniket mule · Answer 3 · 2019-03-14T05:51:09.340

-2

You should now migrate to d3 V4/V5. In V4, it goes like below.

d3.csv("your_path_to_csv file", function(data) {
//Your code goes here

//Now you can use 'data' variable as an array of objects
console.log
});

In V5, It goes like

d3.csv("your_path_to_csv file").then(function(data) {
//Your code
});

edited Mar 14 '19 at 05:51

answered Apr 18 '18 at 11:54

aniket mule

91
10

How to load csv file into variable for usage with d3.js

3 Answers3