Error: Invalid value for attribute <rect> width = "NaN"

Question

I am completely unfamiliar with d3. Ive completed quite a few diagrams and examples from Scott Murray's Interactive Data Visualization for the Internet and there were very few problems. This is my first attempt to use a large dataset that is not contained in my code.

d3.csv ("history_weather.csv", function (error, data) {

dataset = data.map(function(d){ return [ parseInt(+d.cloudCover),parseInt(+ d.maxTemp) ]; }) console.log(dataset); var svg = d3.select("body") .append("svg") .attr("height",500) .attr("width",500); d3.select("svg") .selectAll("rect") .data("dataset") .enter() .append("rect") .attr("height",50) .attr("width", function(d){return d.maxTemp*10;}); }); 

The data is loaded and visible in the console as an array, I can see the expected values ​​when digging into the array. However, the console shows:

Error: Invalid value for attribute width = "NaN"

Answer 1

You seem to have a typo. A string that says .data("dataset") should be .data(dataset) without quotes. Ie, you should present a dataset variable, not a string containing its name.

Answer 2

 .attr("width", function(d){return d.maxTemp*10;}); 

I believe that function(d){return d.maxTemp*10;} registered as an array, not a function with a simple return value. Its not a number (NaN)

Didn't you define function(d) twice in your script each with completely different values?