tomgp/index.html

## index.html
<html>
<head>
	<title>Labels on a circle</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">
		.guide{
			stroke:#aaa;
			fill:none;
			stroke-width:1;
			stroke-dasharray:1,1;
		}

		.dot{
			fill:#333;
			alignment-baseline:middle;
		}
	</style>
</head>
<body>

</body>

<script type="text/javascript">

	var size = 300;
	var dotSize = 15;
	var margin = 100;

	function pointsOnCircle(num){
		var angle = (2 * Math.PI)/num;
		var points = [];
		var i=0;
		for(var a = 0; a<(2*Math.PI); a+=angle){
			i++;
			points.push({
				x:Math.cos(a),
				y:Math.sin(a),
				rotation:a,
				label:'point ' + i
			})
		}
		return points;
	}

	var circles = [];

	for(var i=1;i<11;i++){
		circles.push( pointsOnCircle( i ) );
	}
	console.log	(circles);
	var scale = d3.scale.linear()
		.range([0, size])
		.domain([-1, 1]);

	var pointCircle = function(g){
		g.append('circle')
			.attr({
				r:size/2 - 20, //make the circle smaller than the labels circle
				cx:size/2,
				cy:size/2,
				'class':'guide'
			});

		g.each(function(data,i){
			d3.select(this).selectAll('.dot')
				.data(data)
				.enter()
					.append('text')
					.attr({
						"class":'dot',
						"x":function(d){ return scale(d.x) },
						"y":function(d){ return scale(d.y) },
						"text-anchor":function(d){
							if( d.rotation >= Math.PI/2 && d.rotation < (3*Math.PI)/2 ){
								return 'end';
							}
							return 'start';
						}
					})
					.text("HELLO!");
				});
	}

	d3.select('body')
		.selectAll('svg')
		.data(circles)
		.enter()
		.append('svg')
			.attr('width', size + margin*2)
			.attr('height', size + margin*2)
			.append('g').attr('transform','translate('+margin+','+margin+')')
			.call(pointCircle)


</script>
</html>
	<html>
	<head>
	<title>Labels on a circle</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">
	.guide{
	stroke:#aaa;
	fill:none;
	stroke-width:1;
	stroke-dasharray:1,1;
	}

	.dot{
	fill:#333;
	alignment-baseline:middle;
	}
	</style>
	</head>
	<body>

	</body>

	<script type="text/javascript">

	var size = 300;
	var dotSize = 15;
	var margin = 100;

	function pointsOnCircle(num){
	var angle = (2 * Math.PI)/num;
	var points = [];
	var i=0;
	for(var a = 0; a<(2*Math.PI); a+=angle){
	i++;
	points.push({
	x:Math.cos(a),
	y:Math.sin(a),
	rotation:a,
	label:'point ' + i
	})
	}
	return points;
	}

	var circles = [];

	for(var i=1;i<11;i++){
	circles.push( pointsOnCircle( i ) );
	}
	console.log (circles);
	var scale = d3.scale.linear()
	.range([0, size])
	.domain([-1, 1]);

	var pointCircle = function(g){
	g.append('circle')
	.attr({
	r:size/2 - 20, //make the circle smaller than the labels circle
	cx:size/2,
	cy:size/2,
	'class':'guide'
	});

	g.each(function(data,i){
	d3.select(this).selectAll('.dot')
	.data(data)
	.enter()
	.append('text')
	.attr({
	"class":'dot',
	"x":function(d){ return scale(d.x) },
	"y":function(d){ return scale(d.y) },
	"text-anchor":function(d){
	if( d.rotation >= Math.PI/2 && d.rotation < (3*Math.PI)/2 ){
	return 'end';
	}
	return 'start';
	}
	})
	.text("HELLO!");
	});
	}

	d3.select('body')
	.selectAll('svg')
	.data(circles)
	.enter()
	.append('svg')
	.attr('width', size + margin*2)
	.attr('height', size + margin*2)
	.append('g').attr('transform','translate('+margin+','+margin+')')
	.call(pointCircle)




	</script>
	</html>