CODEWITHSUNDEEP
javascriptd3.js
Lee Ann
Lee Ann

Reputation: 13

Invalid value for <circle> attribute r="NaN" in D3 scatterplot code

I am getting a NaN error on the r value in a d3 scatterplot.

Console error: Error: Invalid value for attribute r="NaN"

From this section of the 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); })

Here is how the scale is set up:

var responseScale = d3.scale.linear()
.domain(d3.extent(data, function(d){
    return d.responses;
}))
.range(2, 15);

Here is a sample of the data:

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},

I have tried putting a plus sign in front of d.responses and using parseFloat().

The code is an example used in this course, Learning to Visualize Data with D3.js (chapter on Creating a Scatterplot)

Any suggestions would be greatly appreciated!

Upvotes: 1

Views: 3023

Answers (1)

ocket-san
ocket-san

Reputation: 884

In your code: 

var responseScale = d3.scale.linear()
.domain(d3.extent(data, function(d){
    return d.responses;
}))
.range(2, 15);

The parameter for the range() function should be an array of values, like this: .range([2,15]);

corrected scale: 

 var responseScale = d3.scale.linear()
    .domain(d3.extent(data, function(d){
        return d.responses;
    }))
    .range([2, 15])

;

More info on scales can be found here. If you are still in trouble, let me know!

Upvotes: 2

Related Questions