random-simple-poly-circle

<!DOCTYPE html>
<meta charset="utf-8">

<style>

path{
	fill-opacity: .3;
}

html{
	width: 960px;
	height: 500px;
}
</style>

var s = d3.scale.linear().domain([-1, 1]).range([0, size])

var polys = d3.range(rows*cols).map(function(d){
	return {
		x: d % rows,
		y: Math.floor(d/rows),
		points: randPoly(100).map(function(d){
			return P(s(d.x), s(d.y))
		})
	}
})

var svg = d3.select('html').append('svg')
		.attr({width: 960, height: 500})

var polyG = svg.dataAppend(polys, 'g')
	 .translate(function(d){ return [d.x*size, d.y*size] })

polyG.dataAppend(ƒ('points'), 'circle')
		.translate(ƒ())
		.attr('r', 1.5)

polyG.append('path.poly')
		.attr('d', function(d){
			return 'M' + d.points.join('L') })

</script>