d3 learning

by asanjum

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>

JavaScript

var radii = [40, 25, 15];

var svg = d3.select('body').append('svg')
    .attr('width', 250).attr('height', 250).style('border', '1px solid #CECECE');

svg.selectAll('circle').data(radii).enter().append('circle')
    .attr('cx', function(d, i) { return 50 + (i+1)*50; })
    .attr('cy', function(d) { return 50 + d * 2; })
    .attr('r', function(d) { return d; } )
    .style("fill", function(d, i) {
        var colors = ["purple", "yellow", "green"];
        return colors[i];
    });