formatted sunburst chart

stackviz/templates/tempest/latest_results.html

@@ -5,85 +5,90 @@
 {% block body %}
 
 <div class="row">
-    <div class="col-lg-12">
         <h1 class="page-header">Latest Results</h1>
-    </div>
-    <!-- /.col-lg-12 -->
 </div>
 
-<div class="row">
+<div id="container" class="row">
-    <div class="col-lg-12">
+    <div class="col-lg-5">
-
+        <div id="sunburst" class="panel panel-default">
+        </div>
     </div>
-    <div class="col-lg-12">
 
+    <div class="col-lg-5">
+        <div id="chart" class="panel panel-default">
+                <p>Jquery me baby</p>
+                <p>Right there</p>
+                <p>Oh yeah</p>
+        </div>
     </div>
+
 </div>
+        <script>
 
-<script>
+        window.addEventListener('load', function() {
 
-window.addEventListener('load', function() {
+            var width = 700,
+                height = 500,
+                radius = Math.min(width, height) / 2;
 
-    var width = 960,
+            var x = d3.scale.linear()
-        height = 700,
+                .range([0, 2 * Math.PI]);
-        radius = Math.min(width, height) / 2;
 
-    var x = d3.scale.linear()
+            var y = d3.scale.sqrt()
-        .range([0, 2 * Math.PI]);
+                .range([0, radius]);
 
-    var y = d3.scale.sqrt()
+            var color = d3.scale.category20c();
-        .range([0, radius]);
 
-    var color = d3.scale.category20c();
+            var svg = d3.select("#sunburst").append("svg")
+                .attr("width", width)
+                .attr("height", height)
+              .append("g")
+                .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
 
-    var svg = d3.select("body").append("svg")
+            var partition = d3.layout.partition()
-        .attr("width", width)
+                .value(function(d) { return d.size; });
-        .attr("height", height)
-      .append("g")
-        .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
 
-    var partition = d3.layout.partition()
+            var arc = d3.svg.arc()
-        .value(function(d) { return d.size; });
+                .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 arc = d3.svg.arc()
+            d3.json("/static/logs.json", function(error, root) {
-        .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
+              if (error) throw error;
-        .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("logs.json", function(error, root) {
+              var path = svg.selectAll("path")
-      if (error) throw error;
+                  .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);
 
-      var path = svg.selectAll("path")
+              function click(d) {
-          .data(partition.nodes(root))
+                path.transition()
-        .enter().append("path")
+                  .duration(750)
-          .attr("d", arc)
+                  .attrTween("d", arcTween(d));
-          .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
+              }
-          .on("click", click);
+            });
 
-      function click(d) {
+            d3.select(self.frameElement).style("height", height + "px");
-        path.transition()
-          .duration(750)
-          .attrTween("d", arcTween(d));
-      }
-    });
 
-    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); };
+              };
+            }
 
-    // Interpolate the scales!
+        }, false);
-    function arcTween(d) {
+
-      var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
+        </script>
-          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); };
-      };
-    }
 
-}, false);
-</script>
 
 
 {% endblock %}

stackviz/templates/template.html

@@ -90,6 +90,7 @@
     <!-- d3.js -->
     <script src="{% static 'components/d3/d3.min.js' %}"></script>
 
+
 </body>
 
 </html>