Sha256: 6b3a78a41d6886e960e2f21fc3fd38bcf8666aa81c79fe889f033d9ae9b219ec
Contents?: true
Size: 1.15 KB
Versions: 25
Compression:
Stored size: 1.15 KB
Contents
<!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")
.attr("width", w)
.attr("height", h)
.attr("pointer-events", "all");
svg.append("g")
.selectAll("circle")
.data(d3.range(110))
.enter().append("circle")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
.attr("r", function(d) { return d * 5; });
var circle = svg.append("g")
.selectAll("circle")
.data(d3.range(60))
.enter().append("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>
Version data entries
25 entries across 25 versions & 1 rubygems