Circles

Playing around with circles.

Heavily uses ideas from Mike Bostock's Arc Tween

forked from agware's block: Circles

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
    path {
        fill: black;
    }
</style>
</head>
<body>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script>

///////////////////////////
    ////////// SETUP //////////
    ///////////////////////////

const margin = { top: 50, right: 50, bottom: 50, left: 50 };
    const height = 500 - margin.top - margin.bottom;
    const width = 960 - margin.left - margin.right;

let svg = d3.select('body').append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom);
    let base = svg.append('g')
        .attr('transform', 'translate(' + margin.right + ',' + margin.top + ')');

//////////////////////////
    ////////// DATA //////////
    //////////////////////////

const tau = 2 * Math.PI;
    let xScale = d3.scaleLinear().domain([0,1]).range([0,width]);
    let yScale = d3.scaleLinear().domain([0,1]).range([0,height]);

let arc = d3.arc()
        .innerRadius(30)
        .outerRadius(35)
        .startAngle(0);

let active = 10;
    let data = d3.range(10).map(() => {return {endAngle: 0}});

/////////////////////////////
    ////////// CIRCLES //////////
    /////////////////////////////

base.selectAll('path').data(data)
        .enter().append('path')
            .attr('d', arc)
            .attr('transform', d => 'translate(' + xScale(Math.random()) + ',' + yScale(Math.random()) + ')')
                .transition().duration(1000).delay((d,i) => Math.random()*300 + i*300)
                .attrTween('d', arcTween(tau))
                .on('end', remove);
    
    function add() {
        d3.select(this)
            .attr('transform', 'translate(' + xScale(Math.random()) + ',' + yScale(Math.random()) + ')')
            .transition().duration(1000)
            .attrTween('d', arcTween(tau))
            .on('end', remove);
    }

function remove() {
        d3.select(this).transition().duration(1000).delay(500)
            .attrTween('d', arcTween(0))
            .on('end', add);
    }

// This is taken from Mike Bostock's Arc Tween https://bl.ocks.org/mbostock/5100636
    function arcTween(newAngle) {
        return function (d) {
            let interpolate = d3.interpolate(d.endAngle, newAngle);
            return function (t) {
                d.endAngle = interpolate(t);
                return arc(d);
            };
        };
    }

</script>
</body>

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