Add moire pattern example.

2010-11-26 15:12:36 -08:00 · 2010-11-26 15:12:36 -08:00 · 1855ca2df6
--- a/examples/moire/moire.html
+++ b/examples/moire/moire.html
@ -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("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("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>