lorenzopub/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Playing around with circles.
Heavily uses ideas from Mike Bostock's Arc Tween
forked from agware's block: Circles

  
## index.html
<!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 http://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>
	<!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 + i300)
	.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 http://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>