add boston slide

4 files changed, 66 insertions, 2 deletions

diff --git a/code/bostonset.js b/code/bostonset.js
index 50b9d38..f5f1264 100644
--- a/code/bostonset.js
+++ b/code/bostonset.js
@@ -9,6 +9,7 @@ var Bostonset = (function() {
         this.dataScaler.setScales([[0.00632, 0.0, 0.46, 0.0, 0.385, 3.561, 2.9, 1.1296, 1.0, 187.0, 12.6, 0.32, 1.73], [88.9762, 100.0, 27.74, 1.0, 0.871, 8.78, 100.0, 12.1265, 24.0, 711.0, 22.0, 396.9, 37.97]]);
         this.targetScaler = new MinMaxScaler();
         this.targetScaler.setScales([5.0, 50.0]);
+        this.readyHooks = [];
     }
 
     Bostonset.prototype.load = function(url) {
@@ -22,15 +23,33 @@ var Bostonset = (function() {
                 }
                 self.data.push(arr);
             });
+            self.readyHooks.forEach(function(hook) { hook(); });
         });
     };
 
+    Bostonset.prototype.afterLoad = function(cb) {
+        if (!this.ready) {
+            this.readyHooks.push(cb);
+        } else {
+            cb();
+        }
+    };
+
+    Bostonset.prototype.attributes = function() {
+        console.log(attrs);
+        return attrs;
+    };
+
     Bostonset.prototype.length = function() {
         return this.data.length;
     };
 
+    Bostonset.prototype.rawData = function(row) {
+        return this.data[row];
+    };
+
     Bostonset.prototype.rawInputs = function(row) {
-        return this.data[row].slice(0, -1); // leave out MEDV
+        return this.rawData(row).slice(0, -1); // leave out MEDV
     };
 
     Bostonset.prototype.inputs = function(row) {
diff --git a/code/weightviswrapper.js b/code/weightviswrapper.js
index 1f17b55..94f6306 100644
--- a/code/weightviswrapper.js
+++ b/code/weightviswrapper.js
@@ -199,6 +199,7 @@ var WeightVisWrapper = (function() {
 
 /* helps with impress.js' stepenter/stepleave events */
 // TODO move into its own file
+// TODO must be a step's direct child
 var VisIntegrater = (function() {
     function VisIntegrater(enterCb, leaveCb, selector) {
         var self = this;
diff --git a/index.css b/index.css
index ae81e85..13e9525 100644
--- a/index.css
+++ b/index.css
@@ -51,6 +51,9 @@ p.center {
     top: 50%;
     bottom: 50%;
 }
+table.center {
+    margin: auto;
+}
 
 .hidden {
     display: none;
@@ -64,3 +67,9 @@ p.center {
 .axis text {
     font-size: large;
 }
+
+#overview { display: none; }
+.impress-on-overview .step {
+    opacity: 1;
+    cursor: pointer;
+}
diff --git a/index.html b/index.html
index 078708a..d0e7b28 100644
--- a/index.html
+++ b/index.html
@@ -140,7 +140,7 @@
             </div>
         </div>
 
-        <div class="step slide" data-x="4000" data-y="0" data-z="2500">
+        <div class="step slide" data-x="2000" data-y="6000" data-z="2500">
             <h1>Künstliche neuronale Netze</h1>
             <div class="innerStep stepped lastInnerstep center">
                 <h3>Neuron - künstliches Neuron</h3>
@@ -153,6 +153,41 @@
                 <img style="width: 60%;" src="img/kuenstliches_neuronales_netz.png" alt="Mehrschichtiges Perzeptron" />
             </div>
         </div>
+
+        <div class="step slide" data-x="4000" data-y="0" data-z="5000">
+            <h1>Das Problem &ndash; Die Boston-Häuserdatenreihe</h1>
+            <div class="center">
+                <p class="emoji scale">:homes:</p>
+                <table id="boston-example"></table>
+            </div>
+            <script type="text/javascript">
+                bostonset.afterLoad(function() {
+                    var table = d3.select("#boston-example");
+                    table.attr("class", "center mdl-data-table mdl-js-data-table");
+                    var htr = table.append("thead").append("tr")
+                    bostonset.attributes().forEach(function(attr) {
+                        var th = htr.append("th")
+                            .html(attr)
+                            .attr("class", "mdl-data-table__cell--non-numeric");
+                        if (attr == "medv") th.attr("class", function(d) { return d3.select(this).attr("class") + " table-highlight"; });
+                    });
+                    // TODO highlight medv
+                    table.append("tbody");
+                    for(c=0; c<8; c++) {
+                        var row = Math.floor(Math.random()*bostonset.length());
+                        var tr = table.select("tbody").append("tr");
+                        bostonset.rawData(row).forEach(function(val) {
+                            tr.append("td").text(val);
+                        });
+                    }
+                    componentHandler.upgradeElement(table.node());
+                });
+            </script>
+        </div>
+
+        <div id="overview" class="step" data-x="2000" data-y="2500" data-scale="12">
+            <!-- overview -->
+        </div>
 <!--
         <div class="mdl-layout mdl-js-layout step slide" data-x="-1000" data-y="0" data-z="1000">
             <h1 class="mdl-layout__header">Biologie</h1>