← Back to branch summary

~bcsaller/juju-gui/charmFind

« back to all changes in this revision

Viewing changes to lib/d3/examples/touch/touch.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/d3/examples/touch/touch.html
1
 
<!DOCTYPE html>
2
 
<html>
3
 
  <head>
4
 
    <meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
5
 
    <script type="text/javascript" src="../../d3.v2.js"></script>
6
 
    <style type="text/css">
7
 
 
8
 
html, body {
9
 
  height: 100%;
10
 
}
11
 
 
12
 
body {
13
 
  margin: 0;
14
 
}
15
 
 
16
 
svg {
17
 
  display: block;
18
 
  overflow: hidden;
19
 
  width: 100%;
20
 
  height: 100%;
21
 
}
22
 
 
23
 
    </style>
24
 
  </head>
25
 
  <body>
26
 
    <script type="text/javascript">
27
 
 
28
 
var color = d3.scale.category10();
29
 
 
30
 
var svg = d3.select("body").append("svg");
31
 
 
32
 
d3.select("body")
33
 
    .on("touchstart", touch)
34
 
    .on("touchmove", touch)
35
 
    .on("touchend", touch);
36
 
 
37
 
function touch() {
38
 
  d3.event.preventDefault();
39
 
 
40
 
  var circle = svg.selectAll("circle.touch")
41
 
      .data(d3.touches(svg.node()), function(d) { return d.identifier; })
42
 
      .attr("cx", function(d) { return d[0]; })
43
 
      .attr("cy", function(d) { return d[1]; });
44
 
 
45
 
  circle.enter().append("circle")
46
 
      .attr("class", "touch")
47
 
      .attr("cx", function(d) { return d[0]; })
48
 
      .attr("cy", function(d) { return d[1]; })
49
 
      .style("fill", function(d) { return color(d.identifier); })
50
 
      .attr("r", 1e-6)
51
 
    .transition()
52
 
      .duration(500)
53
 
      .ease("elastic")
54
 
      .attr("r", 48);
55
 
 
56
 
  circle.exit()
57
 
      .attr("class", null)
58
 
    .transition()
59
 
      .attr("r", 1e-6)
60
 
      .remove();
61
 
}
62
 
 
63
 
    </script>
64
 
  </body>
65
 
</html>