[Web Applications] View of /information_theory/info

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>The Slope of Information</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" type="text/css" />
    <link rel="stylesheet" href="info_theory.css" type="text/css" />
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">{parsetags: 'explicit'}</script>
    <script type="text/javascript"><!--
      google.load("jquery", "1.7");
      google.load("jqueryui", "1.8");

      google.setOnLoadCallback( function() {
        $( "#checkit" ).click( function() {
          resultDiv = $( "#result" );
          resultDiv.empty();

          var bitSums = new Object;
          var bitArr = new Array();
          var text = "";

          //resultDiv.append( "<canvas width='900px' height='900px'>Sorry, your browser doesn't support the HTML 5 canvas.</canvas>" );

          text = $("#data").val();

          text = text.replace(/[^a-zA-Z ]+/g, '').replace('/ {2,}/',' ');

          bits = text.split(" ");

          for ( i in bits ){
            if( isNaN( bitSums[ bits[ i ] ]  ) ) bitSums[ bits[ i] ] = 0;
            bitSums[ bits[ i ] ]++;
          }

          for( i in bitSums ) {
            bitArr.push([ bitSums[i], i ]);
          }

          //bitArr.sort();
          bitArr.sort( function( a, b ) { return b[0] - a[0]; } );
          //resultDiv.append( bitArr.toString() );

          //Generate a table for now instead of an image
          resultDiv.append("<table id=tblResult></table>");
          tblResult = $( "#tblResult" );
          for( i in bitArr ){
            var lenStr = "";
            for( var j = 0; j < bitArr[i][0]; j++ ){
              lenStr += "#";
            }
            tblResult.append("<tr><td>" + bitArr[i][1] + "</td><td>" + bitArr[i][0] + "</td><td>" + lenStr + "</td></tr>");
          } 
        });
      });
    --></script>
  </head>
  <body>
    <p>This page was inspired by something I saw on <a target="_blank" href="http://science.discovery.com/tv-shows/through-the-wormhole/videos/through-the-wormhole-information-theory.htm">Through The Wormhole</a>.
    I was curious about how easily the slope of information could be applied to a data source that we don't know how to divide up.</p>
    <textarea id="data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac est nulla. Nunc sit amet dolor non arcu varius consequat. Curabitur molestie ornare urna, non cursus eros iaculis sed. Donec feugiat commodo turpis, quis interdum quam facilisis eget. Suspendisse a dui sapien, sed vestibulum mauris. Aenean eget tristique purus. Integer pharetra diam eget dolor tristique ac tempor diam pharetra. Praesent ut ipsum eu ante ullamcorper pellentesque in nec magna. Quisque vehicula vulputate nisl, vel semper dui convallis non. Morbi id ipsum libero. Sed ipsum nunc, facilisis et posuere vitae, hendrerit eget massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Phasellus id vestibulum sapien. Nulla ante dolor, accumsan vulputate gravida ut, euismod tincidunt lorem. Ut vestibulum eros a turpis tempor semper. Integer posuere, justo non congue mollis, dui nibh feugiat tortor, ac blandit leo velit ac arcu. Vivamus nisi augue, ornare nec varius quis, iaculis at sapien. Donec sed metus eget eros mattis commodo. Donec nec orci quis felis euismod ultricies. Vestibulum vitae nulla in ante molestie imperdiet. Phasellus pellentesque, tortor et congue aliquam, lectus erat aliquam sem, non dictum purus lacus ut nisl. Etiam tincidunt tellus non diam commodo a egestas turpis dictum. Curabitur eget blandit purus.

Etiam elit sem, lacinia placerat tempor sit amet, pretium et mauris. Nulla eu quam nulla. Fusce dapibus nisi in massa auctor feugiat. In semper ultricies turpis, sed feugiat purus euismod sit amet. Cras id magna felis. Phasellus non felis non arcu sollicitudin accumsan. Aliquam semper, ipsum sed tempor facilisis, dui odio suscipit eros, vel euismod erat ante ac dolor.

Pellentesque semper orci id felis porta sed pretium magna dignissim. Curabitur et nunc non nibh scelerisque euismod in vel arcu. Aenean et turpis justo, ac aliquet nibh. Maecenas dictum interdum augue sit amet pretium. Duis at massa id odio aliquet dictum. Suspendisse pellentesque semper venenatis. Integer mollis mauris vitae sem fermentum iaculis ac et nibh. Morbi a velit turpis, in semper odio. Cras feugiat, orci quis elementum blandit, augue velit posuere purus, vel semper felis tellus rhoncus tellus. Vivamus nulla dolor, bibendum eu blandit a, molestie vel augue. Sed condimentum facilisis lacinia. Nulla dictum euismod sagittis.

Mauris porttitor massa eget mi ornare sed pulvinar mauris auctor. Nunc et nunc mi, sed ornare nisi. Proin rhoncus lacus sed sem lacinia a pharetra nisi laoreet. Fusce ut molestie nibh. Pellentesque suscipit ipsum vitae nisl malesuada et vehicula tortor placerat. Praesent a nisi ac enim gravida mattis tincidunt in magna. Proin tristique congue mauris eu semper. Duis nec nibh lorem. Vivamus sagittis ligula ac massa posuere elementum. Aenean posuere tristique velit adipiscing fermentum. Ut lobortis felis eget erat pretium sit amet rhoncus eros euismod. Curabitur sodales dolor sed orci lacinia tempus. Phasellus sagittis nisi nec lectus varius aliquet.
    </textarea>
    <div id="options">
      strip punctiation, split on spaces, split every x letters,
      <button id="checkit">Check It!</button>
    </div>
    <div id="result">
      <p>Press the 'Check It!' button generate a graph here.</p>
    </div>
  </body>
</html>
View of /information_theory/info_theory.html
