tmcw/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
    font:normal 12px/20px 'Georgia';
    background:#222;
    text-align:center;
}
path {
    fill:#ccc;
    stroke:red;
    stroke-width:2;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var g = d3.select('body').append('svg')
    .append('g')
    .attr('transform', 'translate(50, 50)');

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

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

var tri = [
    [0, 0],
    [1, 0],
    [0.5, Math.sqrt(3)/2],
    [0, 0]
];

var tris =d3.range(0, 20).map(function(r) {
    return [r, tri];
});

g.selectAll('path')
    .data(tris)
    .enter()
    .append('path')
    .attr('transform', function(d) {
        return 'scale(' + Math.pow(2/3, d[0]) + ')';
    })
    .attr('d', function(d) {
        return l(d[1]);
    });

</script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	font:normal 12px/20px 'Georgia';
	background:#222;
	text-align:center;
	}
	path {
	fill:#ccc;
	stroke:red;
	stroke-width:2;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var g = d3.select('body').append('svg')
	.append('g')
	.attr('transform', 'translate(50, 50)');

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

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

	var tri = [
	[0, 0],
	[1, 0],
	[0.5, Math.sqrt(3)/2],
	[0, 0]
	];

	var tris =d3.range(0, 20).map(function(r) {
	return [r, tri];
	});

	g.selectAll('path')
	.data(tris)
	.enter()
	.append('path')
	.attr('transform', function(d) {
	return 'scale(' + Math.pow(2/3, d[0]) + ')';
	})
	.attr('d', function(d) {
	return l(d[1]);
	});

	</script>
	</body>