title: Invalid value for <circle> attribute r="NaN" in D3 scatterplot code
body: <p>I am getting a NaN error on the r value in a d3 scatterplot.</p>
  
  <p>Console error: Error: Invalid value for  attribute r="NaN"</p>
  
  <p>From this section of the code:</p>
  
  <p><code>g.selectAll(".response")
              .attr("r", function(d){
                  return responseScale(d.responses);
              })
              .attr("cx", function(d){
                  return x(d.age);
              })
              .attr("cy", function(d){
                  return y(d.value);
              })</code></p>
  
  <p>Here is how the scale is set up:</p>
  
  <pre><code>var responseScale = d3.scale.linear()
  .domain(d3.extent(data, function(d){
      return d.responses;
  }))
  .range(2, 15);
  </code></pre>
  
  <p>Here is a sample of the data:</p>
  
  <pre><code>var data = [
  {glazed: 3.14, jelly: 4.43, powdered: 2.43, sprinkles: 3.86, age: 18, responses: 7},
  {glazed: 3.00, jelly: 3.67, powdered: 2.67, sprinkles: 4.00, age: 19, responses: 3},
  {glazed: 2.00, jelly: 4.00, powdered: 2.33, sprinkles: 4.33, age: 20, responses: 3},
  </code></pre>
  
  <p>I have tried putting a plus sign in front of d.responses and using parseFloat().</p>
  
  <p>The code is an example used in this course, <a href="https://www.safaribooksonline.com/library/view/learning-to-visualize/9781771373043/" rel="nofollow">Learning to Visualize Data with D3.js</a> (chapter on Creating a Scatterplot)</p>
  
  <p>Any suggestions would be greatly appreciated!</p>