4 circles in d3.js

<!DOCTYPE html>
<html>
 <head>
   <title>Spiral</title>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
   <style type="text/css">

body {
 font: 10px sans-serif;
}

</style>
 </head>
 <body>

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 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>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js