← 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-dynamic.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-dynamic.html
1
 
<!DOCTYPE html>
2
 
<html>
3
 
  <head>
4
 
    <title>Force-Directed Layout (Dynamic)</title>
5
 
    <script type="text/javascript" src="../../d3.v2.js"></script>
6
 
    <style type="text/css">
7
 
 
8
 
rect {
9
 
  fill: #fff;
10
 
}
11
 
 
12
 
.node {
13
 
  fill: #000;
14
 
}
15
 
 
16
 
.cursor {
17
 
  fill: none;
18
 
  stroke: brown;
19
 
  pointer-events: none;
20
 
}
21
 
 
22
 
.link {
23
 
  stroke: #999;
24
 
}
25
 
 
26
 
    </style>
27
 
  </head>
28
 
  <body>
29
 
    <div id="chart"></div>
30
 
    <script type="text/javascript">
31
 
 
32
 
var w = 960,
33
 
    h = 500,
34
 
    fill = d3.scale.category20(),
35
 
    nodes = [],
36
 
    links = [];
37
 
 
38
 
var vis = d3.select("#chart").append("svg")
39
 
    .attr("width", w)
40
 
    .attr("height", h);
41
 
 
42
 
vis.append("rect")
43
 
    .attr("width", w)
44
 
    .attr("height", h);
45
 
 
46
 
var force = d3.layout.force()
47
 
    .distance(30)
48
 
    .nodes(nodes)
49
 
    .links(links)
50
 
    .size([w, h]);
51
 
 
52
 
var cursor = vis.append("circle")
53
 
    .attr("r", 30)
54
 
    .attr("transform", "translate(-100,-100)")
55
 
    .attr("class", "cursor");
56
 
 
57
 
force.on("tick", function() {
58
 
  vis.selectAll("line.link")
59
 
      .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
 
  vis.selectAll("circle.node")
65
 
      .attr("cx", function(d) { return d.x; })
66
 
      .attr("cy", function(d) { return d.y; });
67
 
});
68
 
 
69
 
vis.on("mousemove", function() {
70
 
  cursor.attr("transform", "translate(" + d3.mouse(this) + ")");
71
 
});
72
 
 
73
 
vis.on("mousedown", function() {
74
 
  var point = d3.mouse(this),
75
 
      node = {x: point[0], y: point[1]},
76
 
      n = nodes.push(node);
77
 
 
78
 
  // add links to any nearby nodes
79
 
  nodes.forEach(function(target) {
80
 
    var x = target.x - node.x,
81
 
        y = target.y - node.y;
82
 
    if (Math.sqrt(x * x + y * y) < 30) {
83
 
      links.push({source: node, target: target});
84
 
    }
85
 
  });
86
 
 
87
 
  restart();
88
 
});
89
 
 
90
 
restart();
91
 
 
92
 
function restart() {
93
 
  force.start();
94
 
 
95
 
  vis.selectAll("line.link")
96
 
      .data(links)
97
 
    .enter().insert("line", "circle.node")
98
 
      .attr("class", "link")
99
 
      .attr("x1", function(d) { return d.source.x; })
100
 
      .attr("y1", function(d) { return d.source.y; })
101
 
      .attr("x2", function(d) { return d.target.x; })
102
 
      .attr("y2", function(d) { return d.target.y; });
103
 
 
104
 
  vis.selectAll("circle.node")
105
 
      .data(nodes)
106
 
    .enter().insert("circle", "circle.cursor")
107
 
      .attr("class", "node")
108
 
      .attr("cx", function(d) { return d.x; })
109
 
      .attr("cy", function(d) { return d.y; })
110
 
      .attr("r", 4.5)
111
 
      .call(force.drag);
112
 
}
113
 
 
114
 
    </script>
115
 
  </body>
116
 
</html>