tomgp/data.csv

## readme.md

      
    Raw
  

              readme.md
            
          
    Distribute points in a circle at random and uniformly.

  
## data.csv

          
            radius
            value

            
              100
              500

            
              200
              4000

            
              75
              1000

            
              20
              100

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
	.point{
		fill-opacity:0.5;
	}
</style>
<body>
<script src="http://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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.point{
	fill-opacity:0.5;
	}
	</style>
	<body>
	<script src="http://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>