D3.js - Flying Circles

Just a bunch of SVG circles, floating around...

by Steven Senkus

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<svg width="400" height="400"></svg>

CSS

html {
    overflow: hidden;
}
body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: auto;
    position: relative;
    text-align: center;
   
    overflow: hidden;
    background-image: linear-gradient(45deg, #000 50%, #f00 100%);
}
svg {
    border: 0px solid rgba(0, 0, 0, 0.5);
    margin: 20px auto;
    background-color: rgba(0, 0, 0, 0.4)!important;
    box-shadow: inset 0px 0px 100px 2px #05a, 0px 0px 10px #ff0;
   
}
circle {
    border-radius: 10%;
    pointer-events: all;
    transition 2s all linear;
}
circle:hover {
    fill: #ff0;
    opacity: 1;
}

JavaScript

var color = d3.scale.category20();
var color2 = d3.scale.category20c();
var dataset = [];
for (var i = 0; i < 200; i++) {
    dataset.push(Math.random() * i * 30);
}

console.log(dataset)

function squares() {
    d3.select('svg')
        .selectAll("circle")
        .data(dataset.reverse())
        .enter()
        .append("circle")
        .attr("cx", function (d) {
        return (Math.random() * 800);
    })
        .attr("cy", function (d) {
        return (Math.random() * 800);
    })
        .attr("r", function (d) {
        return d / 200;
    })

        .attr("fill", function (d, i) {
        return color(i);
    })
        .style('opacity', 0.1)
        .transition()
        .duration(function (d) {
        return ((Math.random() * 30) * 500) + 200
    })
        .style('transform', 'scale(0.5,0.5)')
        .style('opacity', 0.5)
        .transition()
        .duration(function (d) {
        return ((Math.random() * 30) * 500) + 200
    })
        .attr("cx", function (d) {
        return (Math.random() * 700);
    })
        .attr("cy", function (d) {
        return (Math.random() * 500);
    })
        .attr("fill", function (d, i) {
        return color2(Math.random() * i);
    })
        .style('opacity', 0.9)
        .style('transform', 'scale(2.0,2.0)');

}

function swapSVGLayers(cb) {

    var rndEl, timer;
    timer = setInterval(function () {
        var rects = document.getElementsByTagName('circle');
        rndEl = (Math.floor(Math.random() * rects.length));
        if (rects.length === 100) {
            squares();
        }
        document.getElementsByTagName('svg')[0].removeChild(document.getElementsByTagName('circle')[rndEl]);
        //	cb();
    }, 100);
    return;
}



squares();
swapSVGLayers(squares);