title: d3 height function returns NaN
body: <p>I am new to d3.js and I am receiving an error of : Error:  attribute height: Expected length, "NaN" when I attempt to run the following code:</p>
  
  <p>I know the error is occurring at </p>
  
  <pre><code>   .attr('height', function(d){
          return (d * 5);
      })
  </code></pre>
  
  <p>but I can not seem to resolve it. Any help is appreciated. </p>
  
  <pre><code>var data = [];
  
  for(let i = 0; i &lt; 20; i++){
      // let num = Math.floor( Math.random() * 50 );
      let num = d3.randomUniform(1, 50);
      data.push(num);
  }
  // create svg element
  var chartWidth = 800;
  var chartHeight = 400;
  var barPadding = 5;
  
  var svg = d3.select('#chart')
              .append('svg')
              .attr('width', chartWidth)
              .attr('height', chartHeight);
  
  // bind data and create bars
  svg.selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('x', function(d, i){
          return i * (chartWidth / data.length);
      })
      .attr('y', 0)
      .attr('width', (chartWidth / data.length - barPadding))
      .attr('height', function(d){
          return (d * 5);
      })
      .attr('fill', '#7ED26D');
  </code></pre>