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;
}
.inv {
    fill:#000;
}
</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(210, 10)');

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 invtri = [
    [0, Math.sqrt(3)/2],
    [1, Math.sqrt(3)/2],
    [0.5, 0],
    [0, Math.sqrt(3)/2]
];

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

g.selectAll('path')
    .data(tris)
    .enter()
    .append('path')
    .attr('transform', function(d) {
        var inv = d[0] % 2 === 0;
        var scale = Math.pow(1/2, d[0]);
        var transX = -200 * Math.pow(1/2, d[0]);
        var transY = 0, s = 200 * Math.sqrt(3)/2;
        for (var i = 1; i < d[0]; i++) {
            if (i % 2 == 1) {
                s *= 1/2;
                transY += s;
            }
        }
        var rotate = 0;
        return '' +
            'translate(' + [transX, transY] + ')' +
            'scale(' + scale + ')' +
            '';
    })
    .classed('inv', function(d) {
        return d[0] % 2 === 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;
	}
	.inv {
	fill:#000;
	}
	</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(210, 10)');

	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 invtri = [
	[0, Math.sqrt(3)/2],
	[1, Math.sqrt(3)/2],
	[0.5, 0],
	[0, Math.sqrt(3)/2]
	];

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

	g.selectAll('path')
	.data(tris)
	.enter()
	.append('path')
	.attr('transform', function(d) {
	var inv = d[0] % 2 === 0;
	var scale = Math.pow(1/2, d[0]);
	var transX = -200 * Math.pow(1/2, d[0]);
	var transY = 0, s = 200 * Math.sqrt(3)/2;
	for (var i = 1; i < d[0]; i++) {
	if (i % 2 == 1) {
	s *= 1/2;
	transY += s;
	}
	}
	var rotate = 0;
	return '' +
	'translate(' + [transX, transY] + ')' +
	'scale(' + scale + ')' +
	'';
	})
	.classed('inv', function(d) {
	return d[0] % 2 === 0;
	})
	.attr('d', function(d) {
	return l(d[1]);
	});

	</script>
	</body>