← Back to branch summary

~smagoun/whoopsie/whoopsie-lp1017637

« back to all changes in this revision

Viewing changes to backend/stats/static/js/d3/examples/force/force-bounds.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/force/force-bounds.html
1
 
<!DOCTYPE html>
2
 
<html>
3
 
  <head>
4
 
    <title>Force-Directed Layout</title>
5
 
    <script type="text/javascript" src="../../d3.v2.js"></script>
6
 
    <style type="text/css">
7
 
 
8
 
circle {
9
 
  stroke-width: 1.5px;
10
 
}
11
 
 
12
 
line {
13
 
  stroke: #999;
14
 
}
15
 
 
16
 
    </style>
17
 
  </head>
18
 
  <body>
19
 
    <script type="text/javascript">
20
 
 
21
 
var w = 960,
22
 
    h = 500,
23
 
    r = 6,
24
 
    fill = d3.scale.category20();
25
 
 
26
 
var force = d3.layout.force()
27
 
    .gravity(.01)
28
 
    .charge(-120)
29
 
    .linkDistance(30)
30
 
    .size([w, h]);
31
 
 
32
 
var svg = d3.select("body").append("svg")
33
 
    .attr("width", w)
34
 
    .attr("height", h);
35
 
 
36
 
d3.json("miserables.json", function(json) {
37
 
  var link = svg.selectAll("line")
38
 
      .data(json.links)
39
 
    .enter().append("line");
40
 
 
41
 
  var node = svg.selectAll("circle")
42
 
      .data(json.nodes)
43
 
    .enter().append("circle")
44
 
      .attr("r", r - .75)
45
 
      .style("fill", function(d) { return fill(d.group); })
46
 
      .style("stroke", function(d) { return d3.rgb(fill(d.group)).darker(); })
47
 
      .call(force.drag);
48
 
 
49
 
  force
50
 
      .nodes(json.nodes)
51
 
      .links(json.links)
52
 
      .on("tick", tick)
53
 
      .start();
54
 
 
55
 
  function tick() {
56
 
    node.attr("cx", function(d) { return d.x = Math.max(r, Math.min(w - r, d.x)); })
57
 
        .attr("cy", function(d) { return d.y = Math.max(r, Math.min(h - r, d.y)); });
58
 
 
59
 
    link.attr("x1", function(d) { return d.source.x; })
60
 
        .attr("y1", function(d) { return d.source.y; })
61
 
        .attr("x2", function(d) { return d.target.x; })
62
 
        .attr("y2", function(d) { return d.target.y; });
63
 
  }
64
 
});
65
 
 
66
 
    </script>
67
 
  </body>
68
 
</html>