I am trying to get rid of the outer circle of the bubble chart. But actually now I am at my wit's end... It seems there is few tutorial online on how to plot bubble chart using csv Data. Please check out my working PLUNK and help me out.
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;
});
The code responsible for circle creation in your example is this (file bubble.js, lines 63-70):
All you need to do is to put the line
before call to
append()
, like this:and you will get:
The explanation of the solution is that added line simply excludes any circle that does not have a parent (which is actually only the outermost circle) from rendering.
Modified plunk is here.
NOTE: The text in the middle of the outer circle is still displayed. If you do not want it either, you may apply similar code solutions as the one used for the circle itself.