Playing around with circles.
Heavily uses ideas from Mike Bostock's Arc Tween
Created
August 27, 2019 13:04
-
-
Save lorenzopub/7545ff34b4bf876ccba335f0920cb2a5 to your computer and use it in GitHub Desktop.
Circles
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment