CODEWITHSUNDEEP
d3.jsnvd3.jsscatter-plot
Dinesh
Dinesh

Reputation: 2204

nvd3 scatter chart circle size not working

I am trying to change the size of the circles in the scatter plot. I use the attribute size but even if I change it to 10, 100 etc, the size of the circles is not increasing. I tried using .sizeRange([minArea, maxArea]) and the maximum size increases. I am unable to understand how the size effects the perceptible sizes. Is it relative size?

Edit

If you have 

function(groups, points) {
var data = [],
  shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
  random = d3.random.normal();

for (i = 0; i < 1; i++) {
  data.push({
    key: 'Group ' + i,
    values: []
});

for (j = 0; j < 4; j++) {
     data[i].values.push({
        x: j
      , y: j
      , size: j
    });
  }
}
}

Even if we change the j loop from j<4to j<8, the size of the largest circle remains the same. We can try the code here.

Upvotes: 1

Views: 3219

Answers (2)

max
max

Reputation: 10454

First, you have to make sure you have the right new version (1.8.5) of the scripts:

<link href="http://nvd3.org/assets/css/nv.d3.css" rel="stylesheet" type="text/css">
<script src="http://nvd3.org/assets/lib/d3.v3.js"></script>
<script src="http://nvd3.org/assets/js/nv.d3.js"></script>

then, use sizeRange:

chart
.showDistX(true)
.showDistY(true)
 .color(d3.scale.category10().range())
 .size(1).sizeRange([100,100]);

This is working for me. Having said that, the shapes do not work in this version. It's a terrible plotting package.

Upvotes: 0

Raugaral
Raugaral

Reputation: 1313

As of 1.7.1 version, can you use the attribute pointRange([minArea,maxArea]):

In a javascript object:

chart.pointRange([45,50]);

In JSON options:

chart:{
    ...
    pointRange:[45,50],
    ...
 }

To my, the values 45 and 50 were sufficient.

Upvotes: 2

Related Questions