formatted sunburst chart
This commit is contained in:
Austin Clark
parent
17864ee8b6
commit
0b03d53549
|
|
@ -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 class="col-lg-12">
|
||||
|
||||
<div id="container" class="row">
|
||||
<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,
|
||||
height = 700,
|
||||
radius = Math.min(width, height) / 2;
|
||||
var x = d3.scale.linear()
|
||||
.range([0, 2 * Math.PI]);
|
||||
|
||||
var x = d3.scale.linear()
|
||||
.range([0, 2 * Math.PI]);
|
||||
var y = d3.scale.sqrt()
|
||||
.range([0, radius]);
|
||||
|
||||
var y = d3.scale.sqrt()
|
||||
.range([0, radius]);
|
||||
var color = d3.scale.category20c();
|
||||
|
||||
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")
|
||||
.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.size; });
|
||||
|
||||
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)); });
|
||||
|
||||
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("/static/logs.json", function(error, root) {
|
||||
if (error) throw error;
|
||||
|
||||
d3.json("logs.json", function(error, root) {
|
||||
if (error) throw error;
|
||||
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);
|
||||
|
||||
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);
|
||||
function click(d) {
|
||||
path.transition()
|
||||
.duration(750)
|
||||
.attrTween("d", arcTween(d));
|
||||
}
|
||||
});
|
||||
|
||||
function click(d) {
|
||||
path.transition()
|
||||
.duration(750)
|
||||
.attrTween("d", arcTween(d));
|
||||
}
|
||||
});
|
||||
d3.select(self.frameElement).style("height", height + "px");
|
||||
|
||||
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!
|
||||
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); };
|
||||
};
|
||||
}
|
||||
}, false);
|
||||
|
||||
</script>
|
||||
|
||||
}, false);
|
||||
</script>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -90,6 +90,7 @@
|
|||
<!-- d3.js -->
|
||||
<script src="{% static 'components/d3/d3.min.js' %}"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue