Skip to content

Instantly share code, notes, and snippets.

@enjalot
Created November 20, 2011 07:37
Show Gist options
  • Save enjalot/1379934 to your computer and use it in GitHub Desktop.
Save enjalot/1379934 to your computer and use it in GitHub Desktop.
4 circles in d3.js
<!DOCTYPE html>
<html>
<head>
<title>Spiral</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<style type="text/css">
body {
font: 10px sans-serif;
}
</style>
</head>
<body>
<script type="text/javascript">
var w = 500;
var h = 500;
var r1 = 90;
var r2 = 150;
var r3 = 220;
var r4 = 290;
//setup svg canvas
svg = d3.select("body")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.attr("id", "spiral")
svg.append("svg:rect")
.attr("class", "background_rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("stroke", "#000")
.attr("stroke-width", 1)
.attr("fill", "#888")
chart = svg.append("svg:g")
.attr("class", "base_group")
.attr("transform", "translate(" + [w/2,h/2] + ")scale(.5 .5)");
var make_circle = function(r,n,offset, step)
{
data = []
for(i = 0; i < n; i++)
{
theta = offset + i * 2 * Math.PI / n
//a = offset + step * d.index;
data.push({x: r * Math.cos(theta), y: r * Math.sin(theta), angle: theta, index: i })
}
return data
}
var circle_factory = function(name, data, offset)
{
var boxes = chart.selectAll("g." + name)
.data(data)
.enter().append("svg:g")
.attr("class", name)
.append("svg:rect")
.attr("width", 20)
.attr("height", 20)
.attr("stroke", function(d,i){
if(d.index % 2 == 1) {
return "#fff"
}
return "#000"
})
.attr("stroke-width", 2)
.attr("fill", "none")
.attr("transform", function(d,i) {
a = offset + step * d.index;
return "translate(" + [d.x ,d.y] + ")rotate(" + a + " 10 10)"
})
}
rot = 0
n = 18
data1 = make_circle(r1, n, rot)
step = 20
offset = 15;
circle_factory("one", data1, offset, step)
n = 30
data2 = make_circle(r2, n, rot)
step = 12
offset = -15
circle_factory("two", data2, offset, step)
n = 45
data3 = make_circle(r3, n, rot)
step = 8
offset = 15;
circle_factory("three", data3, offset, step)
n = 60
data4 = make_circle(r4, n, rot)
step = 6
offset = -15;
circle_factory("four", data4, offset, step)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment