Sha256: 333227f08c90604ed03dba362f53ef9ba3dbb9b8613def14e541ce36ae44a1f2
Contents?: true
Size: 1.61 KB
Versions: 6
Compression:
Stored size: 1.61 KB
Contents
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Partition - Icicle</title>
<script type="text/javascript" src="../../d3.js"></script>
<script type="text/javascript" src="../../d3.layout.js"></script>
<style type="text/css">
rect {
stroke: #fff;
}
</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var w = 960,
h = 250,
x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([0, h]),
color = d3.scale.category20c();
var vis = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h);
var partition = d3.layout.partition()
.value(function(d) { return d.size; });
d3.json("../data/flare.json", function(json) {
var rect = vis.data([json]).selectAll("rect")
.data(partition.nodes)
.enter().append("svg:rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.attr("width", function(d) { return x(d.dx); })
.attr("height", function(d) { return y(d.dy); })
.attr("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", click);
function click(d) {
x.domain([d.x, d.x + d.dx]);
y.domain([d.y, 1]).range([d.y ? 20 : 0, h]);
rect.transition()
.duration(750)
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
.attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
}
});
</script>
</body>
</html>
Version data entries
6 entries across 6 versions & 1 rubygems