danfishgold/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
    width: 960px;
    height: 500px;
    position: relative;
}

svg {
    background-color: lightgray;
}

svg .planet {
    fill: darkgray;
    stroke: black;
    stroke-width: 1;
}

svg .moon {
    fill: lightgray;
    stroke: black;
    stroke-width: 1;
}

svg .track {
    fill: none;
    stroke: black;
    stroke-width: 1;
}

svg #sun {
    fill: black;
}

</style>

<body></body>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var w = 960,
    h = 500,
    R = Math.min(w, h)/2;

function rand(min, max) {
    return min + Math.random() * (max-min);
}

function randRange(range) {
    return range[0] + Math.random() * (range[1]-range[0]);
}


var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);


var planets = [],
    moons = [],
    n = 3;
    nMoonsMax = 2,
    sunRadius = 0.05*R,
    planetRadius = 0.02*R,
    moonRadius = 0.008*R;
    planetRotationRadiusRange = [0.085*R, 0.9*R];

var moonRotationRadiusRange = [0.06*R, 0.12*R];


for (var i = 0; i < n; i++) {
    var planet = {
        r: randRange(planetRotationRadiusRange),
        th: rand(0, 6.28),
        speed: rand(0.2, 0.5),
    };
    planets.push(planet);

    var nMoons = ~~rand(0, nMoonsMax+1);
    for (var j = 0; j < nMoons; j++) {
        moons.push({
            rx: randRange(moonRotationRadiusRange),
            ry: randRange(moonRotationRadiusRange),
            th: rand(0, 6.28),
            speed: rand(1, 3),
            planet: planet
        });
    }
}

// Sun
svg.append("circle")
    .attr("id", "sun")
    .attr("cx", w/2)
    .attr("cy", h/2)
    .attr("r", sunRadius);

// Tracks
svg.selectAll("circle.track")
    .data(planets)
    .enter()
    .append("circle")
    .attr("class", "track")
    .attr("cx", w/2)
    .attr("cy", h/2)
    .attr("r", function(d) { return d.r; });


// Planets
svg.selectAll("circle.planet")
    .data(planets)
    .enter()
    .append("circle")
    .attr("class", "planet")
    .attr("r", planetRadius);

// Moons
svg.selectAll("circle.moon")
    .data(moons)
    .enter()
    .append("circle")
    .attr("class", "moon")
    .attr("r", moonRadius);


function x(pt) {
    var r = pt.r || pt.rx;
    return r * Math.cos(pt.th);
}

function y(pt) {
    var r = pt.r || pt.ry;
    return r * Math.sin(pt.th);
}


function drawPoint(selection, center) {
    selection
        .attr("cx", function(d) { return center.x + x(d); })
        .attr("cy", function(d) { return center.y + y(d); });
}

function draw() {
    svg.selectAll("circle.planet")
        .data(planets)
        .call(drawPoint, {x: w/2, y: h/2});

    svg.selectAll("circle.moon")
        .data(moons)
        .each(function(d) {
            var center = { x: w/2 + x(d.planet), y: h/2 + y(d.planet) };
            drawPoint(d3.select(this), center);
        });
}

var t = Date.now();
d3.timer(function() {
    planets.forEach(function(d) {
        d.th += (Date.now()-t)/1000 * d.speed;
    });
    moons.forEach(function(d) {
        d.th += (Date.now()-t)/1000 * d.speed;
    });
    t = Date.now();
    draw();
});
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	width: 960px;
	height: 500px;
	position: relative;
	}

	svg {
	background-color: lightgray;
	}

	svg .planet {
	fill: darkgray;
	stroke: black;
	stroke-width: 1;
	}

	svg .moon {
	fill: lightgray;
	stroke: black;
	stroke-width: 1;
	}

	svg .track {
	fill: none;
	stroke: black;
	stroke-width: 1;
	}

	svg #sun {
	fill: black;
	}

	</style>

	<body></body>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var w = 960,
	h = 500,
	R = Math.min(w, h)/2;

	function rand(min, max) {
	return min + Math.random() * (max-min);
	}

	function randRange(range) {
	return range[0] + Math.random() * (range[1]-range[0]);
	}



	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);


	var planets = [],
	moons = [],
	n = 3;
	nMoonsMax = 2,
	sunRadius = 0.05*R,
	planetRadius = 0.02*R,
	moonRadius = 0.008*R;
	planetRotationRadiusRange = [0.085R, 0.9R];

	var moonRotationRadiusRange = [0.06R, 0.12R];


	for (var i = 0; i < n; i++) {
	var planet = {
	r: randRange(planetRotationRadiusRange),
	th: rand(0, 6.28),
	speed: rand(0.2, 0.5),
	};
	planets.push(planet);

	var nMoons = ~~rand(0, nMoonsMax+1);
	for (var j = 0; j < nMoons; j++) {
	moons.push({
	rx: randRange(moonRotationRadiusRange),
	ry: randRange(moonRotationRadiusRange),
	th: rand(0, 6.28),
	speed: rand(1, 3),
	planet: planet
	});
	}
	}

	// Sun
	svg.append("circle")
	.attr("id", "sun")
	.attr("cx", w/2)
	.attr("cy", h/2)
	.attr("r", sunRadius);

	// Tracks
	svg.selectAll("circle.track")
	.data(planets)
	.enter()
	.append("circle")
	.attr("class", "track")
	.attr("cx", w/2)
	.attr("cy", h/2)
	.attr("r", function(d) { return d.r; });


	// Planets
	svg.selectAll("circle.planet")
	.data(planets)
	.enter()
	.append("circle")
	.attr("class", "planet")
	.attr("r", planetRadius);

	// Moons
	svg.selectAll("circle.moon")
	.data(moons)
	.enter()
	.append("circle")
	.attr("class", "moon")
	.attr("r", moonRadius);


	function x(pt) {
	var r = pt.r \|\| pt.rx;
	return r * Math.cos(pt.th);
	}

	function y(pt) {
	var r = pt.r \|\| pt.ry;
	return r * Math.sin(pt.th);
	}


	function drawPoint(selection, center) {
	selection
	.attr("cx", function(d) { return center.x + x(d); })
	.attr("cy", function(d) { return center.y + y(d); });
	}

	function draw() {
	svg.selectAll("circle.planet")
	.data(planets)
	.call(drawPoint, {x: w/2, y: h/2});

	svg.selectAll("circle.moon")
	.data(moons)
	.each(function(d) {
	var center = { x: w/2 + x(d.planet), y: h/2 + y(d.planet) };
	drawPoint(d3.select(this), center);
	});
	}

	var t = Date.now();
	d3.timer(function() {
	planets.forEach(function(d) {
	d.th += (Date.now()-t)/1000 * d.speed;
	});
	moons.forEach(function(d) {
	d.th += (Date.now()-t)/1000 * d.speed;
	});
	t = Date.now();
	draw();
	});
	</script>