Importing a csv into d3; can't convert strings to numbers - csv

Question

I have a csv file with data as follows:
Time, Conditions, Temperature, Humidity, WindDir, WindDeg, U1, Pressure, U2, U3, U4, U4, UV, U5, MoonPercent, SunriseHr, SunriseMin, SunsetHr
"2014/06/19 19:00:00", "Clear", 16.8, "87%", "North", 355, 8.0, "1010", "11", 15, "NA", "1.2", " 0", "11", "47", "5", "03" "22", "07"
"2014/06/19 19:31:01", "Mostly Cloudy", 17.2, "86%", "NNE", 26, 12.9, "1010", "11", 15, "NA", "0.7", " 0", "11", "47", "5", "03" "22", "07"
"2014/06/19 19:40:00", "Mostly Cloudy", 17.4, "85%", "ENE", 68, 6.4, "1010", "11", 15, "NA", "0.7", " 0", "11", "47", "5", "03" "22", "07"
I want to import it and have array contain the numbers as numbers, not as strings as it does at first:
Object { Time="2014/06/19 19:00:00", Conditions=" "Clear"", Temperature=" 16.8", more...}
The problem is, no matter what I try I've not been able to turn the numbers into actual numbers, just NaN. Here's my import code:
d3.csv("weatherLog.csv", function(error, csv) {
if (error) return console.warn(error);
csv.forEach(function(d){ (d['Temperature'] = +d['Temperature']); });
console.log(csv);
I tried d.Temperature instead, I tried parseInt(d.['Temperature']) instead, but nothing works out, and of course d3 can't use a string (or a NaN) as data so I need to convert this first somehow. I tried manually removing the space from the CSV file (so the imported string was "16.8" rather than " 16.8") but that didn't help either...

Answer 1

You should use an accessor function to convert the strings to dates and numbers. The way to do that is to use the .row() method, which iterates over the rows of your csv, and for each row, lets you provide an output object that will be used to represent that row, based on the given data.
The parameter given to the accessor, d, represents a single row, or datum. Within the accessor function, d has properties corresponding to the names of your data columns, such as Time, Conditions, Temperature, etc... You can manipulate these values before returning your output object, so in the case of temperature, you could assign the temperature property of your output object to be +d.Temperature, which converts it to a number.
By convention, property names are camel cased in JavaScript, so the object you return from the accessor should use camel cased keys.
Now when your callback runs, your variable csv contains an array of objects, each of which has properties such as time, conditions, temperature, etc... and the values for temperature have been converted to numbers.
Here is an example:
d3.csv('weatherLog.csv')
.row(function(d) {
// for each row of the data, create an object with these properties...
return {
time: d3.time.format('%Y/%m/%d %H:%M:%S').parse(d.Time),
conditions: d.Conditions,
temperature: +d.Temperature,
humidity: d.Humidity,
windDir: d.WindDir,
windDeg: +d.WindDeg,
pressure: +d.Pressure
};
})
.get(function(error, csv) {
if (!error) {
// lets say you want to log all the temperatures to the console
csv.forEach(function(d,i) {
var theTime = d3.time.format('%I:%M %p')(d.time);
console.log('The temperature at', theTime, 'was', d.temperature, 'degrees.');
});
} else {
// handle error
}
});
This will output the following to console:
The temperature at 7:00 PM was 16.8 degrees.
The temperature at 7:31 PM was 17.2 degrees.
The temperature at 7:40 PM was 17.4 degrees.

Answer 2

This worked for me.
d3.csv("weatherLog.csv", function(d) {
return {
temperature: +d.Temperature;
}
}, function(error, csv) {
if (error) return console.warn(error);
console.log(csv);
});