pstuffa/index.html

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

.waves {

  color: blue;

}


</style>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<body>

<script>

var width = 960,
    height = 500,
    rows = 60,
    columns = 10;

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


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)
  }
}

function makeOppOppWaves(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)

var waveOppOppSet = [];
makeOppOppWaves(waveOppOppSet)

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


function waveBackward() {

  svg.selectAll(".waves")
    .data(waveSet)
    .transition()
    .duration(1000)
    .delay(function(d,i) { return i * 30; })
    .ease("linear")
    .attr("class","waves")
    .attr("y", function(d,i) { return i * 11; })
    .attr("x", 10)
    .text(function(d,i) { return d;  })
    .each("end", function() { d3.select(this).call(waveForward); });

}

function startWave() {

  svg.selectAll(".waves")
    .data(waveOppSet)
    .transition()
    .duration(500)
    .delay(function(d,i) { return i * 30; })
    .ease("linear")
    .attr("class","waves")
    .attr("y", function(d,i) { return i * 11; })
    .attr("x", 10)
    .text(function(d,i) { return d;  })
    .each("end", function() { d3.select(this).call(waveBackward); });

}


function waveForward() {

  svg.selectAll(".waves")
    .data(waveOppOppSet)
    .transition()
    .duration(500)
    .delay(function(d,i) { return i * 30; })
    .ease("linear")
    .attr("class","waves")
    .attr("y", function(d,i) { return i * 11; })
    .attr("x", 10)
    .text(function(d,i) { return d;  })
    .each("end", function() { d3.select(this).call(waveBackward); });

}


function hover(d) {
    d3.select(this)
    .transition()
    .ease("linear")
    .style("color","red");

      }

function hoverOut(d) {
    d3.select(this)
    .transition()
    .ease("elastic")
    .delay(300)
    .duration(2000)
    .ease("linear")
    .style("color","black")

      }

  d3.selectAll("text")
      .on("mouseover", hover)
      .on("mouseout", hoverOut);


</script>

## thumbnail.png

      
    Raw
  

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

	.waves {

	color: blue;

	}


	</style>

	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<body>

	<script>

	var width = 960,
	height = 500,
	rows = 60,
	columns = 10;

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


	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)
	}
	}

	function makeOppOppWaves(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)

	var waveOppOppSet = [];
	makeOppOppWaves(waveOppOppSet)

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


	function waveBackward() {

	svg.selectAll(".waves")
	.data(waveSet)
	.transition()
	.duration(1000)
	.delay(function(d,i) { return i * 30; })
	.ease("linear")
	.attr("class","waves")
	.attr("y", function(d,i) { return i * 11; })
	.attr("x", 10)
	.text(function(d,i) { return d; })
	.each("end", function() { d3.select(this).call(waveForward); });

	}

	function startWave() {

	svg.selectAll(".waves")
	.data(waveOppSet)
	.transition()
	.duration(500)
	.delay(function(d,i) { return i * 30; })
	.ease("linear")
	.attr("class","waves")
	.attr("y", function(d,i) { return i * 11; })
	.attr("x", 10)
	.text(function(d,i) { return d; })
	.each("end", function() { d3.select(this).call(waveBackward); });

	}


	function waveForward() {

	svg.selectAll(".waves")
	.data(waveOppOppSet)
	.transition()
	.duration(500)
	.delay(function(d,i) { return i * 30; })
	.ease("linear")
	.attr("class","waves")
	.attr("y", function(d,i) { return i * 11; })
	.attr("x", 10)
	.text(function(d,i) { return d; })
	.each("end", function() { d3.select(this).call(waveBackward); });

	}


	function hover(d) {
	d3.select(this)
	.transition()
	.ease("linear")
	.style("color","red");

	}

	function hoverOut(d) {
	d3.select(this)
	.transition()
	.ease("elastic")
	.delay(300)
	.duration(2000)
	.ease("linear")
	.style("color","black")

	}

	d3.selectAll("text")
	.on("mouseover", hover)
	.on("mouseout", hoverOut);


	</script>