Circling planets

by marcgrabow

HTML

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

CSS

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

JavaScript

var planets = [
            {d:100,r:2},
            {d:150,r:4}
        ];

        var w = 500, h = 400, svg, circle;

        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});

            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();