title: Error: <line> attribute y1: Expected length, "NaN"
body: <p>I am trying to display a boxplot with d3 v3 and I get the error mentioned along with others from the same kind:</p>
  
  <pre><code>Error: &lt;line&gt; attribute y2: Expected length, "NaN".
  
  Error: &lt;rect&gt; attribute y: Expected length, "NaN".
  </code></pre>
  
  <p>Full error message:</p>
  
  <blockquote>
    <p>Error:  attribute y: Expected length, "NaN". o   @   d3.v3.min.js:1 (anonymous)  @ d3.v3.min.js:3 R  @   d3.v3.min.js:1 da.each  @   d3.v3.min.js:3 da.attr  @   d3.v3.min.js:3 (anonymous)  @ box.js:103 (anonymous)    @   d3.v3.min.js:3 R    @   d3.v3.min.js:1 da.each  @   d3.v3.min.js:3 box  @   box.js:19 da.call   @   d3.v3.min.js:3 (anonymous)  @   subject:262 (anonymous) @   d3.v3.min.js:1 t    @   d3.v3.min.js:1 u    @ d3.v3.min.js:1 load (async)   St  @   d3.v3.min.js:1 e    @   d3.v3.min.js:3 (anonymous)  @   subject:170 </p>
  </blockquote>
  
  <p>I got the js code from a website so I just changed the parameters they mentioned... The js code of the chart is the following:</p>
  
  <pre><code>var labels = true; // show the text labels beside individual boxplots?
  var margin = {
      top: 30,
      right: 50,
      bottom: 70,
      left: 50
  };
  var width = 800 - margin.left - margin.right;
  var height = 400 - margin.top - margin.bottom;
  
  var min = 1000,
      max = -1000;
  
  // parse in the data    
  d3.csv("../static/CSV/Chart_data/boxplot_year.csv?rnd='+(new Date).getTime()", function(error, csv) {
      // using an array of arrays with
      // data[n][2] 
      // where n = number of columns in the csv file 
      // data[i][0] = name of the ith column
      // data[i][1] = array of values of ith column
  
      var data = [];
      data[0] = [];
      data[1] = [];
      data[2] = [];
      data[3] = [];
      data[4] = [];
      data[5] = [];
      // add more rows if your csv file has more columns
  
      // add here the header of the csv file
      data[0][0] = "Y1";
      data[1][0] = "Y2";
      data[2][0] = "Y3";
      data[3][0] = "Y4";
      data[4][0] = "Y5";
      data[5][0] = "Y6";
      // add more rows if your csv file has more columns
  
      data[0][1] = [];
      data[1][1] = [];
      data[2][1] = [];
      data[3][1] = [];
      data[4][1] = [];
      data[5][1] = [];
  
      csv.forEach(function(x) {
          var v1 = Math.floor(x.Y1),
              v2 = Math.floor(x.Y2),
              v3 = Math.floor(x.Y3),
              v4 = Math.floor(x.Y4),
              v5 = Math.floor(x.Y5),
              v6 = Math.floor(x.Y6);
          // add more variables if your csv file has more columns
  
          var rowMax = Math.max(Math.max(v1, v2), Math.max(Math.max(v3, v4), Math.max(v5, v6)));
          var rowMin = Math.min(Math.min(v1, v2), Math.min(Math.min(v3, v4), Math.min(v5, v6)));
  
          data[0][1].push(v1);
          data[1][1].push(v2);
          data[2][1].push(v3);
          data[3][1].push(v4);
          data[4][1].push(v5);
          data[5][1].push(v6);
          // add more rows if your csv file has more columns
  
          if (rowMax &gt; max) max = rowMax;
          if (rowMin &lt; min) min = rowMin;
      });
  
      var chart = d3.box()
          .whiskers(iqr(1.5))
          .height(height)
          .domain([min, max])
          .showLabels(labels);
  
      var svg = d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .attr("class", "box")
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
      // the x-axis
      var x = d3.scale.ordinal()
          .domain(data.map(function(d) {
              console.log(d);
              return d[0];
          }))
          .rangeRoundBands([0, width], 0.7, 0.3);
  
      var xAxis = d3.svg.axis()
          .scale(x)
          .orient("bottom");
  
      // the y-axis
      var y = d3.scale.linear()
          .domain([min, max])
          .range([height + margin.top, 0 + margin.top]);
  
      var yAxis = d3.svg.axis()
          .scale(y)
          .orient("left");
  
      // draw the boxplots    
      svg.selectAll(".box")
          .data(data)
          .enter().append("g")
          .attr("transform", function(d) {
              return "translate(" + x(d[0]) + "," + margin.top + ")";
          })
          .call(chart.width(x.rangeBand()));
  
  
      // add a title
      svg.append("text")
          .attr("x", (width / 2))
          .attr("y", 0 + (margin.top / 2))
          .attr("text-anchor", "middle")
          .style("font-size", "18px")
          //.style("text-decoration", "underline")  
          .text("Grade through the years");
  
      // draw y axis
      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
          .append("Grade") // and text1
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .style("font-size", "16px")
          .text("Revenue in €");
  
      // draw x axis  
      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + (height + margin.top + 10) + ")")
          .call(xAxis)
          .append("Year") // text label for the x axis
          .attr("x", (width / 2))
          .attr("y", 10)
          .attr("dy", ".71em")
          .style("text-anchor", "middle")
          .style("font-size", "16px")
          .text("Quarter");
  });
  
  // Returns a function to compute the interquartile range.
  function iqr(k) {
      return function(d, i) {
          var q1 = d.quartiles[0],
              q3 = d.quartiles[2],
              iqr = (q3 - q1) * k,
              i = -1,
              j = d.length;
          while (d[++i] &lt; q1 - iqr);
          while (d[--j] &gt; q3 + iqr);
          return [i, j];
      };
  }
  </code></pre>
  
  <p>And my csv file is:</p>
  
  <pre><code>Y1,Y2,Y3,Y4,Y5,Y6
  
  3.8,5.7,0.0,6.8,8.2,6.8
  
  5.0,1.5,5.0,0.0,6.1,9.0
  
  4.0,5.6,5.5,4.1,5.5,5.1
  
  5.4,6.7,5.1,5.0,9.0,6.8
  
  5.5,5.3,8.0,8.6,6.1,7.7
  
  8.0,1.7,4.6,6.1,7.6,5.9
  
  6.3,7.3,6.8,8.3,6.0,0.0
  
  5.0,5.1,6.6,7.8,5.4,3.5
  
  5.6,3.7,7.0,5.1,7.1,2.7
  
  8.5,6.0,1.8,7.7,2.5,8.0
  
  6.4,9.8,5.8,7.0,6.8,8.7
  
  6.7,7.5,5.0,6.3,0.0,7.4
  </code></pre>
  
  <p>Any ideas? Thank you in advance!</p>