enjalot/index.html

## index.html
<!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>
	<!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>