CODEWITHSUNDEEP
javascriptd3.js
Josh Flori
Josh Flori

Reputation: 41

What is wrong with this method of loading external csv data?

I'm new to d3. I am trying to load external csv data. I have this code

var data = d3.csvParseRows("https://github.com/josh-flori/inner_state_viz/blob/master/inner_state_data.csv", function(d, i) {
   return {
      xx: +d[0],
      yy: +d[1],
      radius: +d[2],
      t: d[3],

   };
});

But when print data to the console it shows as 

[[object Object] {
  radius: NaN,
  t: undefined,
  xx: NaN,
  yy: NaN
}]

Maybe I'm just really tired but I've been looking around online for an hour and am completely unable to figure out what I'm doing wrong. Any ideas?

Thanks

Upvotes: 0

Views: 298

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102198

It's not clear to me why you're using d3.csvParseRows. According to the documentation, d3.csvParseRows...

Parses the specified string, which must be in the delimiter-separated values format with the appropriate delimiter, returning an array of arrays representing the parsed rows. Unlike dsv.parse, this method treats the header line as a standard row, and should be used whenever DSV content does not contain a header. (emphasis mine).

Your CSV, on the other hand, clearly contains a header:

xx,yy,radius,t
151,440,8,asdgasdg
270,178,2,asdgg
198,401,7,gg
394,317,7,gg
466,429,10,ggdsdd

On top of that, what you have here is a proper CSV, not a string.

That being said, use d3.csv instead. Pay attention to the fact that, unlike d3.csvParseRows, d3.csv returns a promise. Finally, given the CSV header, you don't need that row conversion function in your example.

Here is the demo:

d3.csv("https://raw.githubusercontent.com/josh-flori/inner_state_viz/master/inner_state_data.csv").then(function(data) {
  console.log(data)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Upvotes: 1

Related Questions