Old school D3 from simpler times

All examples By author By category About

smilli

Full window Github gist

Infinite Geometric Series

A visualization of how the geometric series 1 + 1/2 + 1/4 + ... converges to 2.

<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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js