Skip to content

Instantly share code, notes, and snippets.

@thole

thole/index.html

Last active October 20, 2018 07:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thole/23aafe3e2f62e1fc3582ec2ef7fa0d4d to your computer and use it in GitHub Desktop.
Save thole/23aafe3e2f62e1fc3582ec2ef7fa0d4d to your computer and use it in GitHub Desktop.
Download ZIP
circle
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div>
<div class="chart"></div>
</div>
<script>
var width = 300;
var height = 300;
var margin = {top: 50, right: 50, bottom: 50, left: 50};
var circles = d3.range(20).map(function(){});
var distance = Math.min(height,width)/2;
var scale = d3.scale.linear()
.domain([0, circles.length])
.range([0,2*Math.PI]);
var svg = d3.select(".chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.style("filter", "url(#gooey)")
.attr("transform", "translate(" + (margin.left) + "," + (margin.top) + ")")
.on('mouseenter',max)
.on('mouseout',min);
var defs = svg.append('defs');
var filter = defs.append('filter').attr('id','gooey');
filter.append('feGaussianBlur')
.attr('in','SourceGraphic')
.attr('stdDeviation','10')
.attr('result','blur');
filter.append('feColorMatrix')
.attr('in','blur')
.attr('mode','matrix')
.attr('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7')
.attr('result','gooey');
filter.append('feBlend')
.attr('in','SourceGraphic')
.attr('in2','gooey');
svg.selectAll('circle').data(circles).enter().append("circle")
.attr("class", "flyCircleA")
.attr("cx", function(d,i){ return width/2 + 0 * Math.cos(scale(i)); })
.attr("cy", function(d,i){ return height/2 + 0 * Math.sin(scale(i)); })
.attr("r", 40)
.style("fill", "steelblue")
function max(){
d3.selectAll(".flyCircleA")
.transition().duration(1000).delay(function(d,i){ return i * 50; })
.attr("cx", function(d,i){ return width/2 + distance * Math.cos(scale(i)); })
.attr("cy", function(d,i){ return height/2 + distance * Math.sin(scale(i)); })
.attr("r",16)
}
function min(){
d3.selectAll(".flyCircleA")
.transition().duration(1000).delay(function(d,i){ return (circles.length-i) * 50; })
.attr("cx", function(d,i){ return width/2 + 0 * Math.cos(scale(i)); })
.attr("cy", function(d,i){ return height/2 + 0 * Math.sin(scale(i)); })
.attr("r",40)
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment