alicial/index.html

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.min.js" charset="utf-8"></script>

  <style>
    body > canvas, body > svg {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
<img id="main-pic" src="https://alicial-cors.s3.amazonaws.com/iceland-cover.jpg" crossOrigin="anonymous" style="display: none;">
<canvas id="main-canvas" width="1160" height="584"></canvas>

<script>
  var context=document.getElementById("main-canvas").getContext("2d");
  var img=document.getElementById("main-pic");

  img.onload = function() {
    setup();
  };

  function setup() {
    context.drawImage(img,0,0);

    var width = img.width,
        height = img.height;

    var rawData = context.getImageData(0, 0, width, height).data;

    var svg = d3.select("body").append("svg:svg")
        .attr("width", width)
        .attr("height", height);

    svg.on("mousemove", function() {
      var m = d3.mouse(this);

      var p = ((width * m[1]) + m[0]) * 4;
      var color = d3.rgb(rawData[p], rawData[p + 1], rawData[p + 2]);

      svg.append("svg:circle")
          .attr("r", random(5, 20))
          .attr("cx", m[0])
          .attr("cy", m[1])
          .style("fill", color)
          .transition()
          .duration(random(200, 4000))
          .ease("exp out")
          .attr("cx", m[0] + random(-width/4, width/4))
          .attr("cy", m[1] + random(-height/4, height/4))
          .style("fill-opacity", 1e-6)
          .remove();
    });
  }

  function random(min, max) {
    var rand = Math.random() * (max - min) + min;
    return Math.floor(rand);
  }
</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.min.js" charset="utf-8"></script>

	<style>
	body > canvas, body > svg {
	position: absolute;
	top: 0;
	left: 0;
	}
	</style>
	</head>
	<body>
	<img id="main-pic" src="https://alicial-cors.s3.amazonaws.com/iceland-cover.jpg" crossOrigin="anonymous" style="display: none;">
	<canvas id="main-canvas" width="1160" height="584"></canvas>

	<script>
	var context=document.getElementById("main-canvas").getContext("2d");
	var img=document.getElementById("main-pic");

	img.onload = function() {
	setup();
	};

	function setup() {
	context.drawImage(img,0,0);

	var width = img.width,
	height = img.height;

	var rawData = context.getImageData(0, 0, width, height).data;

	var svg = d3.select("body").append("svg:svg")
	.attr("width", width)
	.attr("height", height);

	svg.on("mousemove", function() {
	var m = d3.mouse(this);

	var p = ((width * m[1]) + m[0]) * 4;
	var color = d3.rgb(rawData[p], rawData[p + 1], rawData[p + 2]);

	svg.append("svg:circle")
	.attr("r", random(5, 20))
	.attr("cx", m[0])
	.attr("cy", m[1])
	.style("fill", color)
	.transition()
	.duration(random(200, 4000))
	.ease("exp out")
	.attr("cx", m[0] + random(-width/4, width/4))
	.attr("cy", m[1] + random(-height/4, height/4))
	.style("fill-opacity", 1e-6)
	.remove();
	});
	}

	function random(min, max) {
	var rand = Math.random() * (max - min) + min;
	return Math.floor(rand);
	}
	</script>
	</body>
	</html>