D3 Examples - random-simple-poly-circle

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
​
path{
    fill-opacity: .3;
}
​
html{
    width: 960px;
    height: 500px;
}
</style>
​
​
​
<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>
<script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>
<script src='/1wheel/raw/5d32ecb8a54b42f53646/geometry.js'></script>
​
<script src='rand-poly.js'></script>
​
<script>
var size = 160,
        rows = Math.floor(960/size),
    cols = Math.floor(500/size)
​
​
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>
    