tmcw/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
        font:normal 12px/20px 'Georgia';
        background:#000;
        text-align:center;
    }
    circle {
        fill:#333;
    }
    .inv {
        fill:#eee;
    }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

    var g = d3.select('body').append('svg')
            .attr({ width: 800, height: 800 })
            .append('g');

    var upto = 1;
    window.setInterval(function() {
        var levels = d3.range(0, upto).map(function(r) {
            return d3.range(0, Math.pow(2, r)).map(function(p) {
                return [p, r];
            });
        });

        var gs = g.selectAll('g')
            .data(levels);

        gs.exit().remove;

        var ge = gs.enter()
            .append('g')
            .selectAll('circle')
            .data(function(d) { return d; });

        ge.exit().remove();

        ge.enter()
            .append('circle')
                .classed('inv', function(d) {
                    return d[1] % 2 == 1;
                })
                .attr('cx', function(d) {
                    return (400 * Math.pow(0.5, d[1])) + 800 * d[0] * Math.pow(0.5, d[1]);
                })
                .attr('cy', 400)
                .transition()
                .duration(2000)
                .delay(function(d, i) {
                    return i * 100;
                })
                .attr('r', function(d) {
                    return 400 * Math.pow(0.5, d[1]);
                })
        if (upto++ > 8) upto = 1;
    }, 1000);
</script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	font:normal 12px/20px 'Georgia';
	background:#000;
	text-align:center;
	}
	circle {
	fill:#333;
	}
	.inv {
	fill:#eee;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var g = d3.select('body').append('svg')
	.attr({ width: 800, height: 800 })
	.append('g');

	var upto = 1;
	window.setInterval(function() {
	var levels = d3.range(0, upto).map(function(r) {
	return d3.range(0, Math.pow(2, r)).map(function(p) {
	return [p, r];
	});
	});

	var gs = g.selectAll('g')
	.data(levels);

	gs.exit().remove;

	var ge = gs.enter()
	.append('g')
	.selectAll('circle')
	.data(function(d) { return d; });

	ge.exit().remove();

	ge.enter()
	.append('circle')
	.classed('inv', function(d) {
	return d[1] % 2 == 1;
	})
	.attr('cx', function(d) {
	return (400 * Math.pow(0.5, d[1])) + 800 * d[0] * Math.pow(0.5, d[1]);
	})
	.attr('cy', 400)
	.transition()
	.duration(2000)
	.delay(function(d, i) {
	return i * 100;
	})
	.attr('r', function(d) {
	return 400 * Math.pow(0.5, d[1]);
	})
	if (upto++ > 8) upto = 1;
	}, 1000);
	</script>
	</body>