<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="sunburst.css">
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body id="active2">
<div id="header">
  <h1>Zoomable Storage Visualization from Oracle</h1>
  <h3>Click to zoom, Click the center to zoom out</h3>
  <p>The inner ring is made of schemas and the middle ring is object types. The outermost ring is actual objects. However, any type of object hierarchy could have been used here. Currently I am working on adding child detail to the right hand side.</p>
</div>

<div id="container2">
  <div id="container1">
    <div id="col1">
      &nbsp;
    </div>
    <div id="col2">
    </div>
  </div>
</div>
<script>

var width = 960,
    height = 500,
    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 content = d3.select("#col2");

var svg = d3.select("#col1").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(300,250)");

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("/sunburst.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(750)
      .attrTween("d", arcTween(d));
  }

  function mouseover(d) {
    content.append("h2")
    .attr("id", "current")
    .text(d.name + (d.size ? " - " + (d.size / 1024 / 1024) + "MB" : ''));
  }

  function mouseout(d) {
    content.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); };
  };
}

</script>
</body>
</html>

