Sunburst

<!DOCTYPE html>
<meta charset="utf-8">
<style>
	path {
		stroke: #fff;
		fill-rule: evenodd;
	}
	text {
		font-family: Arial, sans-serif;
		font-size: 12px;
	}
</style>

<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
	var width = 960,
			height = 700,
			radius = Math.min(width, height) / 2.05;
	var x = d3.scale.linear()
			.range([0, 2 * Math.PI]);
	var y = d3.scale.linear()
			.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) + ")");
	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 g = svg.selectAll("g")
			.data(partition.nodes(getData()))
			.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);
	var text = g.append("text")
			.attr("transform", function(d) {
				return "rotate(" + computeTextRotation(d) + ")";
			})
			.attr("x", function(d) {
				return y(d.y);
			})
			.attr("dx", "6") // margin
			.attr("dy", ".35em") // vertical-align
			.text(function(d) {
				return d.name;
			});
	function click(d) {
		// fade out all text elements
		text.transition().attr("opacity", 0);
		path.transition()
				.duration(750)
				.attrTween("d", arcTween(d))
				.each("end", function(e, i) {
					// check if the animated element's data e lies within the visible angle span given in d
					if (e.x >= d.x && e.x < (d.x + d.dx)) {
						// get a selection of the associated text element
						var arcText = d3.select(this.parentNode).select("text");
						// fade in the text element and recalculate positions
						arcText.transition().duration(750)
								.attr("opacity", 1)
								.attr("transform", function() {
									return "rotate(" + computeTextRotation(e) + ")"
								})
								.attr("x", function(d) {
									return y(d.y);
								});
					}
				});
	}
	d3.select(self.frameElement).style("height", height + "px");
	// Interpolate the scales!
	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);
			};
		};
	}
	function computeTextRotation(d) {
		return (x(d.x + d.dx / 4) - Math.PI / 2) / Math.PI * 180;
	}
function getData() {
		return {
	"name": "NUCLEUS",
	"children": [{
			"name": "KYC",
			"children": [{
					"name": "Credit Cards",
					"children": [{
							"name": "Number of Credit Cards?",
							"size": 3938
						},
						{
							"name": "Type of Credit Cards?",
							"size": 3812
						}
					]
				},
				{
					"name": "Loans",
					"children": [{
							"name": "How many Loans taken?",
							"size": 2843
						},
						{
							"name": "Any Loans defaulted?",
							"size": 2743
						},
						{
							"name": "Any student Loans?",
							"size": 1743
						},
						{
							"name": "Type of loans takes?",
							"size": 2743
						}
					]
				},
				{
					"name": "Investments",
					"children": [{
							"name": "Type of Investor (Casual/ Aggressive)?",
							"size": 3938
						},
						{
							"name": "Does he invest in collectibles (Buying Antiques, Collectibles, Memorabilia)?",
							"size": 3812
						}
					]
				},
				{
					"name": "Basic Finance",
					"children": [{
							"name": "Personal Net Worth?",
							"size": 6714
						},
						{
							"name": "Household Net Worth?",
							"size": 6714
						}
					]
				},
				{
					"name": "Luxury Preferences",
					"children": [{
						"name": "Does he prefer Luxury Items?",
						"size": 1743
					}]
				},
				{
					"name": "Insurances",
					"children": [{
							"name": "Does he have Auto Insurance?",
							"size": 1743
						},
						{
							"name": "Auto Insurance Provider?",
							"size": 2743
						},
						{
							"name": "Which auto insurance advertisers does he show interest in? ",
							"size": 3743
						},
						{
							"name": "Does he have Life Insurance?",
							"size": 1743
						},
						{
							"name": "Life Insurance Provider?",
							"size": 2743
						},
						{
							"name": "Which Life insurance advertisers does he show interest in? ",
							"size": 3743
						},
						{
							"name": "Does he have Medical Insurance?",
							"size": 1743
						},
						{
							"name": "Medical Insurance Provider?",
							"size": 2743
						},
						{
							"name": "Which medical insurance advertisers does he show interest in? ",
							"size": 3743
						},
						{
							"name": "Does he have home Insurance?",
							"size": 1743
						},
						{
							"name": "Home Insurance Provider?",
							"size": 2743
						},
						{
							"name": "Which home insurance advertisers does he show interest in? ",
							"size": 3743
						}
					]

},
				{
					"name": "Subscriptions",
					"children": [{
							"name": "Which magazines does he read?",
							"size": 3534
						},
						{
							"name": "Whom does he follow on Twitter?",
							"size": 5731
						},
						{
							"name": "Which TV shows does he watch?",
							"size": 7840
						}
					]
				},
				{
					"name": "Interests and Hobbies",
					"children": [{
							"name": "Does he like Traveling?",
							"size": 3534
						},
						{
							"name": "Frequent travel mode?",
							"size": 5731
						},
						{
							"name": "Vehicle details?",
							"size": 5840
						},
						{
							"name": "Fashion Interests?",
							"size": 4840
						},
						{
							"name": "Food and lifestyle interests?",
							"size": 3840
						},
						{
							"name": "Is he a pet lover?",
							"size": 2840
						}
					]
				},
				{
					"name": "Health",
					"children": [{
							"name": "Any previous health issues?",
							"size": 3938
						},
						{
							"name": "Any unhealthy habits?",
							"size": 3812
						},
						{
							"name": "Average spend on Healthcare?",
							"size": 6714
						}
					]
				}
			]
		},
		{
			"name": "Demographics",
			"children": [{
					"name": "Personal",
					"children": [{
							"name": "First Name?",
							"size": 3938
						},
						{
							"name": "Last Name?",
							"size": 3812
						},
						{
							"name": "Age?",
							"size": 6714
						},
						{
							"name": "Gender?",
							"size": 6430
						},
						{
							"name": "Marital Status?",
							"size": 6430
						}
					]
				},
				{
					"name": "Location",
					"children": [{
							"name": "Country?",
							"size": 3534
						},
						{
							"name": "State?",
							"size": 5731
						},
						{
							"name": "City?",
							"size": 7840
						},
						{
							"name": "Area and type of area?",
							"size": 7840
						}

]
				},
				{
					"name": "Career",
					"children": [{
							"name": "Total Work Experience?",
							"size": 3534
						},
						{
							"name": "Latest Organization?",
							"size": 5731
						},
						{
							"name": "Education qualification?",
							"size": 7840
						}

]
				}
			]
		},
		{
			"name": "Purchase",
			"children": [{
					"name": "Category",
					"children": [{
							"name": "Most Purchased Category?",
							"size": 3938
						},
						{
							"name": "Average buying value by category?",
							"size": 3812
						},
						{
							"name": "Number of items bought by category?",
							"size": 6714
						},
						{
							"name": "Least bought category?",
							"size": 743
						},
						{
							"name": "Gross Merchandise bought at sub-category level?",
							"size": 743
						}
					]
				},
				{
					"name": "Device",
					"children": [{
							"name": "Most used Device?",
							"size": 3938
						},
						{
							"name": "Total number of devices?",
							"size": 3812
						},
						{
							"name": "GMB by device?",
							"size": 6714
						},
						{
							"name": "Number of items bought by device?",
							"size": 743
						}
					]
				},
				{
					"name": "Time Frame",
					"children": [{
							"name": "Most Purchased Category in last 6 months?",
							"size": 3938
						},
						{
							"name": "Most Purchased Category in the last year?",
							"size": 3938
						},
						{
							"name": "Most Purchased Category in last 3 months?",
							"size": 3938
						},
						{
							"name": "Average buying value by month?",
							"size": 3812
						},
						{
							"name": "Number of items bought by month?",
							"size": 6714
						},
						{
							"name": "Least active month?",
							"size": 743
						},
						{
							"name": "Most used device in last 'n' months?",
							"size": 743
						}
					]
				}
			]
		},
		{
			"name": "Browsing",
			"children": [{
					"name": "Time frame",
					"children": [{
							"name": "Most active time during the day?",
							"size": 3938
						},
						{
							"name": "Average session duration?",
							"size": 3812
						},
						{
							"name": "Most active period during the month?",
							"size": 6714
						},
						{
							"name": "Least active periods?",
							"size": 1743
						},
						{
							"name": "Which device is used at what time of the day?",
							"size": 1743
						}
					]
				},
				{
					"name": "Category",
					"children": [{
							"name": "Most Browsed Category?",
							"size": 3938
						},
						{
							"name": "Average browsing time by category?",
							"size": 3812
						},
						{
							"name": "Number of items browsed by category?",
							"size": 6714
						},
						{
							"name": "Least browsed category?",
							"size": 743
						},
						{
							"name": "Browsing details at sub-category level?",
							"size": 743
						}
					]
				},
				{
					"name": "Carrier",
					"children": [{
							"name": "Most used Carrier?",
							"size": 3938
						},
						{
							"name": "Carrier usage by timeframe?",
							"size": 3812
						},
						{
							"name": "Webpages browsed by Carrier?",
							"size": 6714
						},

{
							"name": "Number of Active/ Inactive Carriers?",
							"size": 1743
						},

{
							"name": "Browsing time by carrier?",
							"size": 1743
						}
					]
				}
			]
		},
		{
			"name": "Segments",
			"children": [{
					"name": "Customer segment",
					"children": [{
							"name": "Customer Segment by purchase?",
							"size": 3938
						},
						{
							"name": "Customer segment by browsing?",
							"size": 3812
						},
						{
							"name": "Customer segment by interest?",
							"size": 6714
						}
					]
				},
				{
					"name": "Active segment",
					"children": [{
							"name": "Propensity towards churned customers?",
							"size": 3534
						},
						{
							"name": "Is he active/ inactive based on browsing/purchase?",
							"size": 5731
						},
						{
							"name": "How loyal is he?",
							"size": 7840
						}
					]
				}
			]

}
	]
}
}
</script>

https://d3js.org/d3.v3.min.js