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