CODEWITHSUNDEEP
csvd3.jsrows
code beginner
code beginner

Reputation: 285

d3.js csv import... only accessing first column of data (not sure why)

here is the raw data from my CSV file: COL1, COL2 a, 10 b, 20 c, 30 d, 40

When I run the javascript D3 code below, it outputs this: a, undefined b, undefined c, undefined d, undefined

I tried a bunch of variations. It always seems to easily understand the idea of the first column, but never understands the second column.

I saw some stackoverflow items relating to parseRows, etc. But this should be a simple fix without having to resort to a completely different way of writing the code, correct? I feel like I am close on the syntax, but I'm not sure what the slight adjustment needs to be to get it to print both values in each row.

I'm simply trying to get D3 to load in the file, and print each line as it's own HTML paragraph (other than the header text COL1, COL2).

Thank you.

   <script type="text/javascript">

        d3.csv("csv_file1.csv", 
               function(data) {
                    d3.select("body")
                      .selectAll("p")
                      .data(data)
                      .enter()
                      .append("p")
                      .text(function(d) { return d.COL1 + ", " + d.COL2;})
                });

    </script>

Upvotes: 0

Views: 1143

Answers (1)

Union find
Union find

Reputation: 8160

Change your csv to:

COL1,COL2
a,10 
b,20
c,30
d,40

The d3 csv parser does not look for spacing between the column names as you originally wrote your file.

Upvotes: 1

Related Questions