Sum Explorer

A little program to explore the mathematical sum rows (Sigma function). This has been made to aid myself trying to find a relationship between each simple exponential sum (Sigma(x^a)).

HTML

<div id="wrapper">
    <div id="sum_explorer"><table><thead></thead><tbody></tbody></table></div>
    <article id="results">
        <h1>Term Definitions</h1>
        <p>
            The following terms are used in this article:
            <ul>
                <li>
                    Custom Sigma notation<br />
                    It is a little more difficult to denote a sigma formula based on HTML only. It would require
                    some extra CSS to display the boundaries of the control variable. I certainly am able to
                    program that, but for this little research, I'll stick to the following template:<br />
                    &#931;a<sup>x</sup>+c (x=n;k)<br />
                    Inspired by the integral notation. The enclosing parentheses at the end designate the limits
                    that would be usually written below and above the &#931;.
                </li>
                <li>
                    Simple exponential sum (SES)<br />
                    I use this term to refer to a sum of this form: &#931;a<sup>x</sup> (x=n;k). No further
                    arithmetic operations performed on neither a nor x.
                </li>
                <li>
                    Center column<br />
                    The center column is the column containing the result of &#931;a<sup>x</sup> (x=0;0).
                </li>
                <li>
                    Index<br />
                    This refers to the tabular distance to the center column, in other words represents
                    &#931;a<sup>x</sup> (x=0;index).
                </li>
                <li>
                    Difference row<br />
                    I use this term to describe a record of data calculated through the difference of two
                    values each of the preceeding row.
                </li>
                <li>
                    Final difference row<br />
                    I use this term to refer to a significant...

CSS

*, html, body {
    font-size: 14px;
}

table td {
    padding: 2px;
}

ul, ol {
    padding-left: 50px;
}
ul {
    list-style-type: disc;
}

h1 {
    font-size: 20px;
    font-weight: bold;
}
p {
    margin: 10px 4px;
    text-align: justify;
}

#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#sum_explorer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60%;
    overflow: auto;
}
#sum_explorer table {
    width: auto;
}
#sum_explorer tbody td, #sum_explorer tbody tr:first-child td {
    background: #fff;
}
#sum_explorer tbody td:nth-child(2n), #sum_explorer tbody tr:first-child td:nth-child(2n+1) {
    background: #eee;
}
#sum_explorer tbody tr:nth-child(n+2) td:last-child {
    background: #fff;
}
#sum_explorer td {
    text-align: center;
    padding: 5px;
}

#tools {
    position: absolute;
    top: 40%;
    right: 0;
    width: 200px;
    padding: 5px;
    background: white;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-bottom-left-radius: 15px 40px;
}
#tools #exponent {
    width: 50px;
}

#results {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 40%;
    overflow: auto;
}

JavaScript

(function($){
    'use strict';
    
    var $sumexplorer, $exponent;
    
    var sumLookup = {};
    function recalcSum( ) {
        var sum = 0, i, x, exp = parseInt($exponent.val()), endDifference = faculty(exp),
            data = [],
            tmp,
            $thead = $sumexplorer.find('thead'), $tbody = $sumexplorer.find('tbody'), $tr;
        
        if( exp in sumLookup ) {
            data = sumLookup[exp];
        }
        else {
            // Prepare data records
            for( i = 1; i < exp + 2; ++i ) { // exp + 2 rows in total
                data.push([]);
            }
            
            // Calculate first row
            data.push([]);
            data[0][0] = 0;
            for( x = 1; x <= 20; ++x ) {
                sum += Math.pow(x, exp);
                data[0].push(sum);
            }
            sum = 0;
            data[0].reverse();
            for( x = -1; x >= -20; --x ) {
                sum += Math.pow(x, exp);
                data[0].push(sum);
            }
            data[0].reverse();
            console.log(data[0]);
            
            // Calculate every following row from difference of two values in preceeding row.
            for( i = 1; i < exp + 2; ++i ) {
                tmp = data[i - 1];
                for( x = 1; x < tmp.length; ++x ) {
                    data[i].push(data[i - 1][x] - data[i - 1][x - 1]);
                }
            }
            
            sumLookup[exp] = data;
        }
        
        // Construct table.
        $thead.empty();
        $tbody.empty();
        
        // Prepare head row used to align data.
        $tr = $('<tr>').appendTo($thead);
        for( i = 0; i < data[0].length; ++i ) {
            $tr.append($('<td>')).append($('<td>'));
        }
        
        for( x = 0; x < data.length; ++x ) {
            $tr = $('<tr>').appendTo($tbody);
            if( x != 0 )
                $tr.append($('<td>').attr('colspan', x));
            for( i = 0; i <...