darrenjaworski/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Oklahoma state budget 2013</title>
		<style type="text/css">
			path {
				stroke: #fff;
				fill-rule: evenodd;
			}

			#tooltipcontainer {
				max-width: 200px;
				height: 7em;
				width: 275px;
			}

			#col2	{

			height: 6em;
			width: 250px;


		}

			body {
				width: 880px;
				margin: 0 auto;
			}

			h1 {
				text-align: center;
				margin: .5em 0;
			}

		</style>
	</head>
	<body>

		<div id="tooltipcontainer">
			<div id="tooltip"></div>
		</div>
		<script src="http://d3js.org/d3.v3.min.js"></script>

		<script>
			//this is overall size
			var width = 960, height = 750, radius = 38 * Math.max(width, height) / 100;

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

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

			var color = d3.scale.category20();

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

			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("/darrenjaworski/raw/5389708/budget.json", function(error, root) {
				var path = svg.selectAll("path").data(partition.nodes(root)).enter().append("path").attr("d", arc).style("fill", function(d) {
					return color((d.children ? d : d.parent).name);
				}).on("click", click)
				.on("mouseover", mouseover)
      			.on("mouseout", mouseout);

				function click(d) {
					path.transition().duration(1500).attrTween("d", arcTween(d));
				}

			function mouseover(d)
			 {
    			tooltip.append("p")
    			.attr("id", "current")
    			.text(d.name + " - 2013 appropriations: " + d.appropriation13 + " - Which was a " + d.percentChange13 + "% change of the previous year.");
  			}

			//mouseout function which removes the values and replaces them with a blank space
  			function mouseout(d)
  			{
    			tooltip.html('');
  			}

			});

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

			var tooltip = d3.select("#tooltip")
			//.append("div")


		</script>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Oklahoma state budget 2013</title>
	<style type="text/css">
	path {
	stroke: #fff;
	fill-rule: evenodd;
	}

	#tooltipcontainer {
	max-width: 200px;
	height: 7em;
	width: 275px;
	}

	#col2 {

	height: 6em;
	width: 250px;


	}

	body {
	width: 880px;
	margin: 0 auto;
	}

	h1 {
	text-align: center;
	margin: .5em 0;
	}

	</style>
	</head>
	<body>

	<div id="tooltipcontainer">
	<div id="tooltip"></div>
	</div>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>
	//this is overall size
	var width = 960, height = 750, radius = 38 * Math.max(width, height) / 100;

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

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

	var color = d3.scale.category20();

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

	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("/darrenjaworski/raw/5389708/budget.json", function(error, root) {
	var path = svg.selectAll("path").data(partition.nodes(root)).enter().append("path").attr("d", arc).style("fill", function(d) {
	return color((d.children ? d : d.parent).name);
	}).on("click", click)
	.on("mouseover", mouseover)
	.on("mouseout", mouseout);

	function click(d) {
	path.transition().duration(1500).attrTween("d", arcTween(d));
	}

	function mouseover(d)
	{
	tooltip.append("p")
	.attr("id", "current")
	.text(d.name + " - 2013 appropriations: " + d.appropriation13 + " - Which was a " + d.percentChange13 + "% change of the previous year.");
	}

	//mouseout function which removes the values and replaces them with a blank space
	function mouseout(d)
	{
	tooltip.html('');
	}

	});

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

	var tooltip = d3.select("#tooltip")
	//.append("div")


	</script>