How would this be adapted to superimpose a second set of circles?
var data = [{
"name": "Twitter",
"items": [{
"value": 2000
}, {
"value": 3000
}]
}, {
"name": "Facebook",
"items": [{
"value": 200
}, {
"value": 300
}]
}, {
"name": "Ebay",
"items": [{
"value": 1000
}, {
"value": 2000
}]
}, {
"name": "Foursquare",
"items": [{
"value": 2000
}, {
"value": 3000
}]
}]
with the option of adding other data sets - the goal to create a 2D pyramid of sorts with different coloured circles representing the different data sets -- with the largest dataset taking the base circle.
http://jsfiddle.net/0aqvx66j/4/
function circleMaker() {
var counter = 0;
series = 0
var set = svg.append("g")
.attr("class", "series" + series);
set.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("class", "series" + series)
.attr("cy", 60)
.attr("cx", function(d, i) {
if (i) {
return (counter += Math.sqrt(data[i - 1].items[series].value) + Math.sqrt(data[i].items[series].value));
} else {
return counter;
}
})
.attr("fill", function(d, i) {
var colorArray = ["#00ccff", "#fcdd0a"];
return colorArray[series];
})
.attr("r", function(d) {
return Math.sqrt(d.items[series].value);
});
}
eventually maybe even flip between the different data sets to always place the largest circle as the background. So like this
See Question&Answers more detail:os