Eve Everywoman Examples

HTML

<script>
    var rootCarePlan = {
		
	"name": "Eve Everywoman",
	"children": [{
		"name": "concerns",
		"children": [{
			"name": "GERDS",
			"size": 100
		},{
			"name": "Obesity",
			"size": 100
		},{
			"name": "Psoriasis",
			"size": 100
		}]
	}, {
		"name": "goals",
		"children": [{
		
			"name": "Eve will lose weight and reduce her GERDS symptoms by improving her diet",
			"children": [
			{
			"name": "Eve will review photos of high and low density foods and share with her parents",
			"size": 100
		},{
			"name": "Eve will ask her dad to asist her to put the head of her bed on blocks",
			"size": 100
		}
			]
		},{
		
			"name": "Eve will improve her GERDS symptoms",
			"children": [
			{
			"name": "Eve will reduce her intake of coffee and chocolate",
			"size": 100
		}
			]
		},{
		
			"name": "Eve will increase her energy by being more active",
			"children": [
			{
			"name": "Eve will walk her friend's dog up and down a big hill 15-30 minutes 3 days a week",
			"size": 100
		},{
			"name": "Eve will walk 3 blocks to her parents house twice a week",
			"size": 100
		},{
			"name": "Eve will start using stretch bands and one step 2 days a week Mon/Wed 6-7am and maybe        Friday afternoon",
			"size": 100
		},{
			"name": "Eve will open 'The Firm' DVD workout package and listen to it",
			"size": 100
		}
			]
		},{
		
			"name": "Eve will set up her medications and take as prescribed",
			"children": [
			{
			"name": "Eve will us a calendar to check off after medications are taken",
			"size": 100
		},{
			"name": "Eve will use a calendar of a chart to help her remember when to take her medications",
			"size": 100
		},{
			"name": "Eve will match a printed medication worksheet with the medication bottles at home",
			"size": 100
		},{
			"name": "Eve will get a medication box to sort her pills.  She will have one for scheduled medications        and one for as needed",
			"size": 100
		}
			]
		},{
		
			"name": "Eve will restart her light...

CSS

path {

    stroke: #fff;

    fill-rule: evenodd;

}

/*http://blog.luzid.com/2013/extending-the-d3-zoomable-sunburst-with-labels/*/

JavaScript

var width = 1000,
    height = 1000,
    radius = Math.min(width, height) / 2;

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

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

var color = d3.scale.category20c();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ") rotate(-90 0 0)");

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

//d3.json("/d/4063550/flare.json", function(error, root) {
var root = rootCarePlan;

var g = svg.selectAll("g")
    .data(partition.nodes(root))
    .enter().append("g");

var path = g.append("path")
    .attr("d", arc)
    .style("fill", function (d) {
        return color((d.children ? d : d.parent).name);
    })
    .on("click", click);

//.append("text")
var text = g.append("text")
    .attr("x", function (d) {
    return y(d.y);
})
    .attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.attr("transform", function (d) {
    return "rotate(" + computeTextRotation(d) + ")";
})
.text(function (d) {
    return d.name;
});

function computeTextRotation(d) {
    var angle = x(d.x/4 + d.dx / 4) - Math.PI / 2;
    return angle / Math.PI * 180;
}

//text.attr("transform", function (d) {
//    return "rotate(" + computeTextRotation(d) + ")";
//});



/*
var label = g.append("rect")
.attr("x", function(d) { return x(d.x) })
.attr("y", function(d) { return y(d.y) })
.attr("width", function(d) { return 100 })
.attr("height", function(d) { return 100 })
.attr("transform", function (d) {
    return...