Infinite Geometric Series

<svg></svg>

<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>

<script>

    var svg = d3.select("svg");

​

    var x = 0,

        y = 0,

        r = 1/2,

        width = 400,

        height = 400,

        maxIterations = 25,

        color = d3.scale.category20();

​

    function draw(x, y, width, height, colorInd, reduceWidth){

        if (colorInd === maxIterations){

            return;

        }

        var rectangle = svg.append("rect")

        .attr("x", x)

        .attr("y", y)

        .attr("width", 0)

        .attr("height", height)

        .attr("fill", function(){ return color(colorInd); })

        .transition()

        .attr("width", width)

        .each("end", function(){

            if (reduceWidth){

                draw(x, y + height, width * r, height, ++colorInd, !reduceWidth); 

            } else {

                draw(x + width, y, width, height * r, ++colorInd, !reduceWidth); 

            }

        });

    }

​

    draw(x, y, width, height, 0, false);

</script>