VijayKrishna/index.html

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

.chart rect {
  stroke: white;
  fill: steelblue;
}

.paddle rect {
  stroke: white;
  fill: red;
}

</style>
<title>type 2</title>
<div>
  <h3>Hit keys from a to z</h3>
  <button type="button" onclick="blink()" title="click to fire all letters.use for testing the animation.">Everyone!</button>
</div>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var keysDown = [];

var addKey = function(event) {
    "use strict";
    var key = event.keyCode;
    if(keysDown.indexOf(key) == -1){ //If the key is not already in the array
      keysDown.push(key); // Add the key to the array
    }

};

var removeKey = function(event) {
    "use strict";
    var key = event.keyCode;
    keysDown.splice(keysDown.indexOf(key),1);
};

var loop = function () {
    "use strict";
    // console.log("loop");
    if ( keysDown.length === 0 ) {
      return;
    }
    var event = keysDown.splice(0, 1);
    hitKey(event);
}

var width = "100%",
    height = 520;

var data = [];

for ( var i = 0; i <= 25; i += 1) {
  data[i] = 5;
}

var color = d3.scale.category20();

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

chart.selectAll("text")
    .data(data)
    .enter()
    .append("text")
    .attr("y", 45)
    .attr("x", function(d, i) { return (i * 20) + 5; })
    .text(function(d, i) { "use strict"; return String.fromCharCode(65 + i); });

chart.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("class", "chart")
    .attr("y", 50)
    .attr("x", function(d, i) { return i * 20; })
    .attr("height", function(d, i) { "use strict"; return data[i]; })
    .attr("width", 20);

chart.append("rect")
    .attr("class", "paddle")
    .attr("y", 20)
    .attr("x", 26*20)
    .attr("height", 5)
    .attr("width", 20);

var hitKey = function (char) {
    "use strict";
    // console.log(char);
    d3.selectAll("rect")
      .transition()
      .duration(100)
      .attr("height", function (d, i) {
          // console.log(d);
          if ( ascii2num(char) === i ) { data[i] = 200; }
          else { data[i] = 5; }
          return data[i];
      })
      .style("fill", function (d, i) {
          var color = "";
          if ( ascii2num(char) === i ) { color = "red"; }
          else { color = "steelblue"; }
          return color;
      })
      .transition()
      .delay(100)
      .attr("height", 5)
      .style("fill", "steelblue")
      ;
    d3.selectAll("rect")
      .filter(".paddle")
      .transition()
      .duration(100)
      .attr("x", function () {
          if ((ascii2num(char) <= 25 && ascii2num(char) >= 0) ) {
            return ascii2num(char) * 20;
          }
          return 26 * 20;
      });
};

var ascii2num = function (char) {
    return char[0] - 65;
}


var blink = function () {
    "use strict";
    d3.selectAll("rect")
      .filter(".chart")
      .transition()
      .duration(100)
      .attr("height", 200)
      .style("fill", "red")
      .transition()
      .delay(100)
      .attr("height", 5)
      .style("fill", "steelblue")
      ;
    d3.selectAll("rect")
      .filter(".paddle")
      .transition()
      .duration(100)
      .attr("x", 26 * 20 )
};

var clamp = function(num) {
    "use strict";
    if(num <= 2) return 2;
    if(num >= width) return width;
    return num;
}

window.addEventListener('keydown',addKey);
window.addEventListener('keyup',removeKey);

loopID = setInterval(loop, 1500/30);

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.chart rect {
	stroke: white;
	fill: steelblue;
	}

	.paddle rect {
	stroke: white;
	fill: red;
	}

	</style>
	<title>type 2</title>
	<div>
	<h3>Hit keys from a to z</h3>
	<button type="button" onclick="blink()" title="click to fire all letters.use for testing the animation.">Everyone!</button>
	</div>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var keysDown = [];

	var addKey = function(event) {
	"use strict";
	var key = event.keyCode;
	if(keysDown.indexOf(key) == -1){ //If the key is not already in the array
	keysDown.push(key); // Add the key to the array
	}

	};

	var removeKey = function(event) {
	"use strict";
	var key = event.keyCode;
	keysDown.splice(keysDown.indexOf(key),1);
	};

	var loop = function () {
	"use strict";
	// console.log("loop");
	if ( keysDown.length === 0 ) {
	return;
	}
	var event = keysDown.splice(0, 1);
	hitKey(event);
	}

	var width = "100%",
	height = 520;

	var data = [];

	for ( var i = 0; i <= 25; i += 1) {
	data[i] = 5;
	}

	var color = d3.scale.category20();

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

	chart.selectAll("text")
	.data(data)
	.enter()
	.append("text")
	.attr("y", 45)
	.attr("x", function(d, i) { return (i * 20) + 5; })
	.text(function(d, i) { "use strict"; return String.fromCharCode(65 + i); });

	chart.selectAll("rect")
	.data(data)
	.enter().append("rect")
	.attr("class", "chart")
	.attr("y", 50)
	.attr("x", function(d, i) { return i * 20; })
	.attr("height", function(d, i) { "use strict"; return data[i]; })
	.attr("width", 20);

	chart.append("rect")
	.attr("class", "paddle")
	.attr("y", 20)
	.attr("x", 26*20)
	.attr("height", 5)
	.attr("width", 20);

	var hitKey = function (char) {
	"use strict";
	// console.log(char);
	d3.selectAll("rect")
	.transition()
	.duration(100)
	.attr("height", function (d, i) {
	// console.log(d);
	if ( ascii2num(char) === i ) { data[i] = 200; }
	else { data[i] = 5; }
	return data[i];
	})
	.style("fill", function (d, i) {
	var color = "";
	if ( ascii2num(char) === i ) { color = "red"; }
	else { color = "steelblue"; }
	return color;
	})
	.transition()
	.delay(100)
	.attr("height", 5)
	.style("fill", "steelblue")
	;
	d3.selectAll("rect")
	.filter(".paddle")
	.transition()
	.duration(100)
	.attr("x", function () {
	if ((ascii2num(char) <= 25 && ascii2num(char) >= 0) ) {
	return ascii2num(char) * 20;
	}
	return 26 * 20;
	});
	};

	var ascii2num = function (char) {
	return char[0] - 65;
	}


	var blink = function () {
	"use strict";
	d3.selectAll("rect")
	.filter(".chart")
	.transition()
	.duration(100)
	.attr("height", 200)
	.style("fill", "red")
	.transition()
	.delay(100)
	.attr("height", 5)
	.style("fill", "steelblue")
	;
	d3.selectAll("rect")
	.filter(".paddle")
	.transition()
	.duration(100)
	.attr("x", 26 * 20 )
	};

	var clamp = function(num) {
	"use strict";
	if(num <= 2) return 2;
	if(num >= width) return width;
	return num;
	}

	window.addEventListener('keydown',addKey);
	window.addEventListener('keyup',removeKey);

	loopID = setInterval(loop, 1500/30);

	</script>