Skip to content

Instantly share code, notes, and snippets.

@jrmoran
Created November 15, 2013 18:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jrmoran/7489608 to your computer and use it in GitHub Desktop.
Save jrmoran/7489608 to your computer and use it in GitHub Desktop.
Circles at an angle with d3.js
var v = d3.select('#viz')
.append("svg")
.attr("width", 1170)
.attr("height", 700 );
var getPointAtAngle = function(center, radius, theta){
console.log(r);
theta = 90 + theta;
return {
x: center.x + radius * Math.sin(theta * Math.PI/180),
y: center.y + radius * Math.cos(theta * Math.PI/180)
};
};
var c = { x: 150, y: 150},
r = 150;
var points = [getPointAtAngle(c, r, 45),
getPointAtAngle(c, r, 135),
c,
getPointAtAngle(c, r, 225),
getPointAtAngle(c, r, 315)];
v.append('circle')
.attr('cx', c.x)
.attr('cy', c.y)
.attr('fill', 'blue')
.attr('r', r);
v.selectAll('.guide')
.data(points)
.enter()
.append('g')
.attr('class', 'guide')
.append('circle')
.attr('cx', function(d, i){ return d.x; })
.attr('cy', function(d, i){ return d.y; })
.attr('r', 5)
.attr('fill', 'red');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment