index.html
<!DOCTYPE html>
<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>
!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>