tmcw/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
    stroke:#b73438; stroke-width:1; fill:transparent;
}
svg {
    float:left;
}
#vis {
    width: 400px;
    height: 400px;
}
#matte {
    background:#f1f1f1;
    width: 400px;
    height: 400px;
    padding:50px;
}
</style>
<body>
    <div id='matte'>
    <div id='vis'></div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src='viz.js'></script>
</body>

## viz.js
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 });
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	path {
	stroke:#b73438; stroke-width:1; fill:transparent;
	}
	svg {
	float:left;
	}
	#vis {
	width: 400px;
	height: 400px;
	}
	#matte {
	background:#f1f1f1;
	width: 400px;
	height: 400px;
	padding:50px;
	}
	</style>
	<body>
	<div id='matte'>
	<div id='vis'></div>
	</div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src='viz.js'></script>
	</body>
	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 });