← Back to branch summary

~smagoun/whoopsie/whoopsie-lp1017637

« back to all changes in this revision

Viewing changes to backend/stats/static/js/d3/examples/partition/partition-icicle-zoom.html

  • Committer: Evan Dandrea
  • Date: 2012-05-09 05:53:45 UTC
  • Revision ID: evan.dandrea@canonical.com-20120509055345-z2j41tmcbf4as5uf
The backend now lives in lp:daisy and the website (errors.ubuntu.com) now lives in lp:errors.

Show diffs side-by-side

added added

removed removed

Lines of Context:
backend/stats/static/js/d3/examples/partition/partition-icicle-zoom.html
1
 
<!DOCTYPE html>
2
 
<html>
3
 
  <head>
4
 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
5
 
    <title>Partition - Icicle</title>
6
 
    <script type="text/javascript" src="../../d3.v2.js"></script>
7
 
    <style type="text/css">
8
 
 
9
 
rect {
10
 
  stroke: #fff;
11
 
}
12
 
 
13
 
    </style>
14
 
  </head>
15
 
  <body>
16
 
    <div id="chart"></div>
17
 
    <script type="text/javascript">
18
 
 
19
 
var w = 960,
20
 
    h = 250,
21
 
    x = d3.scale.linear().range([0, w]),
22
 
    y = d3.scale.linear().range([0, h]),
23
 
    color = d3.scale.category20c();
24
 
 
25
 
var vis = d3.select("#chart").append("svg")
26
 
    .attr("width", w)
27
 
    .attr("height", h);
28
 
 
29
 
var partition = d3.layout.partition()
30
 
    .value(function(d) { return d.size; });
31
 
 
32
 
d3.json("../data/flare.json", function(json) {
33
 
  var rect = vis.data([json]).selectAll("rect")
34
 
      .data(partition.nodes)
35
 
    .enter().append("rect")
36
 
      .attr("x", function(d) { return x(d.x); })
37
 
      .attr("y", function(d) { return y(d.y); })
38
 
      .attr("width", function(d) { return x(d.dx); })
39
 
      .attr("height", function(d) { return y(d.dy); })
40
 
      .attr("fill", function(d) { return color((d.children ? d : d.parent).name); })
41
 
      .on("click", click);
42
 
 
43
 
  function click(d) {
44
 
    x.domain([d.x, d.x + d.dx]);
45
 
    y.domain([d.y, 1]).range([d.y ? 20 : 0, h]);
46
 
 
47
 
    rect.transition()
48
 
      .duration(750)
49
 
      .attr("x", function(d) { return x(d.x); })
50
 
      .attr("y", function(d) { return y(d.y); })
51
 
      .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
52
 
      .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
53
 
  }
54
 
});
55
 
 
56
 
    </script>
57
 
  </body>
58
 
</html>