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

Question

I'm completely new to d3. Ive have completed quite a few charts and examples from "Interactive Data Visualization for the Web" by Scott Murray and had very few problems. This is my first attempt at using a large data-set that is not contained within my code.

d3.csv("historical_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 loads and is 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

Seems you have a typo. The line that says .data("dataset") should instead be .data(dataset) with no quotation marks. I.e., you should be submitting the dataset variable, not a string containing its' name.