Fun with Squids by Rnhatch

index.html

<!DOCTYPE html>
<html>
  <head>
	<!--<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="expires" content="0" />-->
	<title>A Skool of Bouncing Skuid</title>
	<script type="text/javascript" src="array.js"></script>
	<script type="text/javascript" src="string.js"></script>
	<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<link type="text/css" rel="stylesheet" href="reset.css" media="all"></link>
	<link type="text/css" rel="stylesheet" href="grid960.css" media="all"></link>
	<style type="text/css">
		body {
			background-color: white;
			vertical-align:text-top;
			text-align:center
		}
	</style>
	<script type="text/javascript">
	


	</script>

</head>
  <body>

		<script type="text/javascript">
		
			var 	h = 1500,
			//  	x = d3.scale.linear().domain([0,1]).range([window.innerWidth / 2 - 400, window.innerWidth / 2 + 400]),
			  	x = d3.scale.linear().domain([0,1]).range([50, window.innerWidth - 50]),
			  	y = d3.scale.linear().domain([0,1]).range([50, window.innerHeight - 50]),
    			 //       y = d3.scale.linear().domain([0,1]).range([0,h]),
				y2 = d3.scale.linear().domain([0,1]).range([h/2 - 500, h/2 + 300]),				
				r = d3.scale.linear().domain([0,1]).range([25,200]),
				c = d3.scale.linear().domain([0,1]).range(["hsl(200, 50%, 50%)", "hsl(330, 100%, 50%)"]).interpolate(d3.interpolateHsl),
				num = window.innerHeight/4
			
			var data = []
			for (i=0; i < num; i++) {
				data.push({"x": Math.random(), "y": Math.random()})
			}
						
			var vis = d3.select("body")
				.append("svg:svg")
				.attr("class", "vis")
				.attr("width", window.innerWidth)
				.attr("height", window.innerHeight)

		//	  <circle id='top' cx="180" cy="120" r="80" fill="url(#image)"/>

			//image example	
			vis.selectAll("image")
				.data(data)
			  .enter().append("image")
			    .attr("xlink:href", "https://www.skuid.com/wp-content/themes/skuid/images/favicon/full/apple-icon-180x180.png")
		 	    .attr("width", function() { return r(Math.random()) })
    			    .attr("x", function(d) { return x(d.x) })
			    .attr("y", function(d) { return y(d.y) })
			    .attr("opacity", function(d) { return y(d.y)/1000 } )
			//    .attr("background-color", function() { return c(Math.random()) })

	            	    .style('background-color', function() { return c(Math.random()) })
			
   			    .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; })
			    .attr("visibility", "hidden")
			    .attr("r", function() { return r(Math.random()) })
			    .on("mouseover", function() {
					d3.select(this).transition()
						.attr("x", function() { return x(Math.random()) })
						.attr("y", function() { return x(Math.random()) })
						.delay(0)
						.duration(2000)
					//  	.ease("quad")
						.ease("elastic", 1.15, .2);
				})			
						
			
			//inital load of shapes to space  
			d3.selectAll("image").transition()
				.attr("x", function() { return x(Math.random()) })
				.attr("y", function() { return y2(Math.random()) })
				.attr("visibility", "visible")
				.delay(function(d,i) { return i * Math.random() })
				.duration(10000)
				.ease("elastic", 1.15, .2);
			

			
		</script>
  </body>
</html>