From 9c5cfdf4df108fcf66d1e1a9bacbb6ef379d6132 Mon Sep 17 00:00:00 2001
From: Nathan Carter <ncarter@bentley.edu>
Date: Thu, 10 Oct 2019 11:24:30 -0400
Subject: [PATCH] Fixing to obey test file

---
 anim.js          | 47 +++++++++++++++++++------
 melt.html        | 92 +++++++++++++++++++++++++++---------------------
 pivot-table.html | 71 ++++++++++++++++++++++---------------
 pivot.html       | 52 ++++++++++++++++-----------
 stack-0.html     | 71 ++++++++++++++++++++-----------------
 stack-1.html     | 71 +++++++++++++++++++++----------------
 6 files changed, 239 insertions(+), 165 deletions(-)

diff --git a/anim.js b/anim.js
index 901597b..48957a0 100644
--- a/anim.js
+++ b/anim.js
@@ -5,35 +5,60 @@ const w = 75, h = 75;
 function setColor ( c ) { color = c; }
 function setReverse ( r ) { reverse = r; update(); }
 
-function addBox ( text, x1, y1, x2, y2 ) {
+function addBox ( text, x1, y1, x2, y2, opt ) {
+    if ( !opt ) opt = { };
+    if ( !opt.w1 ) opt.w1 = 1;
+    if ( !opt.h1 ) opt.h1 = 1;
+    if ( !opt.w2 ) opt.w2 = 1;
+    if ( !opt.h2 ) opt.h2 = 1;
+    if ( !opt.color ) opt.color = color;
     var box = document.createElement( 'div' );
     box.innerHTML = '<p style="margin: auto;">' + text + '</p>';
     box.style.display = 'flex';
     box.style.border = '1px solid black';
-    box.style.width = w;
-    box.style.height = h;
-    box.style.background = color;
+    box.style.width = opt.w1 * w;
+    box.style.height = opt.h1 * h;
+    box.style.background = opt.color;
     main.appendChild( box );
     box.style.position = 'absolute';
     box.style.left = x1 * w;
     box.style.top = y1 * h;
-    box.limits = { x1 : x1 * w, y1 : y1 * h,
-                   x2 : x2 * w, y2 : y2 * h };
+    box.limits = {
+        x1 : x1 * w,
+        y1 : y1 * h,
+        x2 : x2 * w,
+        y2 : y2 * h,
+        w1 : opt.w1 * w,
+        h1 : opt.h1 * h,
+        w2 : opt.w2 * w,
+        h2 : opt.h2 * h,
+    };
     boxes.push( box );
 }
 
 function addBoxes () {
-    for ( var i = 0 ; i < arguments.length ; i += 5 )
-        addBox( arguments[i], arguments[i+1],
-                arguments[i+2], arguments[i+3], arguments[i+4] );
+    for ( var i = 0 ; i < arguments.length ; i += 5 ) {
+        if ( ( i+5 < arguments.length )
+          && ( arguments[i+5] instanceof Object ) ) {
+            addBox( arguments[i], arguments[i+1],
+                    arguments[i+2], arguments[i+3], arguments[i+4],
+                    arguments[i+5] );
+            i++;
+        } else {
+            addBox( arguments[i], arguments[i+1],
+                    arguments[i+2], arguments[i+3], arguments[i+4] );
+        }
+    }
 }
 
 function update () {
     boxes.map( box => {
         var t = slider.value / 100;
         if ( reverse ) t = 1 - t;
-        box.style.left = ( 1 - t ) * box.limits.x1 + t * box.limits.x2;
-        box.style.top  = ( 1 - t ) * box.limits.y1 + t * box.limits.y2;
+        box.style.left   = ( 1 - t ) * box.limits.x1 + t * box.limits.x2;
+        box.style.top    = ( 1 - t ) * box.limits.y1 + t * box.limits.y2;
+        box.style.width  = ( 1 - t ) * box.limits.w1 + t * box.limits.w2;
+        box.style.height = ( 1 - t ) * box.limits.h1 + t * box.limits.h2;
     } );
 }
 
diff --git a/melt.html b/melt.html
index 0b202f2..b602b63 100644
--- a/melt.html
+++ b/melt.html
@@ -4,71 +4,81 @@
         <script>
             window.addEventListener( 'load', function () {
                 addBoxes(
-                    'Last',     0, 0, 0, 0,
-                    'First',    1, 0, 1, 0,
-                    'variable', -1000, 0, 2, 0,
-                    'value',    -1000, 0, 3, 0
+                    'First',        1, 0, 1, 0,
+                    'Last',         2, 0, 2, 0,
+                    'variable', -1000, 0, 3, 0,
+                    'value',    -1000, 0, 4, 0,
+                    '',             0, 0, 0, 0,
+                    '3',            0, 3, 0, 4,
+                    '4',            0, 3, 0, 5,
+                    '5',            0, 3, 0, 6,
+                    '6',            0, 3, 0, 7,
+                    '7',            0, 3, 0, 8,
+                    '8',            0, 3, 0, 9,
+                    '0',            0, 1, 0, 1,
+                    '1',            0, 2, 0, 2,
+                    '2',            0, 3, 0, 3,
                 );
                 setColor( '#ffdddd' );
                 addBoxes(
-                    'SAT',      2, 0, 2, 1,
-                    'SAT',      2, 0, 2, 2,
-                    'SAT',      2, 0, 2, 3,
-                    'ACT',      3, 0, 2, 4,
-                    'ACT',      3, 0, 2, 5,
-                    'ACT',      3, 0, 2, 6,
-                    'GPA',      4, 0, 2, 7,
-                    'GPA',      4, 0, 2, 8,
-                    'GPA',      4, 0, 2, 9
+                    'SAT',      3, 0, 3, 1,
+                    'SAT',      3, 0, 3, 2,
+                    'SAT',      3, 0, 3, 3,
+                    'ACT',      4, 0, 3, 4,
+                    'ACT',      4, 0, 3, 5,
+                    'ACT',      4, 0, 3, 6,
+                    'GPA',      5, 0, 3, 7,
+                    'GPA',      5, 0, 3, 8,
+                    'GPA',      5, 0, 3, 9,
                 );
                 setColor( '#dddddd' );
                 addBoxes(
-                    'Abe', 0, 1, 0, 1,
-                    'Abe', 0, 1, 0, 2,
-                    'Abe', 0, 1, 0, 3,
-                    'Amy', 0, 2, 0, 4,
-                    'Amy', 0, 2, 0, 5,
-                    'Amy', 0, 2, 0, 6,
-                    'Art', 0, 3, 0, 7,
-                    'Art', 0, 3, 0, 8,
-                    'Art', 0, 3, 0, 9
+                    'Abe', 1, 1, 1, 1,
+                    'Amy', 1, 2, 1, 2,
+                    'Art', 1, 3, 1, 3,
+                    'Abe', 1, 1, 1, 4,
+                    'Amy', 1, 2, 1, 5,
+                    'Art', 1, 3, 1, 6,
+                    'Abe', 1, 1, 1, 7,
+                    'Amy', 1, 2, 1, 8,
+                    'Art', 1, 3, 1, 9,
                 );
                 setColor( '#dddddd' );
                 addBoxes(
-                    'Smith', 1, 1, 1, 1,
-                    'Smith', 1, 1, 1, 2,
-                    'Smith', 1, 1, 1, 3,
-                    'Sully', 1, 2, 1, 4,
-                    'Sully', 1, 2, 1, 5,
-                    'Sully', 1, 2, 1, 6,
-                    'Smart', 1, 3, 1, 7,
-                    'Smart', 1, 3, 1, 8,
-                    'Smart', 1, 3, 1, 9
+                    'Smith', 2, 1, 2, 1,
+                    'Sully', 2, 2, 2, 2,
+                    'Smart', 2, 3, 2, 3,
+                    'Smith', 2, 1, 2, 4,
+                    'Sully', 2, 2, 2, 5,
+                    'Smart', 2, 3, 2, 6,
+                    'Smith', 2, 1, 2, 7,
+                    'Sully', 2, 2, 2, 8,
+                    'Smart', 2, 3, 2, 9,
                 );
                 setColor( '#ddddff' );
                 addBoxes(
-                    '123', 2, 1, 3, 1,
-                    '234', 2, 2, 3, 2,
-                    '345', 2, 3, 3, 3
+                    '123', 3, 1, 4, 1,
+                    '234', 3, 2, 4, 2,
+                    '345', 3, 3, 4, 3
                 );
                 setColor( '#ddffdd' );
                 addBoxes(
-                    '456', 3, 1, 3, 4,
-                    '567', 3, 2, 3, 5,
-                    '678', 3, 3, 3, 6
+                    '456', 4, 1, 4, 4,
+                    '567', 4, 2, 4, 5,
+                    '678', 4, 3, 4, 6
                 );
                 setColor( '#ffffdd' );
                 addBoxes(
-                    '2.0', 4, 1, 3, 7,
-                    '3.0', 4, 2, 3, 8,
-                    '4.0', 4, 3, 3, 9
+                    '2.0', 5, 1, 4, 7,
+                    '3.0', 5, 2, 4, 8,
+                    '4.0', 5, 3, 4, 9
                 );
             } );
         </script>
     </head>
     <body>
         <h1>Melt</h1>
-        <pre>pd.melt( df, id_vars=["Last","First"], value_vars=["SAT","ACT","GPA"] )</pre>
+        <pre>df.melt( id_vars=["First","Last"], value_vars=["SAT","ACT","GPA"] )</pre>
         <hr/>
     </body>
 </html>
diff --git a/pivot-table.html b/pivot-table.html
index 78f29b3..2bc4886 100644
--- a/pivot-table.html
+++ b/pivot-table.html
@@ -4,49 +4,64 @@
         <script>
             window.addEventListener( 'load', function () {
                 addBoxes(
-                    'First',      0, 0, 0, 0,
-                    'Last',       1, 0, 1, 0,
-                    'Sales',      2, 0, 2, 0,
-                    'Sales?', -1000, 0, 2, 0
+                    'First',        1, 0,     0, 2,
+                    'Last',         2, 0,     1, 2,
+                    'Customer',     3, 0,     1, 1,
+                    'Sale',         4, 0,     2, 0, { w2 : 2 },
+                    '',             0, 0, -1000, 0,
+                    '',         -1000, 0,     2, 2,
+                    '',         -1000, 0,     3, 2,
+                    '',         -1000, 0,     0, 0,
+                    '',         -1000, 0,     1, 0,
+                    '',         -1000, 0,     0, 1,
+                    '0',            0, 1, -1000, 1,
+                    '1',            0, 2, -1000, 1,
+                    '2',            0, 3, -1000, 1,
+                    '3',            0, 4, -1000, 2,
+                    '4',            0, 5, -1000, 2,
+                    '5',            0, 6, -1000, 2,
                 );
                 setColor( '#dddddd' );
                 addBoxes(
-                    'Abe', 0, 1, 0, 1,
-                    'Abe', 0, 2, 0, 1,
-                    'Abe', 0, 3, 0, 1,
-                    'Amy', 0, 4, 0, 2,
-                    'Amy', 0, 5, 0, 2,
-                    'Amy', 0, 6, 0, 2
+                    'Abe', 1, 1, 0, 3,
+                    'Abe', 1, 2, 0, 3,
+                    'Abe', 1, 3, 0, 3,
+                    'Amy', 1, 4, 0, 4,
+                    'Amy', 1, 5, 0, 4,
+                    'Amy', 1, 6, 0, 4,
                 );
-                setColor( '#dddddd' );
                 addBoxes(
-                    'Axel', 1, 1, 1, 1,
-                    'Axel', 1, 2, 1, 1,
-                    'Axel', 1, 3, 1, 1,
-                    'Arnt', 1, 4, 1, 2,
-                    'Arnt', 1, 5, 1, 2,
-                    'Arnt', 1, 6, 1, 2
+                    'Axel', 2, 1, 1, 3,
+                    'Axel', 2, 2, 1, 3,
+                    'Axel', 2, 3, 1, 3,
+                    'Arnt', 2, 4, 1, 4,
+                    'Arnt', 2, 5, 1, 4,
+                    'Arnt', 2, 6, 1, 4,
                 );
-                setColor( '#ddffdd' );
+                setColor( '#ddddff' );
                 addBoxes(
-                    '39', 2, 1, 2, 1,
-                    '68', 2, 2, 2, 1,
-                    '10', 2, 3, 2, 1,
-                    '93', 2, 4, 2, 2,
-                    '85', 2, 5, 2, 2,
-                    '0',  2, 6, 2, 2
+                    'X Co.',  3, 1, 2, 1,
+                    'Y Inc.', 3, 2, 3, 1,
+                    'X Co.',  3, 3, 2, 1,
+                    'Y Inc.', 3, 4, 3, 1,
+                    'X Co.',  3, 5, 2, 1,
+                    'Y Inc.', 3, 6, 3, 1,
                 );
-                setColor( '#bbffbb' );
+                setColor( '#ddffdd' );
                 addBoxes(
-                    'Agg?', -1000, 0, 2, 1,
-                    'Agg?', -1000, 0, 2, 2
+                    '39', 4, 1, 2, 3,
+                    '68', 4, 2, 3, 3,
+                    '10', 4, 3, 2, 3,
+                    '93', 4, 4, 3, 4,
+                    '85', 4, 5, 2, 4,
+                    '0',  4, 6, 3, 4,
                 );
             } );
         </script>
     </head>
     <body>
         <h1>Pivot Table</h1>
-        <pre>df.pivot_table( index="Name", columns="Day", values="Sales", aggfunc="?" )</pre>
+        <pre>df.pivot_table( index=["First","Last"], columns="Sale", aggfunc="sum" )</pre>
         <hr/>
     </body>
 </html>
diff --git a/pivot.html b/pivot.html
index 243f3e1..db3feb8 100644
--- a/pivot.html
+++ b/pivot.html
@@ -4,36 +4,46 @@
         <script>
             window.addEventListener( 'load', function () {
                 addBoxes(
-                    'Name',  0, 0, 0, 0,
-                    'Day',  1, 0, -1000, 0,
-                    'Sales',  2, 0, -1000, 0
+                    'Name',   1, 0,     0, 1,
+                    'Day',    2, 0,     0, 0,
+                    'Sales',  3, 0, -1000, 0,
+                    '0',      0, 1, -1000, 0,
+                    '1',      0, 2, -1000, 0,
+                    '2',      0, 3, -1000, 0,
+                    '3',      0, 4, -1000, 0,
+                    '4',      0, 5, -1000, 0,
+                    '5',      0, 6, -1000, 0,
+                    '',   -1000, 0,     1, 1,
+                    '',   -1000, 0,     2, 1,
+                    '',   -1000, 0,     3, 1,
+                    '',       0, 0, -1000, 0,
                 );
                 setColor( '#dddddd' );
                 addBoxes(
-                    'Abe', 0, 1, 0, 1,
-                    'Abe', 0, 2, 0, 1,
-                    'Abe', 0, 3, 0, 1,
-                    'Amy', 0, 4, 0, 2,
-                    'Amy', 0, 5, 0, 2,
-                    'Amy', 0, 6, 0, 2
+                    'Abe', 1, 1, 0, 2,
+                    'Abe', 1, 2, 0, 2,
+                    'Abe', 1, 3, 0, 2,
+                    'Amy', 1, 4, 0, 3,
+                    'Amy', 1, 5, 0, 3,
+                    'Amy', 1, 6, 0, 3,
                 );
                 setColor( '#ddddff' );
                 addBoxes(
-                    'Mon', 1, 1, 1, 0,
-                    'Tue', 1, 2, 2, 0,
-                    'Wed', 1, 3, 3, 0,
-                    'Mon', 1, 4, 1, 0,
-                    'Tue', 1, 5, 2, 0,
-                    'Wed', 1, 6, 3, 0
+                    'Mon', 2, 1, 1, 0,
+                    'Tue', 2, 2, 2, 0,
+                    'Wed', 2, 3, 3, 0,
+                    'Mon', 2, 4, 1, 0,
+                    'Tue', 2, 5, 2, 0,
+                    'Wed', 2, 6, 3, 0,
                 );
                 setColor( '#ddffdd' );
                 addBoxes(
-                    '39', 2, 1, 1, 1,
-                    '68', 2, 2, 2, 1,
-                    '10', 2, 3, 3, 1,
-                    '93', 2, 4, 1, 2,
-                    '85', 2, 5, 2, 2,
-                    '0', 2, 6, 3, 2
+                    '39', 3, 1, 1, 2,
+                    '68', 3, 2, 2, 2,
+                    '10', 3, 3, 3, 2,
+                    '93', 3, 4, 1, 3,
+                    '85', 3, 5, 2, 3,
+                    '0',  3, 6, 3, 3,
                 );
             } );
         </script>
diff --git a/stack-0.html b/stack-0.html
index 1342370..e2f7d5e 100644
--- a/stack-0.html
+++ b/stack-0.html
@@ -4,52 +4,57 @@
         <script>
             window.addEventListener( 'load', function () {
                 addBoxes(
-                    'Month',  1, 1, 0, 0,
-                    'Week',   0, 2, 1, 0,
-                    'Temp',   2, 0, 2, 0,
-                    'Humid',  4, 0, 3, 0
+                    '',       0, 0,     0, 0,
+                    '',       1, 0, -1000, 0,
+                    '',       2, 1,     1, 2,
+                    '',       2, 1,     2, 2,
+                    '',       3, 1,     3, 2,
+                    '',       3, 1,     4, 2,
+                    'Month',  0, 1,     0, 1,
+                    'Week',   1, 1,     0, 2,
+                    'Temp',   2, 0,     1, 0, { w2 : 2 },
+                    'Humid',  3, 0,     3, 0, { w2 : 2 },
                 );
                 setColor( '#dddddd' );
                 addBoxes(
-                    'Jan', 2, 1, 0, 1,
-                    'Jan', 4, 1, 0, 1,
-                    'Feb', 3, 1, 0, 5,
-                    'Feb', 5, 1, 0, 5,
+                    'Jan', 0, 2, 1, 1, { h1 : 4 },
+                    'Jan', 0, 2, 3, 1, { h1 : 4 },
+                    'Feb', 0, 6, 2, 1, { h1 : 4 },
+                    'Feb', 0, 6, 4, 1, { h1 : 4 },
                 );
                 setColor( '#ddffdd' );
                 addBoxes(
-                    '1', 1, 2, 1, 1,
-                    '2', 1, 3, 1, 2,
-                    '3', 1, 4, 1, 3,
-                    '4', 1, 5, 1, 4,
-                    '1', 1, 2, 1, 5,
-                    '2', 1, 3, 1, 6,
-                    '3', 1, 4, 1, 7,
-                    '4', 1, 5, 1, 8
+                    '1', 1, 2, 0, 3,
+                    '2', 1, 3, 0, 4,
+                    '3', 1, 4, 0, 5,
+                    '4', 1, 5, 0, 6,
+                    '1', 1, 6, 0, 3,
+                    '2', 1, 7, 0, 4,
+                    '3', 1, 8, 0, 5,
+                    '4', 1, 9, 0, 6,
                 );
                 setColor( '#ddddff' );
                 addBoxes(
-                    '31', 2, 2, 2, 1,
-                    '29', 2, 3, 2, 2,
-                    '26', 2, 4, 2, 3,
-                    '27', 2, 5, 2, 4,
-                    '25', 3, 2, 2, 5,
-                    '19', 3, 3, 2, 6,
-                    '22', 3, 4, 2, 7,
-                    '25', 3, 5, 2, 8
+                    '31', 2, 2, 1, 3,
+                    '29', 2, 3, 1, 4,
+                    '26', 2, 4, 1, 5,
+                    '27', 2, 5, 1, 6,
+                    '25', 2, 6, 2, 3,
+                    '19', 2, 7, 2, 4,
+                    '22', 2, 8, 2, 5,
+                    '25', 2, 9, 2, 6,
                 );
                 setColor( '#ffffdd' );
                 addBoxes(
-                    '15', 4, 2, 3, 1,
-                    '20', 4, 3, 3, 2,
-                    '5',  4, 4, 3, 3,
-                    '14', 4, 5, 3, 4,
-                    '9',  5, 2, 3, 5,
-                    '14', 5, 3, 3, 6,
-                    '20', 5, 4, 3, 7,
-                    '19', 5, 5, 3, 8
+                    '15', 3, 2, 3, 3,
+                    '20', 3, 3, 3, 4,
+                    '5',  3, 4, 3, 5,
+                    '14', 3, 5, 3, 6,
+                    '9',  3, 6, 4, 3,
+                    '14', 3, 7, 4, 4,
+                    '20', 3, 8, 4, 5,
+                    '19', 3, 9, 4, 6,
                 );
-                setReverse( true );
             } );
         </script>
     </head>
diff --git a/stack-1.html b/stack-1.html
index 469d381..a49db44 100644
--- a/stack-1.html
+++ b/stack-1.html
@@ -4,50 +4,59 @@
         <script>
             window.addEventListener( 'load', function () {
                 addBoxes(
-                    'Month',  0, 2, 0, 0,
-                    'Week',   1, 1, 1, 0,
-                    'Temp',   2, 0, 2, 0,
-                    'Humid',  6, 0, 3, 0
+                    '',       0, 0,     0, 0,
+                    '',       1, 0, -1000, 0,
+                    '',       2, 1,     1, 2,
+                    '',       2, 1,     2, 2,
+                    '',       3, 1,     3, 2,
+                    '',       3, 1,     4, 2,
+                    '',       2, 1,     5, 2,
+                    '',       2, 1,     6, 2,
+                    '',       3, 1,     7, 2,
+                    '',       3, 1,     8, 2,
+                    'Month',  0, 1,     0, 2,
+                    'Week',   1, 1,     0, 1,
+                    'Temp',   2, 0,     1, 0, { w2 : 4 },
+                    'Humid',  3, 0,     5, 0, { w2 : 4 },
                 );
                 setColor( '#dddddd' );
                 addBoxes(
-                    'Jan', 1, 2, 0, 1,
-                    'Feb', 1, 3, 0, 5,
+                    'Jan', 0, 2, 0, 3, { h1 : 4 },
+                    'Feb', 0, 6, 0, 4, { h1 : 4 },
                 );
                 setColor( '#ddffdd' );
                 addBoxes(
-                    '1', 2, 1, 1, 1,
-                    '2', 3, 1, 1, 2,
-                    '3', 4, 1, 1, 3,
-                    '4', 5, 1, 1, 4,
-                    '1', 6, 1, 1, 5,
-                    '2', 7, 1, 1, 6,
-                    '3', 8, 1, 1, 7,
-                    '4', 9, 1, 1, 8
+                    '1', 1, 2, 1, 1,
+                    '2', 1, 3, 2, 1,
+                    '3', 1, 4, 3, 1,
+                    '4', 1, 5, 4, 1,
+                    '1', 1, 6, 5, 1,
+                    '2', 1, 7, 6, 1,
+                    '3', 1, 8, 7, 1,
+                    '4', 1, 9, 8, 1,
                 );
                 setColor( '#ddddff' );
                 addBoxes(
-                    '31', 2, 2, 2, 1,
-                    '29', 3, 2, 2, 2,
-                    '26', 4, 2, 2, 3,
-                    '27', 5, 2, 2, 4,
-                    '25', 2, 3, 2, 5,
-                    '19', 3, 3, 2, 6,
-                    '22', 4, 3, 2, 7,
-                    '25', 5, 3, 2, 8
+                    '31', 2, 2, 1, 3,
+                    '29', 2, 3, 2, 3,
+                    '26', 2, 4, 3, 3,
+                    '27', 2, 5, 4, 3,
+                    '25', 2, 6, 1, 4,
+                    '19', 2, 7, 2, 4,
+                    '22', 2, 8, 3, 4,
+                    '25', 2, 9, 4, 4,
                 );
                 setColor( '#ffffdd' );
                 addBoxes(
-                    '15', 6, 2, 3, 1,
-                    '20', 7, 2, 3, 2,
-                    '5',  8, 2, 3, 3,
-                    '14', 9, 2, 3, 4,
-                    '9',  6, 3, 3, 5,
-                    '14', 7, 3, 3, 6,
-                    '20', 8, 3, 3, 7,
-                    '19', 9, 3, 3, 8
+                    '15', 3, 2, 5, 3,
+                    '20', 3, 3, 6, 3,
+                    '5',  3, 4, 7, 3,
+                    '14', 3, 5, 8, 3,
+                    '9',  3, 6, 5, 4,
+                    '14', 3, 7, 6, 4,
+                    '20', 3, 8, 7, 4,
+                    '19', 3, 9, 8, 4,
                 );
-                setReverse( true );
             } );
         </script>
     </head>