(function() { var width = 962; // svg width var height = 502; // svg height var sides = 5; // polygon vertices number var radius = width/4 - 50; // polygon radius window.main = function() { svg = d3.select('body') .append('svg') .attr('width', width) .attr('height', height) .attr('viewBox', [-width/2, -height/2, width, height].join(' ')); container = svg.append('g'); crd = polygon(0, 0, radius, sides); for (var i = 0; i < crd.length; i++) { container.append('circle') .attr('r', 10) .attr('cx', crd[i][0]) .attr('cy', crd[i][1]) .attr('fill', '#FCE29D') .attr('stroke', '#F7B127') .attr('stroke-width', 4); } } /* GIVEN x and y (the center coordinates), the radius and the number of polygon sides RETURNS AN ARRAY OF VERTICE COORDINATES */ function polygon(x, y, radius, sides) { var crd = []; /* 1 SIDE CASE */ if (sides == 1) return [[x, y]]; /* > 1 SIDE CASEs */ for (var i = 0; i < sides; i++) { crd.push([(x + (Math.sin(2 * Math.PI * i / sides) * radius)), (y - (Math.cos(2 * Math.PI * i / sides) * radius))]); } return crd; } }).call(this);