pstuffa/index.html

## index.html
<!DOCTYPE html>
<!-- Paul Buffa 2015
  -->
<meta charset="utf-8">
<style>

  .waves {
    font: 14px sans-serif;
    font-weight: bolder;
  }

</style>
<body>

  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
  /* https://github.com/d3/d3-timer Copyright 2015 Mike Bostock */
  !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define("d3-timer",["exports"],e):e(t.d3_timer={})}(this,function(t){"use strict";function e(t,e,n){this.id=++c,this.restart(t,e,n)}function n(t,n,i){return new e(t,n,i)}function i(t){t=null==t?Date.now():+t,++l;try{for(var e,n=a;n;)t>=n.time&&(e=n.callback)(t-n.time,t),n=n.next}finally{--l}}function o(){l=f=0;try{i()}finally{for(var t,e=a,n=1/0;e;)e.callback?(n>e.time&&(n=e.time),e=(t=e).next):e=t?t.next=e.next:a=e.next;u=t,r(n)}}function r(t){if(!l){f&&(f=clearTimeout(f));var e=t-Date.now();e>24?1/0>t&&(f=setTimeout(o,e)):(l=1,s(o))}}var a,u,l=0,f=0,c=0,m={},s="undefined"!=typeof window&&(window.requestAnimationFrame||window.msRequestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame)||function(t){return setTimeout(t,17)};e.prototype=n.prototype={restart:function(t,e,n){if("function"!=typeof t)throw new TypeError("callback is not a function");n=(null==n?Date.now():+n)+(null==e?0:+e);var i=this.id,o=m[i];o?(o.callback=t,o.time=n):(o={next:null,callback:t,time:n},u?u.next=o:a=o,m[i]=u=o),r()},stop:function(){var t=this.id,e=m[t];e&&(e.callback=null,e.time=1/0,delete m[t],r())}};var d="0.0.6";t.version=d,t.timer=n,t.timerFlush=i});

  var width = 960,
      height = 500,
      rows = 40,
      columns = 9;

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

  var colorScale = d3.scale.category10();

  function makeWaves(someList) {
    for (var i = 0; i < rows; i++) {
      if(i % 2 == 0) {  wave = '/' }
      else { wave = '|' }
        for (var j = 0; j < columns; j++) {
          wave += wave
        }
        someList.push(wave)
      }
    }

  function makeOppWaves(someList) {
    for (var i = 0; i < rows; i++) {
      if(i % 2 == 0) {  wave = '\\' }
      else { wave = '/' }
        for (var j = 0; j < columns; j++) {
          wave += wave
        }
        someList.push(wave)
      }
    }

  var waveSet = [];
  makeWaves(waveSet)

  var waveOppSet = [];
  makeOppWaves(waveOppSet)

  svg.selectAll(".waves")
    .data(waveSet)
    .enter().append("text")
    .attr("class","waves")
    .attr("y", function(d,i) { return i * 10; })
    .attr("x", 10)
    .text(function(d,i) { return d;  });

  d3_timer.timer(function(elapsed) {

    var t = Math.round((elapsed/10),200);

    if(t % 2 == 0) { var data = waveOppSet; }
              else { var data = waveSet; }

    svg.selectAll(".waves")
     .data(data)
      .transition()
      .duration(1000)
      .delay(function(d,i) { return i * 30; })
      .ease("linear")
      .attr("class","waves")
      .text(function(d,i) { return d; })
      .style("fill",function(d,i) { return colorScale(i) })
      .attr("transform",function(d,i) {  return "rotate(" + Math.round((i/15),200)*t + ")" });

    });


</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<!-- Paul Buffa 2015
	-->
	<meta charset="utf-8">
	<style>

	.waves {
	font: 14px sans-serif;
	font-weight: bolder;
	}

	</style>
	<body>

	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>
	/* https://github.com/d3/d3-timer Copyright 2015 Mike Bostock */
	!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define("d3-timer",["exports"],e):e(t.d3_timer={})}(this,function(t){"use strict";function e(t,e,n){this.id=++c,this.restart(t,e,n)}function n(t,n,i){return new e(t,n,i)}function i(t){t=null==t?Date.now():+t,++l;try{for(var e,n=a;n;)t>=n.time&&(e=n.callback)(t-n.time,t),n=n.next}finally{--l}}function o(){l=f=0;try{i()}finally{for(var t,e=a,n=1/0;e;)e.callback?(n>e.time&&(n=e.time),e=(t=e).next):e=t?t.next=e.next:a=e.next;u=t,r(n)}}function r(t){if(!l){f&&(f=clearTimeout(f));var e=t-Date.now();e>24?1/0>t&&(f=setTimeout(o,e)):(l=1,s(o))}}var a,u,l=0,f=0,c=0,m={},s="undefined"!=typeof window&&(window.requestAnimationFrame\|\|window.msRequestAnimationFrame\|\|window.mozRequestAnimationFrame\|\|window.webkitRequestAnimationFrame\|\|window.oRequestAnimationFrame)\|\|function(t){return setTimeout(t,17)};e.prototype=n.prototype={restart:function(t,e,n){if("function"!=typeof t)throw new TypeError("callback is not a function");n=(null==n?Date.now():+n)+(null==e?0:+e);var i=this.id,o=m[i];o?(o.callback=t,o.time=n):(o={next:null,callback:t,time:n},u?u.next=o:a=o,m[i]=u=o),r()},stop:function(){var t=this.id,e=m[t];e&&(e.callback=null,e.time=1/0,delete m[t],r())}};var d="0.0.6";t.version=d,t.timer=n,t.timerFlush=i});

	var width = 960,
	height = 500,
	rows = 40,
	columns = 9;

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

	var colorScale = d3.scale.category10();

	function makeWaves(someList) {
	for (var i = 0; i < rows; i++) {
	if(i % 2 == 0) { wave = '/' }
	else { wave = '\|' }
	for (var j = 0; j < columns; j++) {
	wave += wave
	}
	someList.push(wave)
	}
	}

	function makeOppWaves(someList) {
	for (var i = 0; i < rows; i++) {
	if(i % 2 == 0) { wave = '\\' }
	else { wave = '/' }
	for (var j = 0; j < columns; j++) {
	wave += wave
	}
	someList.push(wave)
	}
	}

	var waveSet = [];
	makeWaves(waveSet)

	var waveOppSet = [];
	makeOppWaves(waveOppSet)

	svg.selectAll(".waves")
	.data(waveSet)
	.enter().append("text")
	.attr("class","waves")
	.attr("y", function(d,i) { return i * 10; })
	.attr("x", 10)
	.text(function(d,i) { return d; });

	d3_timer.timer(function(elapsed) {

	var t = Math.round((elapsed/10),200);

	if(t % 2 == 0) { var data = waveOppSet; }
	else { var data = waveSet; }

	svg.selectAll(".waves")
	.data(data)
	.transition()
	.duration(1000)
	.delay(function(d,i) { return i * 30; })
	.ease("linear")
	.attr("class","waves")
	.text(function(d,i) { return d; })
	.style("fill",function(d,i) { return colorScale(i) })
	.attr("transform",function(d,i) { return "rotate(" + Math.round((i/15),200)*t + ")" });

	});


	</script>