Skip to content

Instantly share code, notes, and snippets.

@mprajwala
Last active August 29, 2015 13:57
Show Gist options
  • Save mprajwala/9790296 to your computer and use it in GitHub Desktop.
Save mprajwala/9790296 to your computer and use it in GitHub Desktop.
Align bubbles on a circle circumference
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
circle.parent, circle.child {
stroke: #000;
fill: transparent;
}
</style>
</head>
<body>
<div>Place elements in circle</div>
<div id="vis">
</div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
var width = 960;
var height = 600;
var radius = 150;
var usercradius = 20;
var userfillcolor = '#8cc63f';
var svg = d3.select('#vis')
.append('svg')
.attr("width", width)
.attr("height", height)
.append("g").attr("transform", "translate("+width/2+","+height/2+")");
var circle = svg.append("circle").attr("r", radius).attr("class", "parent");
var data = [20, 30, 40, 50, 60, 50, 70, 23, 45, 60, 70, 40, 30, 60, 20, 10, 20, 30, 40, 50, 40, 50];
var t = 360/data.length;
var ts = [];
var xscale = [];
var yscale = [];
for (i = 0; i< data.length; i++) {
var dg = i*t;
ts.push(dg);
xscale.push(radius * Math.cos(dg * Math.PI / 180));
yscale.push(radius * Math.sin(dg * Math.PI / 180));
}
var bubbles = svg.selectAll(".bubble")
.data(data).enter()
.append("circle")
.attr("class", "child")
.attr("r", 20).attr("cx", function(d, i){
return xscale[i];
}).attr("cy", function(d, i){
return yscale[i];
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment