I am following the book Interactive Data Visualization for the Web to teach myself how to use D3 (using version 5 of D3) and I am having trouble understating what I am doing wrong, this is on page 76.
There is a very simple .csv file (food.csv) that contains two columns, one titled ‘Food’ the other ‘Deliciousness’. I am loading the file into D3 using the following code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Loading csv File</title>
<script type="text/javascript" src="d3.js"></script>
</head>
<body>
<script type="text/javascript">
d3.csv("food.csv",function(data){
console.log(data);
});
</script>
</body>
</html>
Since the Deliciousness values are loaded as strings, the book defines a function that converts the strings to floats, the following is code for that:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Loading Data and Converting Data Type</title>
<script type="text/javascript" src="d3.js"></script>
</head>
<body>
<script type="text/javascript">
var rowConverter = function(d){
return {
Food: d.Food,
Deliciousness: parseFloat(d.Deliciousness)
};
}
d3.csv("food.csv", rowConverter, function(data){
console.log(data);
});
</script>
</body>
</html>
When I do this, the data type of the Deliciousness value is not changing. Am I missing something very simple?
I have looked at the documentation for parseFloat and that does not seem to be the issue. I am wondering if I am just misunderstand where the rowConverter function should be defined.
I do not have a lot of experience coding in html or JavaScript so that may be the issue.