Sha256: 54f622668bfee8eb76c3f9cd5f13c03d09b7ca89db5287293c31ba96b21c8908
Contents?: true
Size: 1.3 KB
Versions: 6
Compression:
Stored size: 1.3 KB
Contents
<!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>
Version data entries
6 entries across 6 versions & 1 rubygems