Cannot convert string into number with parseFloat method

Question

I'm trying to create a dataviz about writers. I created the csv file, which is then handled by the d3.csv function. I also defined another function to handle some values as numbers not as strings (specifically, year of publication, pages, and price). However, when I load the page into the browser, the console still returns these values as strings. Can you help me understand why and how I can fix it? Thank you!

      <script type="text/javascript" src="d3.js">
  
      var w = 500;
      var h = 520;
      var padding = 30;

      var svg = d3.select("body").append("svg")
                .attr("width", w)
                .attr("height", h);

      var rowConverter = function(d) {
        return {
          author: d.author,
          title: d.title,
          publisher: d.publisher,
          year: parseFloat(d.year),
          pages: parseFloat(d.pages),
          price: parseFloat(d.price)
        };
      }

          d3.csv("libri_nuovi.csv", rowConverter, function(data) {
            console.log(data);
          });


      </script>

</body>

If I had to bet I'd say it's a v5 vs. v4 issue. Something like this: [*"d3 importing csv file to array \[duplicate\]"*](/q/52638816). What version are you using? Can you post the output of `console.log(d3.version)`? — altocumulus, Mar 05 '19 at 15:06
This is the output in the console: Object author: "Claudio Magris" pages: "400" price: "30" publisher: "Mondadori" title: "Danubio" year: "1996" __proto__: Object And this is the d3 version I'm using: console.log(d3.version); 5.8.0 Thank you! — nrusin, Mar 05 '19 at 17:06
Possible duplicate of [d3 importing csv file to array](https://stackoverflow.com/questions/52638816/d3-importing-csv-file-to-array) — altocumulus, Mar 05 '19 at 19:33

score -2 · Accepted Answer · answered Mar 05 '19 at 19:13

Like altocumulus pointed in his comment, you are using the old csv api with new the version of d3. In the old API you could provide a callback function as last argument. Since the new API uses fetch, it returns a promise now.

For version 5.8.0 you could rewrite your function like the following:

    d3.csv(",", "libri_nuovi.csv", function(d) {
      return {
        author: d.author,
        title: d.title,
        publisher: d.publisher,
        year: +d.year, // convert "year" column to number
        pages: +d.pages,
        price: +d.price,
     };
   }).then(function(data) {
     console.log(data);
   });

This is untested code since you didn't post the initial json, but I think it should work.

Cannot convert string into number with parseFloat method

1 Answers1