How do I change the data type of a column from string to float/integer when loading CSV data using D3?

Question

I have a simple .csv file that I'm trying to load onto a webpage using D3. The version I'm using is 7.0.0.

This is what the data looks like:

  [1]: https://i.stack.imgur.com/RSMGR.png

I am aware that D3 takes every data point as a string unless otherwise specified. To that end, I have tried using the following code, but when I check the console of the webpage, the intended numeric values are still being loaded in "", which means they are still in string type.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Page Template</title>
        <script type="text/javascript" src="../d3.js"></script>
    </head>
    <body>
        <script type="text/javascript">

            var rowConverter = function(d) {
              return {
                Food: d.Food,
                Yummy: parseFloat(d.Yummy)
              };
            }

            d3.csv("food.csv", rowConverter, function(data) {
              console.log(data);
            });
        </script>
    </body>
</html>

The rowConverter function is what I'm trying to use to change the data type of the 'Yummy' column before passing it through the .csv function, but as mentioned before, it isn't working.

Would appreciate any help on this; thanks in advance!

Please update your question with the version of D3 you are using. — Robin Mackenzie, Jul 17 '21 at 01:53
@MGO answer looks good, but the difference they didn't mention is that they use `d3.csv(...).then(...)` instead of `d3.csv(..., function(data) {...})` which is in your OP. — Robin Mackenzie, Jul 18 '21 at 03:22

How do I change the data type of a column from string to float/integer when loading CSV data using D3?

0 Answers0