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