Issue with Linear Scale/Range -- negative numbers?

[Eric Webster]

Hey guys,

I have been banging my head on this for several hours, maybe one of you can see the error in my ways.

I am creating a simple bubble graph and for some reason I cannot figure out why my data points are off.

I created this fiddle to exemplify my issue

http://jsfiddle.net/ericwebster/mpky0dxL/1/

the crux of the matter is when I call my X scale with a number in range I am getting a negative number

       .attr("r", function(d) {

            //radius should be half the years total

            console.log(x(d.size/2))

        return x(d.size/2); 

        }); 

the console logged value is sometimes a negative number?

[Eric Webster]

Sorry updated fiddle to be the base.

http://jsfiddle.net/ericwebster/mpky0dxL/

[Andy Thornton]

That is because the domain of your x scale is from 10 to 90. In the case of the first circle, it’s radius divided by 2 is 8. When 8 is passed through the x scale, it ends up negative because x’s domain starts at 10. If you really want to encode the radius of the circle with half the value of the size key, don’t pass it through the x scale.

However, it is often better to encode the area of the circle with the value of interest. See here.

Andy

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

​