is it possible to tweak the d3 bubble chart to obtain the bubbles at scattered positions instead of a circle pack?

Question

I need to implement D3 bubble chart,but with bubbles scattered out in the division ( spread across the division at specific coordinates ) instead of a circle pack layout.Is it possible the set the positions of the bubbles in such a way using D3.js?

Answer 1

Sure, just don't use the layout and set each circles cx and cy yourself:

svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('r', function(d){
    return d.r;
  })
  .attr('cx', function(d){
    return d.x;
  })
  .attr('cy', function(d){
    return d.y;
  });

Example here.

EDITS

You can arrange the bubbles anyway you want, you are just positioning them in a x/y 2d space. If you wanted to get into something complex, look into using d3's scales to help map user space to pixel space.

Here's your sine wave example:

var svg = d3.select('body')
  .append('svg')
  .attr('width', 500)
  .attr('height', 500);

var xscale = d3.scale.linear()
  .domain([0, 10])
  .range([0, 500]);

var yscale = d3.scale.linear()
    .domain([-1, 1])
    .range([0, 500]);

var data = [];
for (var i = 0; i < 10; i+=0.1){
  data.push({
    x: i,
    y: Math.sin(i),
    r: Math.random() * 10
  });
}

svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('r', function(d){
    return d.r;
  })
  .attr('cx', function(d){
    return xscale(d.x);
  })
  .attr('cy', function(d){
    return yscale(d.y);
  });

Another example here.