eesur/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Testing keypress events using Mousetrap, a simple library for handling keyboard shortcuts in Javascript.
Numbers 0 to 9 will render Japanese equivalent using unicode characters.
To hear audio of Japanese numbers

  
## d3_code_japanese_numbers.js
(function() {
    'use strict';

    // japanese numbers data
    var nums = [
        { japanese: '&#12295;', english: 0, reading: 'zero' }, // 〇
        { japanese: '&#x4e00;', english: 1, reading: 'ichi' }, // 一
        { japanese: '&#x4e8c;', english: 2, reading: 'ni' }, // 二
        { japanese: '&#x4e09;', english: 3, reading: 'san' }, // 三
        { japanese: '&#x56db;', english: 4, reading: 'yon' }, // 四
        { japanese: '&#x4e94;', english: 5, reading: 'go' }, // 五
        { japanese: '&#x516d;', english: 6, reading: 'roku' }, // 六
        { japanese: '&#x4e03;', english: 7, reading: 'nana' }, // 七
        { japanese: '&#x516b;', english: 8, reading: 'hachi' }, // 八
        { japanese: '&#x4e5d;', english: 9, reading: 'kyū' }  // 九
    ];

    // bind key event
    // can I do multiple binds?
    Mousetrap.bind('0', function(e, n) { update(n); });
    Mousetrap.bind('1', function(e, n) { update(n); });
    Mousetrap.bind('2', function(e, n) { update(n); });
    Mousetrap.bind('3', function(e, n) { update(n); });
    Mousetrap.bind('4', function(e, n) { update(n); });
    Mousetrap.bind('5', function(e, n) { update(n); });
    Mousetrap.bind('6', function(e, n) { update(n); });
    Mousetrap.bind('7', function(e, n) { update(n); });
    Mousetrap.bind('8', function(e, n) { update(n); });
    Mousetrap.bind('9', function(e, n) { update(n); });

    // run button events
    btnEvents();

    // function to update text
    function update(n) {
        d3.select('#number').html(nums[n].japanese);
        d3.select('#reading').text(nums[n].reading);
        d3.selectAll('#number-btns li').style('opacity', 1);
        d3.select('#num-' + n).style('opacity', 0.4);

    }

    // event listeners for non keyboard
    function btnEvents() {
        _.times(10, function(n) {
            // fade the button out and change sets to use
            d3.select('#num-' + n).on('click', function() {
                // reset button opacity
                d3.selectAll('#number-btns li').style('opacity', 1);
                // fade out button selection
                d3.select(this).style('opacity', 0.4);
                update(n);
            });

       });
    }


})();


## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>d3 | keypress keyboard events</title>
  <meta name="author" content="Sundar Singh | eesur.com">

  <link rel="stylesheet" href="main.css">
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.js" charset="utf-8"></script>
</head>
<body>

<header>
  <p>Use button/keyboard to show number in Japanese:</p>
  <ul id="number-btns">
  <li id="num-0">0</li>
  <li id="num-1">1</li>
  <li id="num-2">2</li>
  <li id="num-3">3</li>
  <li id="num-4">4</li>
  <li id="num-5">5</li>
  <li id="num-6">6</li>
  <li id="num-7">7</li>
  <li id="num-8">8</li>
  <li id="num-9">9</li>
</ul>
</header>

<h1 id="number"></h1>


<footer>
  <h3 id="reading"></h3>
</footer>

<script src="d3_code_japanese_numbers.js" charset="utf-8"></script>

</body>
</html>

## main.css
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600);

body, h1, h3 {
  font-family: "Source Code Pro", Consolas, monaco, monospace;
  line-height: 1.5;
  font-weight: 400;
}

html, body {
  height: 100%;
}
body {
  position: relative;
  color: #00B0DD;
  padding: 20px;
}
#number {
  margin: 0 auto;
  position: relative;
  width: 300px;
  height: 280;
  top: 20%;
  left: 0;
}
p {
  padding-top: 0;
  margin-top: 0;
  font-size: 13px;
  line-height: 1;
}
h1 {
  font-size: 256px;
  line-height: 100%;
  font-weight: normal;
  color: #EE3124;
}

h3 {
  font-size: 18px;
  color: #EE3124;
  letter-spacing: 2px;
}

ul#number-btns {
  color: #fff;
  list-style: none;
  padding: 0;
  margin: 0;
}
ul#number-btns li{
  display: inline-block;
  padding: 2px 8px;
  background: #00B0DD;
}

footer {
  position: absolute;
  bottom: 100px;
  left: 20px;
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	(function() {
	'use strict';

	// japanese numbers data
	var nums = [
	{ japanese: '〇', english: 0, reading: 'zero' }, // 〇
	{ japanese: '一', english: 1, reading: 'ichi' }, // 一
	{ japanese: '二', english: 2, reading: 'ni' }, // 二
	{ japanese: '三', english: 3, reading: 'san' }, // 三
	{ japanese: '四', english: 4, reading: 'yon' }, // 四
	{ japanese: '五', english: 5, reading: 'go' }, // 五
	{ japanese: '六', english: 6, reading: 'roku' }, // 六
	{ japanese: '七', english: 7, reading: 'nana' }, // 七
	{ japanese: '八', english: 8, reading: 'hachi' }, // 八
	{ japanese: '九', english: 9, reading: 'kyū' } // 九
	];

	// bind key event
	// can I do multiple binds?
	Mousetrap.bind('0', function(e, n) { update(n); });
	Mousetrap.bind('1', function(e, n) { update(n); });
	Mousetrap.bind('2', function(e, n) { update(n); });
	Mousetrap.bind('3', function(e, n) { update(n); });
	Mousetrap.bind('4', function(e, n) { update(n); });
	Mousetrap.bind('5', function(e, n) { update(n); });
	Mousetrap.bind('6', function(e, n) { update(n); });
	Mousetrap.bind('7', function(e, n) { update(n); });
	Mousetrap.bind('8', function(e, n) { update(n); });
	Mousetrap.bind('9', function(e, n) { update(n); });

	// run button events
	btnEvents();

	// function to update text
	function update(n) {
	d3.select('#number').html(nums[n].japanese);
	d3.select('#reading').text(nums[n].reading);
	d3.selectAll('#number-btns li').style('opacity', 1);
	d3.select('#num-' + n).style('opacity', 0.4);

	}

	// event listeners for non keyboard
	function btnEvents() {
	_.times(10, function(n) {
	// fade the button out and change sets to use
	d3.select('#num-' + n).on('click', function() {
	// reset button opacity
	d3.selectAll('#number-btns li').style('opacity', 1);
	// fade out button selection
	d3.select(this).style('opacity', 0.4);
	update(n);
	});

	});
	}


	})();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>d3 \| keypress keyboard events</title>
	<meta name="author" content="Sundar Singh \| eesur.com">

	<link rel="stylesheet" href="main.css">
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js" charset="utf-8"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.js" charset="utf-8"></script>
	</head>
	<body>

	<header>
	<p>Use button/keyboard to show number in Japanese:</p>
	<ul id="number-btns">
	<li id="num-0">0</li>
	<li id="num-1">1</li>
	<li id="num-2">2</li>
	<li id="num-3">3</li>
	<li id="num-4">4</li>
	<li id="num-5">5</li>
	<li id="num-6">6</li>
	<li id="num-7">7</li>
	<li id="num-8">8</li>
	<li id="num-9">9</li>
	</ul>
	</header>

	<h1 id="number"></h1>


	<footer>
	<h3 id="reading"></h3>
	</footer>

	<script src="d3_code_japanese_numbers.js" charset="utf-8"></script>

	</body>
	</html>
	@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600);

	body, h1, h3 {
	font-family: "Source Code Pro", Consolas, monaco, monospace;
	line-height: 1.5;
	font-weight: 400;
	}

	html, body {
	height: 100%;
	}
	body {
	position: relative;
	color: #00B0DD;
	padding: 20px;
	}
	#number {
	margin: 0 auto;
	position: relative;
	width: 300px;
	height: 280;
	top: 20%;
	left: 0;
	}
	p {
	padding-top: 0;
	margin-top: 0;
	font-size: 13px;
	line-height: 1;
	}
	h1 {
	font-size: 256px;
	line-height: 100%;
	font-weight: normal;
	color: #EE3124;
	}

	h3 {
	font-size: 18px;
	color: #EE3124;
	letter-spacing: 2px;
	}

	ul#number-btns {
	color: #fff;
	list-style: none;
	padding: 0;
	margin: 0;
	}
	ul#number-btns li{
	display: inline-block;
	padding: 2px 8px;
	background: #00B0DD;
	}

	footer {
	position: absolute;
	bottom: 100px;
	left: 20px;
	}