var a = -90, b = 0, c = 90, d = 180;
var g = d3.select('#vis')
    .selectAll('svg')
    .data([a, b, a, b, d,
           c, d, d, a, a,
           b, a, d, b, c,
           b, c, b, c, b,
           c, d, c, d, b])
    .enter()
    .append('svg')
    .attr({ width: 80, height: 80 })
    .append('g')
    .attr('transform', function(d) { return 'rotate(' + d + ', 40, 40)'; });

var line = d3.svg.line()
    .x(function(d) { return d[0]; })
    .y(function(d) { return d[1]; });

function unit(angle) { return [Math.cos(angle), Math.sin(angle)]; }
function mult(x, y) { return x.map(function(_) { return _ * y; }); }

function gen(i) {
   var angle = Math.PI * 0.5 * (i / 30);
   return [[0, 0],
      mult(unit(angle), (1 / Math[(angle < Math.PI/4) ? 'cos' : 'sin'](angle) * 80))
   ];
}

g.selectAll('path.a')
    .data(d3.range(0, 31).map(gen))
    .enter().append('path')
    .attr({ 'class': 'a', d: line });