d3.js inner bubble chart

Question

I am working on a bubble chart that needs to look like this - its likely to have just 2 series.

My main concern is what to do - if the bubbles are of the same size or if the situation is reversed.

I thought of using this jsfiddle as a base..

http://jsfiddle.net/NYEaX/1450/

// generate data with calculated layout values
var nodes = bubble.nodes(data)
  .filter(function(d) {
     return !d.children;
  }); // filter out the outer bubble


var vis = svg.selectAll('circle')
  .data(nodes);

vis.enter()
  .insert("circle")
  .attr('transform', function(d) {
    return 'translate(' + d.x + ',' + d.y + ')';
  })
  .attr('r', function(d) {
    return d.r;
  })
  .style("fill", function(d) {
    return color(d.name);
  })
  .attr('class', function(d) {
    return d.className;
  });

vis
  .transition().duration(1000)

vis.exit()
  .remove();

Answer 1

It might be easier if you start with this instead. You could set the smaller bubble to be a child of the larger one.

As for when the series have the same size, I would either have a single bubble with both series given the same color, or I would separate the two bubbles. There isn't really much you can do when the bubbles need to be the same size.

Answer 2

Slightly updated your first fiddle http://jsfiddle.net/09fsu0v4/1/

So, lets go through your questions:

1. a bubble chart that needs to look like this - its likely to have just 2 series.

   Bubble charts as part of pack layout rely on data structure - nested JSON with children array. Each node could be either root node (container) or leaf node (node that represents some end value). And its role depends on 'children' value presence. ( https://github.com/d3/d3-3.x-api-reference/blob/master/Pack-Layout.md#nodes )

   So, to get you chart looking like on picture just re-arrange json structure (or write children accessor function - https://github.com/d3/d3-3.x-api-reference/blob/master/Pack-Layout.md#children ). Brief example is in updated fiddle.

2. if the bubbles are of the same size or if the situation is reversed

   Parent nodes (containers) size is sum of all child nodes size. So if you have only one child node parent node will have the same size. As far as you can't directly change parent node size - situation with oversized child nodes is impossible.