--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/moire/moire.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+ <title>Moiré Patterns</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <style type="text/css">
+
+circle {
+ fill: none;
+ stroke: #000;
+}
+
+ </style>
+ </head>
+ <body>
+ <script type="text/javascript">
+
+var w = 960,
+ h = 500;
+
+var svg = d3.select("body")
+ .append("svg:svg")
+ .attr("width", w)
+ .attr("height", h)
+ .attr("pointer-events", "all");
+
+svg.append("svg:g")
+ .selectAll("circle")
+ .data(d3.range(110))
+ .enter().append("svg:circle")
+ .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
+ .attr("r", function(d) { return d * 5; });
+
+var circle = svg.append("svg:g")
+ .selectAll("circle")
+ .data(d3.range(60))
+ .enter().append("svg:circle")
+ .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
+ .attr("r", function(d) { return d * 3; });
+
+svg.on("mousemove", function() {
+ var mouse = d3.svg.mouse(this),
+ r = (Math.sqrt(mouse[0]) + 10) / 10;
+
+ circle
+ .attr("transform", "translate(" + mouse + ")")
+ .attr("r", function(d) { return d * r; });
+});
+
+ </script>
+ </body>
+</html>