D3 Examples - Dot density circles

xxxxxxxxxx
 
<!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>
    