CODEWITHSUNDEEP
filed3.js
Sledge
Sledge

Reputation: 1345

Load Delimiter Separated Values in D3

I am trying to load a pipe separated value file in D3 using the generic d3.dsvFormat() function. While I do not get an error, nothing happens which I think is because the callback function is not executed.

I did check the documentation here but did not find it that helpful: https://github.com/d3/d3-dsv/blob/master/README.md#dsvFormat

Is there a problem with my syntax?

var psv = d3.dsvFormat("|");
psv.parse("my_file.txt", function(error, data) {
    Do a bunch of stuff with the data....
    console.log(data);  //nothing happens here
});

Upvotes: 5

Views: 1328

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38201

psv.parse wants text, you are passing text - just that it doesn't have any pipe in it: "my_file.txt". As this is one line of text and the first line of text translates into column names, you won't get any data with this.

Your problem is that psv.parse won't fetch a file for you like d3.csv or d3.tsv (Rather psv.parse() acts like d3.csvParse() or d3.tsvParse()). Luckily this is not too difficult to fix.

If we look at the API documentation for d3.csv we can recreate the same functionality for any delimited file. With d3.csv,

If a callback is specified, a GET request is sent, making it equivalent to:

d3.request(url)
    .mimeType("text/csv")
    .response(function(xhr) { return d3.csvParse(xhr.responseText, row); })
    .get(callback);

(from API docs)

We just have to emulate this for a pipe separated file:

var psv = d3.dsvFormat("|");

d3.request("my_file.txt")
  .mimeType("text/plain")
  .response(function(data) { return psv.parse(data.response) })
  .get(function(data) {
     console.log(data);
  });

It's a little bit more verbose than a plain old d3.csv() or d3.tsv(), but achieves the same result with the callback function located in the get method.

You could also use data.responseText in the response method, I'm not sure what the difference is though, both appear identical in my quick testing.

You may have also noted that I did not specify a row function in the response method, this is an optional function that allows "conversion of row objects to a more-specific representation", eg: returning numbers rather than strings. API documentation).

One last note:

In relation to your original code, psv.parse("text") returns the data, you don't use a callback function for this method. The following snippet demonstrates how you might parse straight pipe delimited text:

var psv = d3.dsvFormat("|");
var data = psv.parse("a|b\n1|2\n4|3")
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

Upvotes: 5

Related Questions