VijayKrishna · December 15, 2015 02:38
diff --git a/index.html b/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>