D3 "Sunburst" Center Path Size

Question

So I've got a pretty standard D3 "Sunburst" diagram. However, the center path (i.e. the root), is too big. It's taking up a large portion of my diagram that is being wasted as the more important arcs around it struggle for space.

I'm about to add labels to the outer rings but I need more space.

See below.

I want to make the center circle (the light grey bit) smaller and the outer rings thicker.

Can any one help me?

Here's my code:

var width = 850,
      height = 700,
      padding = 6,
      duration = 750,
      labelLimit = 120,
      radius = Math.min(width, height) / 2 - 10;

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

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

    var svg = d3.select("#wheel")
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("id", "scan")
      .attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");

    var partition = d3.layout.partition()
      .value(function(d) { return d.size; });

    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)); });

    var path = svg.selectAll("path")
      .data(partition.nodes(bp.data.preparedData))
      .enter()
      .append("path")
      //.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
      .attr("d", arc)
      .attr("id", function(d) { return d.ci_type === 'type' || d.ci_type === 'provider' ? d.name : ''; })
      .attr("class", 'context')
      .attr("data-toggle", 'context')
      .attr("data-target", '#context-menu')
      .attr("data-name", function(d) { return d.name; })
      .attr("data-type", function(d) { return d.type; })
      .attr("data-provider", function(d) { return d.provider; })
      .attr("data-ci_type", function(d) { return d.ci_type; })
      .style("fill", function(d) { return bp.draw.getColor(d); });

    var text = svg.selectAll("text")
      .data(partition.nodes(bp.data.preparedData));
    var textEnter = text.enter()
      .append("text")
      .style("fill-opacity", 1)
      .style("font-weight", 200)
      //.style("letter-spacing",1)
      .style("fill", function(d) { return bp.draw.getLabelColor(d); })
      .attr("font-size", function(d) { return d.ci_type === 'type' ? 12 : 16})
      .attr("text-anchor", function(d) {
        return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
      })
      .attr("dy", ".2em")
      .attr("transform", function(d) {
        var multiline = (d.name || "").split(" ").length > 1,
          angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
          rotate = angle + (multiline ? -.5 : 0);
          return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
      })
      .attr("class", 'cursor')
      .attr("data-toggle", 'context')
      .attr("data-target", '#context-menu')
      .attr("data-name", function(d) { return d.name; })
      .attr("data-type", function(d) { return d.type; })
      .attr("data-provider", function(d) { return d.provider; })
      .attr("data-ci_type", function(d) { return d.ci_type; })
    textEnter.append("tspan")
      .attr("x", 0)
      .text(function(d) { return d.depth ? d.name : ""; });

Laborsaving

you're passing your inner and outer radius to x and y. Have you looked those? If the differences between each y were roughly the same your outer radius would be proportionally smaller. Think of a plot of y=sqrt(x). – Interloper

Can you suggest a code change? i'm not quite understanding how that section works. – Laborsaving

try replacing the var y = d3.scale.sqrt() with var y = d3.scale.linear(). I'm really just guessing without being able to run your code with your data. Are you able to post it on js fiddle or js bin or bl.ocks? – Interloper

Brilliant, that fixed it. Now all rings are the same width instead of one giant ball in the center. If you would like to post your response from above as an answer i'll happily accept it. Thank you very much! – Laborsaving

Answer 1

The non-linear response in ring width is due to the square root in the y scale, in this line:

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

If you want a linear reponse just change the scale to linear as in:

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

You should then see evenly spaced rings.

Interloper