Circling planets

HTML

<div id="drawArea"></div>

CSS

svg {
            background-color: black;
        }
        .planet {
            fill:white;
        }
        .sun {
            fill:yellow;
        }

JavaScript

var planets = [
            {d:20,r:2, angle : 0, x:0},
            {d:50,r:4, angle:30, x:30},
            {d:80,r:2, angle:60, x:60},
            {d:110,r:4, angle:90, x:90},
            {d:140,r:2, angle:120, x:120},
            {d:170,r:4, angle:150, x:150}
        ];

        var w = 500, h = 400, svg, circle;
        var angle=30, angle1=0;
        function init(){

            svg = d3.select("#drawArea").append("svg").attr({width: w, height: h});

            var center = {
                x: Math.floor(w/2),
                y: Math.floor(h/2)
            };

            svg.append('circle').attr({
                'cx': center.x,
                'cy': center.y,
                'r': 10,
                'class': 'sun'
            });

            circle = svg.selectAll(".planet")
                .data(planets)
                .enter()
                    .append("circle")
                        .attr("class", "planet")
                        .attr("r", function(s){return s.r})
                   .attr("transform", function(d) {
          return "rotate(" + d.angle + ",0,0)";
        });
      circle.attr({
                // distance from the center
                'cx': function(s){ return center.x - s.d; },
                // center of the screen
                'cy': function(s){ return center.y; }
            });
                       

            

        }

init();