Two-column Table Data Comparison Using JavaScript and CSS3

Preview:

Description:

A JavaScript & CSS3 based component that convert a table into an animated t wo-column bar chart for data comparison.

How to use it:

Create a normal data table as follow.

<table>
  <tr>
    <th></th>
    <th>2014</th>
    <th>2015</th>
  </tr>
  <tr>
    <td>Value A</td>
    <td>2</td>
    <td>8</td>
  </tr>
  <tr>
    <td>Value B</td>
    <td>3</td>
    <td>9</td>
  </tr>
  <tr>
    <td>Value C</td>
    <td>7</td>
    <td>11</td>
  </tr>
  <tr>
    <td>Value D</td>
    <td>10</td>
    <td>9</td>
  </tr>
  <tr>
    <td>Value E</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Value F</td>
    <td>11</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Value G</td>
    <td>15</td>
    <td>9</td>
  </tr>
  <tr>
    <td>Value H</td>
    <td>18</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Value I</td>
    <td>17</td>
    <td>11</td>
  </tr>
  <tr>
    <td>Value J</td>
    <td>20</td>
    <td>12</td>
  </tr>
</table>

The required CSS/CSS3 styles for the table data comparison.

table {
  width: 100%;
  background: #eee;
  padding: 1em;
  margin: 1em auto;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
th { font-size: 1.2em }
td {
  font-weight: bold;
  border-bottom: 1px solid #fbfbfb;
  width: 20%;
  padding: .5em .25em;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  -webkit-transition: all .75s ease-out;
  -moz-transition: all .75s ease-out;
  transition: all .75s ease-out;
}
td:nth-child(2) {
  width: 40%;
  color: white;
  text-shadow: 1px 2px #222;
  text-align: right;
  background-image: -webkit-linear-gradient(to left, #e74c3c, #e74c3c);
  background-image: -moz-linear-gradient(to left, #e74c3c, #e74c3c);
  background-image: linear-gradient(to left, #e74c3c, #e74c3c);
  background-position: right top;
}
td:nth-child(3) {
  width: 40%;
  color: white;
  text-shadow: 1px 2px #222;
  background-image: -webkit-linear-gradient(right, #3498db, #3498db);
  background-image: -moz-linear-gradient(right, #3498db, #3498db);
  background-image: linear-gradient(right, #3498db, #3498db);
  background-position: left top;
}

Add the following JavaScript snippet into your document.

var twoColComp = {
  init: function (){
    var tables = document.getElementsByTagName('table');
    for(var i = 0; i < tables.length; i++) {
      if (new RegExp('(^| )two-column-comp( |$)', 'gi').test(tables[i].className)){
         return;
      }
      var h = tables[i].clientHeight, 
          t = tables[i].getBoundingClientRect().top,
          wT = window.pageYOffset || document.documentElement.scrollTop,
          wH = window.innerHeight;
      if(wT + wH > t + h/2){
         this.make(tables[i]);
       }
    }
  },
  
  make : function(el){
    var rows = el.getElementsByTagName('tr'),
        vals = [],
        max,
        percent;
    for(var x = 0; x < rows.length; x++) {
      var cells = rows[x].getElementsByTagName('td');
      for(var y = 1; y < cells.length; y++){
        vals.push(parseInt(cells[y].innerHTML, 10));
      }
    }
    max = Math.max.apply( Math, vals );
    percent = 100/max;
    for(x = 0; x < rows.length; x++) {
      var cells = rows[x].getElementsByTagName('td');
      for(var y = 1; y < cells.length; y++){
        var currNum = parseInt(cells[y].innerHTML, 10);
        cells[y].style.backgroundSize = percent * currNum + "% 100%";
        cells[y].style.transitionDelay = x/20 + "s";
      } 
    }
    el.className =+ " two-column-comp"
  }
}
window.onload = function(){
  twoColComp.init();
}
window.onscroll = function(){
  twoColComp.init();
}