|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
|
|
<!-- D3.js --> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> |
|
|
|
</head> |
|
<body> |
|
|
|
<div id="chart" style="text-align: center; background-color: #132d50;"></div> |
|
|
|
<script language="javascript" type="text/javascript"> |
|
|
|
/////////////////////////////////////////////////////////////////////////// |
|
//////////////////// Set up and initiate svg containers /////////////////// |
|
/////////////////////////////////////////////////////////////////////////// |
|
|
|
var margin = { |
|
top: 10, |
|
right: 10, |
|
bottom: 10, |
|
left: 10 |
|
}; |
|
var width = 1000, |
|
height = 1500; |
|
|
|
//SVG container |
|
var svg = d3.select('#chart') |
|
.append("svg") |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height + margin.top + margin.bottom) |
|
.append("g") |
|
.attr("transform", "translate(" + (margin.left + width/2) + "," + (margin.top + height/2) + ")"); |
|
|
|
/////////////////////////////////////////////////////////////////////////// |
|
///////////////////////////// Create filter /////////////////////////////// |
|
/////////////////////////////////////////////////////////////////////////// |
|
|
|
//SVG filter for the gooey effect |
|
//Code taken from http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/ |
|
var defs = svg.append("defs"); |
|
var filter = defs.append("filter").attr("id","gooeyCodeFilter"); |
|
filter.append("feGaussianBlur") |
|
.attr("in","SourceGraphic") |
|
.attr("stdDeviation","10") |
|
//to fix safari: http://stackoverflow.com/questions/24295043/svg-gaussian-blur-in-safari-unexpectedly-lightens-image |
|
.attr("color-interpolation-filters","sRGB") |
|
.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 19 -9") |
|
.attr("result","gooey"); |
|
|
|
/////////////////////////////////////////////////////////////////////////// |
|
/////////////////////////// Create circles //////////////////////////////// |
|
/////////////////////////////////////////////////////////////////////////// |
|
|
|
//Create scale |
|
var xScale = d3.scale.linear() |
|
.domain([0, 100]) |
|
.range([-width/2, width/2]); |
|
|
|
//Create a wrapper for the circles that has the Gooey effect applied to it |
|
var circleWrapper = svg.append("g") |
|
.style("filter", "url(#gooeyCodeFilter)"); |
|
|
|
//Create the circles that will move out and in the center circle |
|
var steps = 300; |
|
//var colors = d3.scale.category20(); |
|
//var colors = ["#F95B34", "#EE3E64", "#F36283", "#FF9C34", "#EBDE52", "#B7D84B", "#44ACCF"]; |
|
var colors = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd'] |
|
var flyCircleData = []; |
|
for (var i = 0; i < steps; i++) { |
|
flyCircleData.push({ |
|
fixedAngle: i, |
|
randomAngle: i, |
|
speed: Math.random() * 7000 + 10000, |
|
r: Math.floor(Math.random() * 30 + 35), |
|
color: colors[i%colors.length], |
|
}) |
|
}//for i |
|
|
|
//Set up the circles |
|
var flyCircles = circleWrapper.selectAll(".flyCircle") |
|
.data(flyCircleData) |
|
.enter().append("circle") |
|
.attr("class", "flyCircle") |
|
.style("fill", function(d) { return d.color; }) |
|
.attr("cx", function(d){return (Math.random()*1000) -500}) |
|
.attr("cy", function(d){return ( Math.random()*1500) -750}) |
|
.attr("r", function(d) { return d.r; }) |
|
.attr("opacity", .5) |
|
.transition().duration(0)//.delay(function(d,i) { return i*50; }) |
|
.each("end", goRound); |
|
|
|
//Continuously moves the circles with different speeds |
|
function goRound(d) { |
|
d3.select(this) |
|
.transition().duration(function(d) { return d.speed; }) |
|
.ease("linear") |
|
.attrTween("transform", function() { return d3.interpolateString("translate(0,0)", "translate(0,550)"); }) |
|
.each("end", goRound); |
|
}//function goRound |
|
|
|
</script> |
|
|
|
</body> |
|
</html> |