<a class="clickme">Click!</a>
<a class="reset">Reset</a>

<h2>Raw events over time</h2>
<div id="raw-events" class="events"></div>
<h2>Debounced events<span class="details"> 400ms, leading</span></h2>
<div id="debounced-events" class="events"></div>

body {
   background: #444444;
   color: white;
   font: 15px/1.51 Helvetica, sans-serif;
   margin:0 auto;
   max-width:800px;
   padding:20px;
}

.events{
  margin:0;
  height: 23px;
}
.events span {
  height:17px;
  width:7px;
  display:inline-block;
  border-left:1px solid #777;
}
h2 {
  margin-bottom:8px;
  height: 15px;
  clear:both;
  font-weight: normal;
  width:100%;
  font-size:13px;
}

.clickme {
  margin:0 ;
  display:inline-block;
  width: 120px;
  border: 1px solid #ccc;
  padding: 5px 5px;
  text-align: center;
  background-color: transparent;
  cursor:pointer;
  -webkit-user-select: none;  /* Chrome  / Safari */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */    
}
.clickme:hover,
.clickme:active{
  background-color: #333;
}
.clickme:active{
  padding: 4px 5px;
}
.reset {
  display:inline-block;
  width: 120px;
  position:relative;
  padding: 15px 5px;
  text-align: center;
  font-size:13px;
  cursor:pointer;
}
.details {
  font-size:12px;
  color:#999;
}
.color0 { background-color: #9BFFBB}
.color1 { background-color: #E3FF7E}
.color2 { background-color: #B9C6FF}
.color3 { background-color: #99FF7E}
.color4 { background-color: #FFB38A}
.color5 { background-color: #A5FCFF}
.color6 { background-color: #FF8E9B}
.color7 { background-color: #FFE589}
.color8 { background-color: #FFA3D8}
.color9 { background-color: #5ca6ff}

$(document).ready(function(){

  var $raw_div = $('#raw-events'),
      $debounced_div = $('#debounced-events'),
      initialized = false,
      frequency = 200,
      bar_length = 0,
      color = 0,
      color_need_change = false,
      interval_id;

    // By throttling the "raw" events at same delay than base pattern, we make sure that 1 click event only paints 1 cell (the last one).
  var draw_raw_event = _.throttle(function(div){
    div[0].lastChild.className = 'color' + color;
  }, frequency);
  
  var draw_debounced_event = _.debounce(function(div){
    // Change colors, to visualize easier the "group of events" that is reperesenting this debounced event
    color++;
    if (color > 9){
      color = 0;
    }
    div[0].lastChild.className = 'color' + color;
  }, frequency*2, {leading:true});
  
  
  function draw_tick_marks(){
    // every x seconds, draw a tick mark in the bar
    interval_id = setInterval(function(){
      bar_length++;
      // Append a new item to both, a tick.
     
      $debounced_div.append('<span></span>');
       $raw_div.append('<span></span>');
      if (bar_length > 95){
        clearInterval(interval_id);
      }
    }, frequency);
  };
  
  $('.clickme').on('click mousemove', function (){  
    if (!initialized) {
       $('.reset').trigger('click');
       draw_tick_marks();
       initialized = true;
    } 
    
    draw_debounced_event($debounced_div);
    draw_raw_event($raw_div);
  });

  $('.reset').on('click', function(){
    initialized = false;
    $raw_div.html('<span></span>');
    $debounced_div.html('<span></span>');
    color = 0;
    bar_length = 0;
    clearInterval(interval_id);
  });

});