Budget III

<!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>

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

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

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