How can I use CSV data in a zoomable sunburst chart?

Question

I have sunburst visualization which basically has the same code structure as the one in this CodePen (that comes from this question on stackoverflow. I have tried to also include the possiblity to not only zoom-in, but also zoom-back within the sunburst (when clicking into the middle of the sunburst). I have tried the following steps, but none of these have worked so far and I am lost in how to do that (apologies if this is a very easy thing to do, I am very new to JS).

Include at the beginning:

var x = d3.scale.linear()
  .range([0, 2 * Math.PI]);

var y = d3.scale.linear()
  .range([0, radius]);

Change the arc parameters to:

var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); }); 

Changed the arcTween() function to:

function arcTween(d){
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
  yd = d3.interpolate(y.domain(), [d.y, 1]),
  yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(d, i) {
return i
    ? function(t) { return arc(d); }
    : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
};

But this doesn't work.

Can anybody please help me?

Answer 1

Not sure if you still need it but I'm pretty sure this pen answers your question.

The code you posted:

...

var arc = d3.svg.arc()
  .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
  .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
  .innerRadius(function(d) { return Math.max(0, y(d.y)); })
  .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); }); 

...

all looks correct, as I said in the comment it seems to match Mike Bostock's Sunburst Example. So, without seeing the rest of your code I can't tell you exactly what the problem is.

The pen I created, mentioned above, includes zooming (in both directions), breadcrumbs, and arc fading.

I didn't style it as much as the example you've been using but that shouldn't be too hard to add (not sure what you require). Also, I figure keeping it simple may make it a bit easier to understand. Hope this helps, let me know if you need clarification on something or if you have issues viewing the pen.

UPDATE

This pen, which is a combination of the one I built and the other example, starts with CSV data instead of parsed JSON.

The other example used 'size' for the value key instead of 'value'. I changed this in the buildHierarchy function and added a unique id to fix the hover behavior:

...
childNode = {"name": nodeName, "value": size, id: create_id() };
...

The create_id function is just something I found to make unique ids for each item in the tree:

function create_id() {
  return '_' + Math.random().toString(36).substr(2, 9);
};