← Back to branch summary

~smagoun/whoopsie/whoopsie-lp1017637

« back to all changes in this revision

Viewing changes to backend/stats/static/js/d3/examples/hello-world/hello-sort.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/hello-world/hello-sort.html
1
 
<!DOCTYPE html>
2
 
<html>
3
 
  <head>
4
 
    <title>Hello, sort!</title>
5
 
    <script type="text/javascript" src="../../d3.v2.js"></script>
6
 
    <style type="text/css">
7
 
 
8
 
html, body, svg {
9
 
  font: 14px Helvetica Neue;
10
 
  margin: 0;
11
 
  width: 100%;
12
 
  height: 100%;
13
 
  display: block;
14
 
}
15
 
 
16
 
circle {
17
 
  fill: steelblue;
18
 
  fill-opacity: .8;
19
 
  stroke: #fff;
20
 
}
21
 
 
22
 
div {
23
 
  position: fixed;
24
 
  top: 10px;
25
 
  left: 10px;
26
 
}
27
 
 
28
 
    </style>
29
 
  </head>
30
 
  <body>
31
 
    <div>
32
 
      <input id="sort" type="checkbox" checked>
33
 
      <label for="sort">Ascending</label>
34
 
    </div>
35
 
    <script type="text/javascript">
36
 
 
37
 
d3.select("body")
38
 
  .append("svg")
39
 
    .attr("viewBox", "0 0 1000 1000");
40
 
 
41
 
d3.select("#sort")
42
 
    .on("change", sort);
43
 
 
44
 
transform();
45
 
 
46
 
function transform() {
47
 
  var circle = d3.select("svg")
48
 
    .selectAll("circle")
49
 
      .data(d3.range(400).map(Math.random));
50
 
 
51
 
  circle.enter().append("circle")
52
 
      .attr("cx", function() { return 100 + Math.random() * 800; })
53
 
      .attr("cy", function() { return 100 + Math.random() * 800; })
54
 
      .attr("r", function(d) { return 50 * d; });
55
 
 
56
 
  circle
57
 
    .transition()
58
 
      .duration(750)
59
 
      .attr("r", function(d) { return 50 * d; });
60
 
 
61
 
  sort();
62
 
}
63
 
 
64
 
function sort() {
65
 
  d3.selectAll("circle")
66
 
      .sort(d3.select("#sort").property("checked")
67
 
      ? function(a, b) { return b - a; }
68
 
      : function(a, b) { return a - b; });
69
 
}
70
 
 
71
 
window.addEventListener("keypress", transform, false);
72
 
 
73
 
    </script>
74
 
  </body>
75
 
</html>