Substitution cypher

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type='text/javascript' src="http://d3js.org/d3.v3.min.js"></script>
    <title></title>
    <style>
		.code{
			width: 600px;
			margin-bottom: 30px;
		}
		.result{

		}
    </style>
</head>
<body>

<input type="text" class="code">

<div class="result"></div>

<script>

	var inputKey = ['k', 'q', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'f', 'e', 'c', 'b', 'a', 'd', 'g', 'h', 'i', 'j', 'l', 'm', 'n', 'p', 'o', 'r', ' '];
	var outputKey = d3.range(26).map(function(d, i){ return String.fromCharCode(d + 65).toLowerCase(); }).concat([' ']);

d3.select('.code').on('input', function(d){
	var encoded = this.value.split('').map(function(d, i){
		var index = inputKey.indexOf(d.toLowerCase());
		return index !== -1 ? outputKey[index] : d;
	});
	d3.select('.result').html(encoded.join(''));
});

</script>

</body>
</html>