Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Planetarium
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
.orbit {
stroke : #000000;
fill : none;
}
.planet {
stroke : #000000;
fill : #FFFFFF;
}
.sun {
stroke : #000000;
fill : #000000;
}
</style>
</head>
<body>
<div id="planetarium">
</div>
<script type="text/javascript">
var w = 800, h = 600;
var t0 = Date.now();
var planets = [
{ R: 300, r: 5, speed: 5, phi0: 90},
{ R: 150, r: 10, speed: 2, phi0: 190}
];
var svg = d3.select("#planetarium").insert("svg")
.attr("width", w).attr("height", h);
svg.append("circle").attr("r", 20).attr("cx", w/2)
.attr("cy", h/2).attr("class", "sun")
var container = svg.append("g")
.attr("transform", "translate(" + w/2 + "," + h/2 + ")")
container.selectAll("g.planet").data(planets).enter().append("g")
.attr("class", "planet").each(function(d, i) {
d3.select(this).append("circle").attr("class", "orbit")
.attr("r", d.R);
d3.select(this).append("circle").attr("r", d.r).attr("cx",d.R)
.attr("cy", 0).attr("class", "planet");
});
d3.timer(function() {
var delta = (Date.now() - t0);
svg.selectAll(".planet").attr("transform", function(d) {
return "rotate(" + d.phi0 + delta * d.speed/200 + ")";
});
});
</script>
</body>
</html>
@edwindj
Copy link

edwindj commented Apr 8, 2013

Nice!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment