shiftyp/fireflies.js

## fireflies.js
var FireFlies = function(el, bounds, transitionDuration) {
  this.el = d3.select(el);
  this.bounds = bounds;
  this.transitionDuration = transitionDuration;

  this.el.classed('fire-flies', true);
}

FireFlies.prototype.generateScales = function() {
  var xScale = d3.scale.linear();
  var yScale = d3.scale.linear();
  var zScale = d3.scale.linear();
  var rect = this.el.node().getBoundingClientRect();

  xScale
    .domain(this.bounds.x)
    .range([10, rect.width - 10]);
  yScale
    .domain(this.bounds.y)
    .range([rect.height - 10, 10]);
  zScale
    .domain(this.bounds.z)
    .range([3, 10]);

  return {
    x: xScale,
    y: yScale,
    z: zScale
  };
};

FireFlies.prototype.render = function() {
  var scales = this.scales;
  var groups = ['group-0', 'group-1', 'group-2'];

  var setLeft = (function(d) {
    return this.scales.x(d.x) + 'px';
  }).bind(this);
  var setTop = (function(d) {
    return this.scales.y(d.y) + 'px';
  }).bind(this);
  var setSize = (function(d) {
    return this.scales.z(d.z) + 'px';
  }).bind(this);

  var nodes = this.el.selectAll('.fire-fly')
    .data(this.data, function(d, i) { return i; });

  nodes
    .style('opacity', 1)
    .transition()
      .ease('sin')
      .duration(this.transitionDuration)
      .style('left', setLeft)
      .style('top', setTop)
      .style('height', setSize)
      .style('width', setSize);

  nodes.enter()
    .append('div')
      .attr('class', function() {
        return [
          groups[Math.floor(Math.random() * groups.length)],
          'fire-fly'
        ].join(' ');
      }, true)
      .style('left', setLeft)
      .style('top', setTop)
      .style('height', setSize)
      .style('width', setSize)
      .style('opacity', 0)
    .transition()
      .duration(this.transitionDuration)
      .style('opacity', 1);

  nodes.exit()
    .transition()
      .duration(this.transitionDuration)
      .style('opacity', 0)
      .remove();
};

Object.defineProperties(FireFlies.prototype, {
  data: {
    set: function(data) {
      this._data = data;

      this.scales = this.generateScales();
      this.render();
    },

    get: function() {
      return this._data;
    }
  }
});

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>D3 example</title>
  <link href="./style.css" rel="stylesheet">
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" type="text/javascript"></script>
  <script src="./fireflies.js" type="text/javascript"></script>
</head>
<body>
  <div id="visualization-container"></div>
  <script src="./index.js" type="text/javascript"></script>
</body>
</html>

## index.js
!function() {
  var transitionDuration = 4000;

  var dataBounds = {
    x: [0, 1000],
    y: [0, 1000],
    z: [0, 3]
  };

  var bugCount = 250;

  var fireFlies = new FireFlies('#visualization-container', dataBounds, transitionDuration);

  function generateData() {
    var ret = [];
    var count = Math.round(bugCount * Math.random())

    for (var i = 0; i < count; i++) {
      ret.push({
        x: Math.random() * dataBounds.x[1],
        y: Math.random() * dataBounds.y[1],
        z: Math.random() * dataBounds.z[1]
      });
    }

    return ret;
  }

  function updateFireFlies() {
    fireFlies.data = generateData();
  }

  setInterval(updateFireFlies, transitionDuration);
  updateFireFlies();
  updateFireFlies();
}();

## style.css
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.fire-flies {
  position: relative;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(78%,#1e5799), color-stop(94%,#fb9f51), color-stop(94%,#fb9f51), color-stop(94%,#fb9f51), color-stop(95%,#050000));
}

@-webkit-keyframes blink {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}

.fire-fly {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #ffff00;
  -webkit-filter: blur(1px);
  -webkit-animation-name: blink;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}

.fire-fly.group-0 {
  -webkit-animation-delay: 0.5s;
}

.fire-fly.group-1 {
  -webkit-anmiation-delay: 1s;
}

.fire-fly.group-2 {
  -webkit-anmiation-delay: 1.5s;
}
	var FireFlies = function(el, bounds, transitionDuration) {
	this.el = d3.select(el);
	this.bounds = bounds;
	this.transitionDuration = transitionDuration;

	this.el.classed('fire-flies', true);
	}

	FireFlies.prototype.generateScales = function() {
	var xScale = d3.scale.linear();
	var yScale = d3.scale.linear();
	var zScale = d3.scale.linear();
	var rect = this.el.node().getBoundingClientRect();

	xScale
	.domain(this.bounds.x)
	.range([10, rect.width - 10]);
	yScale
	.domain(this.bounds.y)
	.range([rect.height - 10, 10]);
	zScale
	.domain(this.bounds.z)
	.range([3, 10]);

	return {
	x: xScale,
	y: yScale,
	z: zScale
	};
	};

	FireFlies.prototype.render = function() {
	var scales = this.scales;
	var groups = ['group-0', 'group-1', 'group-2'];

	var setLeft = (function(d) {
	return this.scales.x(d.x) + 'px';
	}).bind(this);
	var setTop = (function(d) {
	return this.scales.y(d.y) + 'px';
	}).bind(this);
	var setSize = (function(d) {
	return this.scales.z(d.z) + 'px';
	}).bind(this);

	var nodes = this.el.selectAll('.fire-fly')
	.data(this.data, function(d, i) { return i; });

	nodes
	.style('opacity', 1)
	.transition()
	.ease('sin')
	.duration(this.transitionDuration)
	.style('left', setLeft)
	.style('top', setTop)
	.style('height', setSize)
	.style('width', setSize);

	nodes.enter()
	.append('div')
	.attr('class', function() {
	return [
	groups[Math.floor(Math.random() * groups.length)],
	'fire-fly'
	].join(' ');
	}, true)
	.style('left', setLeft)
	.style('top', setTop)
	.style('height', setSize)
	.style('width', setSize)
	.style('opacity', 0)
	.transition()
	.duration(this.transitionDuration)
	.style('opacity', 1);

	nodes.exit()
	.transition()
	.duration(this.transitionDuration)
	.style('opacity', 0)
	.remove();
	};

	Object.defineProperties(FireFlies.prototype, {
	data: {
	set: function(data) {
	this._data = data;

	this.scales = this.generateScales();
	this.render();
	},

	get: function() {
	return this._data;
	}
	}
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>D3 example</title>
	<link href="./style.css" rel="stylesheet">
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" type="text/javascript"></script>
	<script src="./fireflies.js" type="text/javascript"></script>
	</head>
	<body>
	<div id="visualization-container"></div>
	<script src="./index.js" type="text/javascript"></script>
	</body>
	</html>
	!function() {
	var transitionDuration = 4000;

	var dataBounds = {
	x: [0, 1000],
	y: [0, 1000],
	z: [0, 3]
	};

	var bugCount = 250;

	var fireFlies = new FireFlies('#visualization-container', dataBounds, transitionDuration);

	function generateData() {
	var ret = [];
	var count = Math.round(bugCount * Math.random())

	for (var i = 0; i < count; i++) {
	ret.push({
	x: Math.random() * dataBounds.x[1],
	y: Math.random() * dataBounds.y[1],
	z: Math.random() * dataBounds.z[1]
	});
	}

	return ret;
	}

	function updateFireFlies() {
	fireFlies.data = generateData();
	}

	setInterval(updateFireFlies, transitionDuration);
	updateFireFlies();
	updateFireFlies();
	}();
	body, html {
	height: 100%;
	margin: 0;
	padding: 0;
	}

	.fire-flies {
	position: relative;
	height: 100%;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(78%,#1e5799), color-stop(94%,#fb9f51), color-stop(94%,#fb9f51), color-stop(94%,#fb9f51), color-stop(95%,#050000));
	}

	@-webkit-keyframes blink {
	0% {opacity: 1;}
	50% {opacity: 0;}
	100% {opacity: 1;}
	}

	.fire-fly {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #ffff00;
	-webkit-filter: blur(1px);
	-webkit-animation-name: blink;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	}

	.fire-fly.group-0 {
	-webkit-animation-delay: 0.5s;
	}

	.fire-fly.group-1 {
	-webkit-anmiation-delay: 1s;
	}

	.fire-fly.group-2 {
	-webkit-anmiation-delay: 1.5s;
	}