mprajwala/index.html

## index.html
<!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>
	<!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>