--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/touch/touch.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <style type="text/css">
+
+html, body {
+ height: 100%;
+}
+
+body {
+ margin: 0;
+}
+
+svg {
+ display: block;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+}
+
+ </style>
+ </head>
+ <body>
+ <script type="text/javascript">
+
+var color = d3.scale.category10();
+
+var svg = d3.select("body").append("svg:svg");
+
+d3.select("body")
+ .on("touchstart", touch)
+ .on("touchmove", touch)
+ .on("touchend", touch);
+
+function touch() {
+ d3.event.preventDefault();
+
+ var circle = svg.selectAll("circle.touch")
+ .data(d3.svg.touches(svg.node()), function(d) { return d.identifier; })
+ .attr("cx", function(d) { return d[0]; })
+ .attr("cy", function(d) { return d[1]; });
+
+ circle.enter().append("svg:circle")
+ .attr("class", "touch")
+ .attr("cx", function(d) { return d[0]; })
+ .attr("cy", function(d) { return d[1]; })
+ .style("fill", function(d) { return color(d.identifier); })
+ .attr("r", 1e-6)
+ .transition()
+ .duration(500)
+ .ease("elastic")
+ .attr("r", 48);
+
+ circle.exit()
+ .attr("class", null)
+ .transition()
+ .attr("r", 1e-6)
+ .remove();
+}
+
+ </script>
+ </body>
+</html>