Waves by pstuffa

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>