Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Edit the innerRadius of D3 Sunburst visualization

How can I change the radius of the innermost circle of the Sunburst visualization? See following example: (http://bl.ocks.org/d/910126/ - notice how large is central area; can it be smaller?)

enter image description here

Also, is it possible to define different heights for all the layers in the Sunburst?

like image 966
jeroen.verhoest Avatar asked Jan 15 '23 12:01

jeroen.verhoest


2 Answers

Yes, it is possible.


Base Example

jsfiddle

enter image description here


Custom layer height 1

jsfiddle

enter image description here


Custom layer height 2

jsfiddle

enter image description here


Custom layer height 3

jsfiddle

enter image description here

like image 123
VividD Avatar answered Jan 17 '23 00:01

VividD


I've just compared the examples above so can't claim any great skill\knowledge here but all the changes are in this section:

var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return radius * Math.sqrt(d.y) / 10; })
    .outerRadius(function(d) { return radius * Math.sqrt(d.y + d.dy) / 10; });

The effects are interesting but not quite what I was looking for when I found this question\answer. I wanted to be able to control the size of each layer\ring individually really. Anyway... hope this picking apart of the jsfiddles above helps someone else.

like image 39
TimBrighton Avatar answered Jan 17 '23 01:01

TimBrighton