Points on concentrical ring pattern

This example shows the placement of a preset number of points (i) in a concentrical ring pattern. The amount of points from one ring to the next forms an arithmetic progression, whose constant difference („more“) can be varied. By inverting the formula for arithmetic series the necessary number of rings ist calculated for a given amount of points. Afterward the points are arranged equally spaced in the ring pattern. By Manfred & Christopher Pietsch

forked from cpietsch's block: Points on concentrical ring pattern

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="dat.gui.min.js"></script>
<script>

var width = window.innerWidth,
    height = window.innerHeight;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")")

function getPos(d,i){
	var n = Math.floor( -1 * 0.5 + Math.sqrt( (8*i+params.more) / (4*params.more) ) ) + 1;
	var k = i - 0.5 * params.more * (n*n-n);

var x = n * params.dist * Math.cos((2*k*Math.PI)/(params.more*n));
	var y = n * params.dist * Math.sin((2*k*Math.PI)/(params.more*n));

return { i:i, x:x,y:y };
}

var params = {
    more : 4,
    dist : 10,
    size : 1000,
    radius : 1
};

function draw(){
	data = d3.range(params.size).map(getPos);

var s = svg.selectAll('circle')
		.data(data)

s
		.attr('cx',function(d){ return d.x; })
		.attr('cy',function(d){ return d.y; })
		.attr('r', function(d){ return params.radius; });

s.enter()
		.append('circle')
		.attr('cx',function(d){ return d.x; })
		.attr('cy',function(d){ return d.y; })
		.attr('r', function(d){ return params.radius; });

s.exit()
		.remove();
}
draw();

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js