// x and y of each triangle point
var trianglePoints = [
    [75, 0],
    [0, 150],
    [150, 150]
];

var w = +d3.select('svg').attr('width')
var h = +d3.select('svg').attr('height')

// create triangle path manually :)
function triangle(d, i) {
    d3.select(this)
        .attr('d', ("M " + ([].concat( d )) + " Z"))
}

// this would create a single triangle
/*
d3.select('svg#vis')
    .append('g')
    .append('path')
    .datum(trianglePoints)
    .each(triangle)
*/

// create multiple triangles
function render(nTimes) {
    var svg = d3.select('svg#vis')
        .selectAll('g')
        .data(d3.range(nTimes))
        
    var enter = svg.enter()
        .append('g')
        .attr('transform', function (d, i) { return ("translate(" + (w/2) + ", " + (h/2) + ") rotate(" + (i * 10) + ")"); })
        .append('path')

    svg.merge(enter)
        .datum(trianglePoints)
        .each(triangle)

    svg.exit().remove()
}

render(45)