How to remove the outer circle in a D3 bubble chart
I am trying to get rid of the outer circle of the bubble map. But actually now I'm at my witty end ... There seems to be some online tutorials on the internet on how to plot bubbles using csv data. Please check my working PLUNK and help me.
PLUNK: http://plnkr.co/edit/87WLm3OmK1jRtcq8p96u?p=preview
d3.csv("count_s.csv", function(csvData) {
var years = [2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014];
pack.value(function(d) {
return +d["count" + years[i]];
});
var data = {
name: "city",
children: csvData
};
var node = svg1.selectAll("g.node")
.data(pack.nodes(data), function(d) {
return d.city;
});
source to share
The code responsible for creating the circle in your example is (bubble.js file, lines 63-70):
//Add the Circles
var circles = nodeEnter.append("circle")
.attr("r", function(d) {
return d.r;
})
.style("fill", function(d) {
return color1(d.city);
});
All you have to do is put the line
.filter(function(d){ return d.parent; })
before the call append()
, for example:
//Add the Circles
var circles = nodeEnter
.filter(function(d){ return d.parent; })
.append("circle")
.attr("r", function(d) {
return d.r;
})
.style("fill", function(d) {
return color1(d.city);
});
and you get:
The explanation for the solution is that the added row simply excludes any circle that doesn't have a parent (which is actually just the outermost circle) from rendering.
Modified plunk here .
NOTE. The text in the middle of the outer circle is still displayed. If you don't want that either, you can apply similar code solutions used for the circle itself.
source to share