D3.js - Flying Blocks

Just a bunch of blocks, floating around...

by Gabriel Z

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<svg width="400" height="400" style="background-color: #fff;"></svg>

CSS

body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: auto;
    position: relative;
    text-align: center;
    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;
    border-radius:400px;
}
rect {
    display: block box-shadow: 2px 2px 2px #f00!important;
    border-radius: 10%;
    pointer-events: all;
    filter: grayscale(1)!important;
}
rect:hover {
    fill: #ff0;
    opacity: 1;
}

JavaScript

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

		console.log(dataset)

		function squares() {
		    d3.select('svg')
		        .selectAll("rect")
		        .data(dataset.reverse())
		        .enter()
		        .append("rect")
		        .attr("x", function (d) {
		        return (Math.random() * 800);
		    })
		        .attr("y", function (d) {
		        return (Math.random() * 800);
		    })
		        .attr("width", function (d) {
		        return d / 100;
		    })
		        .attr("height", function (d) {
		        return d / 100;
		    })
		        .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', 1)
		        .transition()
		        .duration(function (d) {
		        return ((Math.random() * 30) * 500) + 200
		    })
		        .attr("x", function (d) {
		        return (Math.random() * 700);
		    })
		        .attr("y", function (d) {
		        return (Math.random() * 500);
		    })
		        .attr("fill", function (d, i) {
		        return color2(Math.random() * i);
		    })
		        .style('opacity', 0.75)
		        .style('transform', 'scale(2.0,2.0)');
            
            /* ********A message */
            
            
            
		    d3.select('svg')
                .selectAll("text")
                .data(['hey there'])
                .enter()
                .append('text')
                .style('font-size', '50px')
                .attr('x', 100)
                .attr('y', 200)
                .attr('fill', '#fff')
            .attr('filter', 'brightness(5%)')
            .style('text-shadow','2px 2px 2px #f00')
                .text(function (d) {
		            return...