Drawing Shapes in a Circle

can be used for co-authors, pubs, etc.

by Nivaldo

JavaScript

var data = [1, 2, 3, 4, 5, 6, 7, 8, 9 , 10];

var r = 200,
    w = r * 3,
    h = w,
    rad = Math.PI/180,
    interval = 360/data.length;

var svg = d3.select('body')
    .append('svg')
    .attr('width', w)
    .attr('height', h)
    .append('g')
    .attr('transform', 'translate(' + r + ',' + r + ')');

svg.selectAll('g')
    .data(data)
    .enter()
    .append('circle')
    .attr('fill', 'steelblue')
    .attr('r', w/interval)
    .attr('transform', function (d, i) {
        return "translate(" + ((w/2-r) * Math.cos((interval*i) * Math.PI/180)) + "," + ((w/2-r) * Math.sin((interval*i) * Math.PI/180)) + ")";
    });