JohnDelacour

Click on any arc to zoom in. Click on the center circle to zoom out.

A sunburst is similar to a treemap, except it uses a radial layout. The root node of the tree is at the center, with leaves on the circumference. The area (or angle, depending on implementation) of each arc corresponds to its value. Sunburst design by John Stasko. Data courtesy Jeff Heer.

	{"nodes":[
	{"x":80, "r":40, "label":"Sam","info":"Developer"},
	{"x":200, "r":60, "label":"Pam","info":"Programmer"},
	{"x":380, "r":80, "label":"Ram","info":"Senior Programmer"}
	]}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Click show hide</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">
	circle {fill: #000; stroke: #000;}
	</style>
	</head>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Text in SVG</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<link type="text/css" href="x.css" rel="stylesheet">
	</head>
	<script>
	// Change the size here to see it wrap

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Mouse Spoke</title>
	<link type="text/css" href="rotating_spoke.css" rel="stylesheet">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<script>

	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>Slider for Rotation</title>
	<link type="text/css" href="slider.css" rel="stylesheet" />
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<div id="degrees">0.00°</div>
	<svg width="960" height="500">

	var circle_data = [
	{x:20, y:60},
	{x: 45, y:56},
	];

	var square_data = [
	{x:100, y:100, width:80, height:80},
	{x:150, y:150, width:80, height:80},
	];