Dot density circles

Distribute points in a circle at random and uniformly.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
	.point{
		fill-opacity:0.5;
	}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960, height = 700;
var color = d3.scale.category10();
function pointInCircle(r){
	var theta = 2 * Math.PI * Math.random();
	var rootR = r * Math.sqrt(Math.random());
	return {
		cx: rootR * Math.cos(theta),
		cy: rootR * Math.sin(theta)
	}
}

function drawDensityCircle(d,i){
	var parent = d3.select(this);
	console.log(i,color(i));
	for(var dot = 0; dot < d.value; dot++){
		var p = pointInCircle(parseInt(d.radius));
		p.r = 2;
		p['class'] = 'point';
		p.fill = color(i);
		parent.append('circle').attr(p);
	}
}

d3.csv('data.csv',function(d){
	d.map(function(d){
		return {
			radius: parseInt(d.radius),
			value: parseInt(d.value)
		}
	})
	d3.select('body')
		.append('svg').attr({width:width, height:height})
		.selectAll('.area')
		.data(d)
			.enter()
			.append('g')
			.attr( 'transform', function(d,i){
				var xpos = (width - (d.radius * 2)) * Math.random() + d.radius;
				var ypos = (height - (d.radius * 2)) * Math.random() + d.radius;
				return 'translate(' + xpos + ',' + height * Math.random() + ')';
			})		
			.each(drawDensityCircle);
});

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js