Skip to content

Instantly share code, notes, and snippets.

@jdherg

jdherg/index.html

Created June 21, 2015 23:30
Show Gist options
  • Save jdherg/b1a5787c3fb6e7c4b22c to your computer and use it in GitHub Desktop.
Save jdherg/b1a5787c3fb6e7c4b22c to your computer and use it in GitHub Desktop.
Download ZIP
Simple Binary Orbit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.orbiter {
fill: #000;
}
.center {
fill: #CCC;
}
.orbit {
fill: none;
stroke: #888;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<body>
<script>
var width = 960,
height = 500,
dot_r = 10,
orbit_r = height/4,
center = {x: width/2,
y: height/2};
var dot_data = [
{ theta: 0 },
{ theta: Math.PI }];
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var dots = svg.selectAll(".orbiter")
.data(dot_data)
.enter().append("circle", true)
.attr("cx", function(d){ return center.x + orbit_r*Math.cos(d.theta); })
.attr("cy", function(d){ return center.y + orbit_r*Math.sin(d.theta); })
.attr("r", dot_r);
dots.classed("orbiter", true);
svg.append("circle")
.attr("cx", center.x)
.attr("cy", center.y)
.attr("r", dot_r/2)
.classed("center", true);
svg.append("circle")
.attr("cx", center.x)
.attr("cy", center.y)
.attr("r", orbit_r)
.classed("orbit", true);
var inc = Math.PI/2000;
var animate = function(elapsed){
dots.attr("cx", function(d) { return center.x + orbit_r*Math.cos(d.theta + inc*elapsed); })
.attr("cy", function(d) { return center.y + orbit_r*Math.sin(d.theta + inc*elapsed); });
};
d3.timer(animate);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment