Old school D3 from simpler times

All examples By author By category About

tmcw

Full window Github gist

Inscribed circles, prettier.

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

var r = 400;

function step() {
        g.append('circle')
            .transition()
            .duration(1000)
            .each('end', function() {
                var w = Math.sqrt(Math.pow(r,2)*2);
                var rect = g.append('rect').attr('class', 'p')
                    .attr({
                        width:w,
                        height:w,
                        x: -w/2,
                        y: -w/2
                    });
                rect.transition()
                    .attr('transform', 'rotate(' + Math.random() * 180 + ')');
                r *= 0.707105;
                g.transition().attr('transform', 'translate(400, 400) scale(' + [100/r, 100/r] + ')');
                if (r > 4) step();
            })
        .attr('r', r);
    }
    step();
    
</script>
</body>

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

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