training

5 files changed, 196 insertions, 15 deletions

diff --git a/code/errorvis.js b/code/errorvis.js
index 9cd87f4..03c5eba 100644
--- a/code/errorvis.js
+++ b/code/errorvis.js
@@ -16,7 +16,7 @@ var ErrorVis = (function() {
         this.svgContainer
             .style("margin-top", "1.5em")
             .style("margin-bottom", "1em")
-            .style("height", "100%")
+            .style("height", "75%") // TODO find optimal height
             .style("width", "100%");
 
         this.spinner = this.container.append("div")
@@ -82,6 +82,7 @@ var ErrorVis = (function() {
             .domain(d3.extent(this.data));
 
         var xAxis = d3.svg.axis()
+            .tickFormat("")
             .scale(this.scalerX);
         var yAxis = d3.svg.axis()
             .orient("left")
diff --git a/code/weightvis.js b/code/weightvis.js
index 6e9fc1d..428d3ce 100644
--- a/code/weightvis.js
+++ b/code/weightvis.js
@@ -510,8 +510,8 @@ var NetVisualizer = (function() {
         this.reposition();
     };
 
-    NetVisualizer.prototype.visualActivate = function(inputs) {
-        var activations = this.activate(inputs);
+    NetVisualizer.prototype.visualActivate = function(inputs, step) {
+        var activations = this.activate(inputs, step);
         var flatActivations = [].concat.apply([], activations);
         var max = d3.max(flatActivations, Math.abs),
             min = d3.min(flatActivations, Math.abs);
@@ -521,10 +521,13 @@ var NetVisualizer = (function() {
             .style("fill", fNodeColor);
     };
 
-    NetVisualizer.prototype.activate = function(inputs) {
+    NetVisualizer.prototype.activate = function(inputs, step) {
         // assumes the sigmoid function is used as activation
         function activation(x) { return 1 / (1 + Math.exp(-x)); }
-        var weights = this.data[this.layout.data.batches-1][this.layout.data.epochs-1];
+        if (typeof(step) == "undefined") step = this.getSteps() - 1;
+        var batch = Math.floor(step / this.layout.data.epochs),
+            epoch = step % this.layout.data.epochs;
+        var weights = this.data[batch][epoch];
         var lastLayerOut = inputs;
         var activations = [inputs];
         var hasBias = false;
diff --git a/code/weightviswrapper.js b/code/weightviswrapper.js
index ca31916..52b60ed 100644
--- a/code/weightviswrapper.js
+++ b/code/weightviswrapper.js
@@ -17,7 +17,7 @@ var WeightVisWrapper = (function() {
         this.svgContainer
             .style("margin-top", "1.5em")
             .style("margin-bottom", "1em")
-            .style("height", "85%") // TODO find optimal height
+            .style("height", "75%") // TODO find optimal height
             .style("width", "100%");
 
         this.spinner = this.container.append("div")
@@ -96,7 +96,7 @@ var WeightVisWrapper = (function() {
             }
         });
         this.slider.attr("max", this.steps()-1);
-        this.slider.node().addEventListener("input", function() { self.jumpTo(self.value); });
+        this.slider.node().addEventListener("input", function() { self.jumpTo(this.value); });
         this.button.node().addEventListener("click", function toggle() {
             if (self.button.attr("data-pressed") != "true") {
                 var step = self.slider.node().value;
@@ -185,13 +185,13 @@ var WeightVisWrapper = (function() {
         return this.netVisualizer.getSteps();
     };
 
-    WeightVisWrapper.prototype.calculate = function(inputs) {
+    WeightVisWrapper.prototype.calculate = function(inputs, step) {
         // returns the final layer's outputs
-        return this.netVisualizer.activate(inputs).pop();
+        return this.netVisualizer.activate(inputs, step).pop();
     };
 
-    WeightVisWrapper.prototype.activate = function(inputs) {
-        this.netVisualizer.visualActivate(inputs);
+    WeightVisWrapper.prototype.activate = function(inputs, step) {
+        this.netVisualizer.visualActivate(inputs, step);
     };
 
     return WeightVisWrapper;
@@ -200,6 +200,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
+// TODO not steppable
 var VisIntegrater = (function() {
     function VisIntegrater(enterCb, leaveCb, selector) {
         var self = this;
diff --git a/index.css b/index.css
index d102771..e4d2096 100644
--- a/index.css
+++ b/index.css
@@ -17,10 +17,15 @@ body {
     opacity: 1;
 }
 .innerStep {
-    position: absolute;
     opacity: 0;
     transition: opacity 0.5s;
 }
+div.innerStep {
+    position: absolute;
+}
+p.stepped {
+    opacity: 1;
+}
 .lastInnerstep {
     opacity: 1;
 }
@@ -47,6 +52,10 @@ table.center {
 #boston-example .table-highlight {
     background-color: #82B1FF;
 }
+.highlight {
+    background-color: #82B1FF;
+}
+}
 
 .hidden {
     display: none;
diff --git a/index.html b/index.html
index 82c4966..9f29c09 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
     <script src="dep/material.min.js" type="text/javascript"></script>
     <script src="dep/emojione.min.js" type="text/javascript"></script>
     <script src="dep/impress.js" type="text/javascript"></script>
+    <script src="dep/mathjax/MathJax.js?config=TeX-MML-AM_SVG&locale=de" type="text/javascript"></script>
 
     <script src="code/weightvis.js" type="text/javascript"></script>
     <script src="code/weightviswrapper.js" type="text/javascript"></script>
@@ -28,6 +29,12 @@
         document.addEventListener("DOMContentLoaded", function() {
             impress().init();
 
+            MathJax.Hub.Config({
+                SVG: {
+                    scale: 150
+                }
+            });
+
             emojione.imageType = 'svg';
             emojione.sprites = true;
             emojione.imagePathSVGSprites = 'dep/emojione.sprites.svg';
@@ -63,7 +70,7 @@
                 .style("font-size", function() {
                     var lines = d3.select(this).selectAll("p")[0].length+1; // TODO a bit specific, may not work in all cases
                     if (lines<=1) return this.clientWidth/10 + "px";
-                    return this.clientHeight/10 + "px";
+                    return this.clientHeight/(lines*1.3) + "px"; // TODO magic numbers
                 });
             var scalePicture = function(d, i, me, extraRatio) {
                 // "extraRatio" might scale vertically
@@ -163,12 +170,15 @@
         <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>
+                <h3>Neuron &ndash; künstliches Neuron</h3>
                 <img class="scalepic-half" src="img/neuron.svg" alt="Schema Neuron" />
                 <img class="scalepic-half" src="img/kuenstliches_neuron.svg" alt="Schema eines künstlichen Neurons" />
+                <p>$$net = \sum_n (x_n \cdot w_n)$$</p>
+                <p>$$o = \frac{1}{1 + e^{-net}}$$</p>
+                <p>$$\Leftrightarrow o = \frac{1}{1 + e^{-\sum_n (x_n \cdot w_n)}}$$</p>
             </div>
             <div class="innerStep center">
-                <h3>Neuronales Netz - künstliches neuronales Netz</h3>
+                <h3>Neuronales Netz &ndash; künstliches neuronales Netz</h3>
                 <img class="scalepic-half" src="img/neuronales-netz.jpg" alt="Foto Neuron" />
                 <img class="scalepic-half" src="img/kuenstliches_neuronales_netz.png" alt="Mehrschichtiges Perzeptron" />
             </div>
@@ -208,11 +218,167 @@
             </script>
         </div>
 
+        <div class="step slide" data-x="6000" data-y="0" data-z="5000">
+            <h1>Ein künstliches neuronales Netz</h1>
+            <h3>Und jetzt?</h3>
+            <div class="innerStep scale center emoji">
+                <p style="font-size: inherit">13 gegebene Attribute :house_with_garden:</p>
+                <p style="font-size: inherit; font-style: italic;">crim, zn, indus, chas, nox, rm, age, dis, rad, tax, ptratio, b, lstat</p>
+                <p style="font-size: inherit;">1 gesuchtes Attribut :moneybag:</p>
+                <p style="font-size: inherit; font-style: italic;">medv</p>
+            </div>
+            <div class="innerStep emoji scale center">
+                <p style="font-size: inherit;">Eingabe (13 :game_die:)</p>
+                <p style="font-size: inherit;">&darr;</p>
+                <p style="font-size: inherit;">künstliches neuronales Netz (:sparkles:)</p>
+                <p style="font-size: inherit;">&darr;</p>
+                <p style="font-size: inherit;">Ausgabe (1 :moneybag:)</p>
+            </div>
+        </div>
+
+        <div class="step slide" data-x="6000" data-y="2000" data-z="2500">
+            <h3>Die Netzstruktur</h3>
+            <div class="visContainer"></div>
+            
+            <script type="text/javascript">
+                (function() {
+                    var mocker = new WeightVisWrapper();
+                    new VisIntegrater(function(c) {
+                        mocker.mock([13, 1], function() {
+                            mocker.openIn(c, false);
+                        });
+                    }, function(c) {
+                        mocker.remove(c);
+                    }, ".visContainer");
+                })();
+            </script>
+        </div>
+        <div class="step slide" data-x="6000" data-y="4000" data-z="2500">
+            <h3>Nö. Anders.</h3>
+            <div class="visContainer"></div>
+            
+            <script type="text/javascript">
+                (function() {
+                    var mocker = new WeightVisWrapper();
+                    new VisIntegrater(function(c) {
+                        mocker.mock([13, 11, 1], function() {
+                            mocker.openIn(c, false);
+                        });
+                    }, function(c) {
+                        mocker.remove(c);
+                    }, ".visContainer");
+                })();
+            </script>
+        </div>
+
+        <div class="step slide" data-x="6500" data-y="4000" data-z="2000" data-rotate-y="90">
+            <h3>Problem!</h3>
+            <div class="scale center">
+                <p style="font-size: inherit;">1.13081, <span class="highlight">0</span>, 8.14, <span class="highlight">0</span>, <span class="highlight">0.538</span>, 5.713, 94.1, 4.233, 4, 307, 21, <span class="highlight">360.17</span>, 22.6</p>
+                <p>$$o = \frac{1}{1 + e^{-\sum_n (\mathbf{x_n \cdot w_n})}}$$</p>
+                <p>\begin{align}
+                    &(1)\quad 0 \cdot w_n = 0 \\
+                    &(2)\quad 0.538 \ll 360.17 
+                \end{align}</p>
+                <p class="innerStep">$$(1)\quad net = (x_n + 1 \cdot b_n) \cdot w_n$$</p>
+                <p class="innerStep">$$(2)\quad x' = \frac{x - \min(x)}{\max(x) - \min(x)}$$
+                $$\implies 0 \leq x' \leq 1$$</p>
+            </div>
+        </div>
+
+        <div class="step slide" data-x="6000" data-y="6000" data-z="2500">
+            <h3>(Eine geht noch.)</h3>
+            <p style="text-align: center; margin-top: 1.5em;">
+                Berechneter MEDV-Wert: <span class="calculated">lade…</span> - Erwarteter MEDV-Wert: <span class="expected">lade…</span>
+                <button class="mdl-button mdl-js-button btn-calc"><i class="material-icons">redo</i></button>
+            </p>
+            <div class="visContainer"></div>
+            
+            <script type="text/javascript">
+                (function() {
+                    var mocker = new WeightVisWrapper();
+                    new VisIntegrater(function(c) {
+                        weightsWrapper.afterLoad(function() {
+                            weightsWrapper.openIn(c, true);
+                            weightsWrapper.jumpTo(0);
+                            function calc() {
+                                var row = Math.floor(Math.random()*bostonset.length()),
+                                    inputs = bostonset.inputs(row),
+                                    calculated = bostonset.asOutput(weightsWrapper.calculate(inputs, 0)[0]),
+                                    expected = bostonset.expectedOutput(row);
+                                    d3.select(c).select(".calculated").text(calculated.toString());
+                                    d3.select(c).select(".expected").text(expected.toString());
+                            }
+                            calc();
+                            d3.select(c).select(".btn-calc").on("click", calc);
+                        });
+                    }, function(c) {
+                        weightsWrapper.remove(c);
+                    }, ".visContainer");
+                })();
+            </script>
+        </div>
+
+        <div class="step slide" data-x="8000" data-y="0" data-z="5000">
+            <h3 class="emoji">Training :cookie:</h3>
+            <p class="center">$$\delta w_{k,j} = l \cdot (t_k - o_k) \sum_l {w_{l, k} \cdot \delta_l} \cdot x_j$$</p>
+            <div class="center scale emoji">
+                <p style="font-size: inherit;">:computer: :hammer:</p>
+                <p style="font-size: inherit;" class="emoji innerStep">
+                   $$430 \cdot 300 = 129 000$$
+                    :hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer:</p>
+            </div>
+        </div>
+
+        <div class="step slide" data-x="8000" data-y="2000" data-z="2500">
+            <h3>Trainingsverlauf</h3>
+            <div class="visContainer"></div>
+
+            <script type="text/javascript">
+                (function() {
+                    new VisIntegrater(function(c) {
+                        weightsWrapper.afterLoad(function() {
+                            weightsWrapper.openIn(c, true);
+                            setTimeout(function(){ weightsWrapper.animate(10, 10); }, 1000);
+                        });
+                    }, function(c) {
+                        weightsWrapper.remove(c);
+                    }, ".visContainer");
+                })();
+            </script>
+        </div>
+
+        <div class="step slide" data-x="8000" data-y="4000" data-z="2500">
+            <h3>Fehlerverlauf</h3>
+            <div class="errorContainer"></div>
+
+            <script type="text/javascript">
+                (function() {
+                    new VisIntegrater(function(c) {
+                        errorVis.afterLoad(function() {
+                            errorVis.openIn(c, true);
+                        });
+                    }, function(c) {
+                        errorVis.remove(c);
+                    }, ".errorContainer");
+                })();
+            </script>
+        </div>
+
+        <div class="step slide" data-x="10000" data-y="0" data-z="5000">
+            <h3 class="emoji">Test :open_mouth:</h3>
+        </div>
+
+        <div class="step slide" data-x="0" data-y="0" data-z="0" data-rotate-x="90">
+            <h1 class="emoji">:blush:</h1>
+        </div>
+
         <div id="overview" class="step" data-x="2000" data-y="3000" data-scale="20">
             <!-- overview -->
         </div>
 
         <!-- v - alter Code unten - v -->
+        <!--
         <div class="step slide" data-x="9500" data-y="0" data-z="1000">
             <div>
                 <h3>Ein leeres Netz</h3>
@@ -310,6 +476,7 @@
         <div class="step slide" data-x="0" data-y="0" data-z="0" data-rotate-x="90">
             <h1 class="emoji">:blush:</h1>
         </div>
+        -->
     </div>
 </body>
 </html>