From ed6baafb9a3c2fd8b697a056562bf86e69a8ad69 Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Sun, 10 Apr 2016 13:18:05 +0200
Subject: move slides closer together

---
 index.html | 384 ++++++++++++++++++++++++++++++-------------------------------
 1 file changed, 192 insertions(+), 192 deletions(-)

diff --git a/index.html b/index.html
index 39cb2f3..f523d71 100644
--- a/index.html
+++ b/index.html
@@ -103,14 +103,14 @@
 
     <div id="impress" data-width="800" data-height="600">
         <!-- TODO Fortschrittsbalken unten? -->
-        <div id="title" class="step slide" data-x="0" data-y="0" data-z="5000">
+        <div id="title" class="step slide" data-x="0" data-y="0" data-z="1000">
             <h1>Künstliche neuronale Netze</h1>
             <!-- TODO center oder Bild -->
             <h2>38 Gewichte in 19 Minuten</h2>
         </div>
 
         <!-- TODO Inhaltsübersicht -->
-        <div id="io" class="step slide" data-x="2000" data-y="0" data-z="5000">
+        <div id="io" class="step slide" data-x="1000" data-y="0" data-z="1000">
             <h1>Von der Eingabe zur Ausgabe</h1>
             <div class="innerStep stepped lastInnerstep center">
                 <h3>Das ist Kitty.</h3>
@@ -140,51 +140,51 @@
             </div>
         </div>
 
-        <div id="io-human" class="step slide" data-x="2000" data-y="2000" data-z="2500">
-            <h1>Die Informationsverarbeitung im Gehirn</h1>
-            <!-- TODO margins -->
-            <div class="emoji scale center">
-                <p style="font-size: inherit;">Eingabe (:tophat:)</p>
-                <p style="font-style: italic; font-size: 75%;">Rezeptor</p>
-                <p style="font-size: inherit;">&darr;</p>
-                <p style="font-size: inherit;">Gehirn (:sparkles:)</p>
-                <p style="font-style: italic; font-size: 75%;">neuronales Netz</p>
-                <p style="font-size: inherit;">&darr;</p>
-                <p style="font-size: inherit;">Ausgabe (:heart_eyes_cat:)</p>
-                <p style="font-style: italic; font-size: 75%;">Effektor</p>
+            <div id="io-human" class="step slide" data-x="1000" data-y="1000" data-z="0">
+                <h1>Die Informationsverarbeitung im Gehirn</h1>
+                <!-- TODO margins -->
+                <div class="emoji scale center">
+                    <p style="font-size: inherit;">Eingabe (:tophat:)</p>
+                    <p style="font-style: italic; font-size: 75%;">Rezeptor</p>
+                    <p style="font-size: inherit;">&darr;</p>
+                    <p style="font-size: inherit;">Gehirn (:sparkles:)</p>
+                    <p style="font-style: italic; font-size: 75%;">neuronales Netz</p>
+                    <p style="font-size: inherit;">&darr;</p>
+                    <p style="font-size: inherit;">Ausgabe (:heart_eyes_cat:)</p>
+                    <p style="font-style: italic; font-size: 75%;">Effektor</p>
+                </div>
             </div>
-        </div>
 
-        <div id="neuron" class="step slide" data-x="2000" data-y="4000" data-z="2500">
-            <h1>Neuronale Netze</h1>
-            <div class="innerStep stepped lastInnerstep center">
-                <h3>Ein Neuron</h3>
-                <img class="scalepic" src="img/neuron.svg" alt="Schema Neuron">
+            <div id="neuron" class="step slide" data-x="1000" data-y="2000" data-z="0">
+                <h1>Neuronale Netze</h1>
+                <div class="innerStep stepped lastInnerstep center">
+                    <h3>Ein Neuron</h3>
+                    <img class="scalepic" src="img/neuron.svg" alt="Schema Neuron">
+                </div>
+                <div class="innerStep center">
+                    <h3>Ein Neuronales Netz</h3>
+                    <img class="scalepic" src="img/neuronales-netz.jpg" alt="Foto Neuron">
+                </div>
             </div>
-            <div class="innerStep center">
-                <h3>Ein Neuronales Netz</h3>
-                <img class="scalepic" src="img/neuronales-netz.jpg" alt="Foto Neuron">
-            </div>
-        </div>
 
-        <div id="neuronalnet" 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 &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 &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 id="neuronalnet" class="step slide" data-x="1000" data-y="3000" data-z="0">
+                <h1>Künstliche neuronale Netze</h1>
+                <div class="innerStep stepped lastInnerstep center">
+                    <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 &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>
             </div>
-        </div>
 
-        <div id="boston" class="step slide" data-x="4000" data-y="0" data-z="5000">
+        <div id="boston" class="step slide" data-x="2000" data-y="0" data-z="1000">
             <h1>Das Problem &ndash; Die Boston-Häuserdatenreihe</h1>
             <div class="center">
                 <p class="emoji scale">:homes:</p>
@@ -218,7 +218,7 @@
             </script>
         </div>
 
-        <div id="boston-net" class="step slide" data-x="6000" data-y="0" data-z="5000">
+        <div id="boston-net" class="step slide" data-x="3000" data-y="0" data-z="1000">
             <h1>Ein künstliches neuronales Netz</h1>
             <h3>Und jetzt?</h3>
             <div class="innerStep scale center emoji">
@@ -236,94 +236,94 @@
             </div>
         </div>
 
-        <div id="boston-simple" 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 id="boston-hidden" 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 id="boston-simple" class="step slide" data-x="3000" data-y="1000" data-z="0">
+                <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 id="boston-hidden" class="step slide" data-x="3000" data-y="2000" data-z="0">
+                <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 id="biasissue" 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 id="biasissue" class="step slide" data-x="3500" data-y="2000" data-z="-500" 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>
 
-        <div id="boston-bias" class="step slide" data-x="6000" data-y="6000" data-z="2500">
-            <h3>(Eine geht noch.)</h3>
-            <p style="text-align: center; font-size: 175%;">
-                    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 inputs, calculated, expected;
-                                do {
-                                    var row = Math.floor(Math.random()*bostonset.length());
-                                    inputs = bostonset.inputs(row);
-                                    calculated = bostonset.asOutput(weightsWrapper.calculate(inputs, 0)[0]);
-                                    expected = bostonset.expectedOutput(row);
-                                    console.log("calc", calculated, expected);
-                                } while (Math.abs(calculated - expected) < 15);
-                                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 id="boston-bias" class="step slide" data-x="3000" data-y="3000" data-z="0">
+                <h3>(Eine geht noch.)</h3>
+                <p style="text-align: center; font-size: 175%;">
+                        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 inputs, calculated, expected;
+                                    do {
+                                        var row = Math.floor(Math.random()*bostonset.length());
+                                        inputs = bostonset.inputs(row);
+                                        calculated = bostonset.asOutput(weightsWrapper.calculate(inputs, 0)[0]);
+                                        expected = bostonset.expectedOutput(row);
+                                        console.log("calc", calculated, expected);
+                                    } while (Math.abs(calculated - expected) < 15);
+                                    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 id="training" class="step slide" data-x="8000" data-y="0" data-z="5000">
+        <div id="training" class="step slide" data-x="4000" data-y="0" data-z="1000">
             <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">
@@ -334,42 +334,42 @@
             </div>
         </div>
 
-        <div id="trainhistory" 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 id="errorhistory" class="step slide" data-x="8000" data-y="4000" data-z="2500">
-            <h3>Fehlerverlauf</h3>
-            <div class="errorContainer"></div>
+            <div id="trainhistory" class="step slide" data-x="4000" data-y="1000" data-z="0">
+                <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>
 
-            <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 id="errorhistory" class="step slide" data-x="4000" data-y="2000" data-z="0">
+                <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 id="test" class="step slide" data-x="10000" data-y="0" data-z="5000">
+        <div id="test" class="step slide" data-x="5000" data-y="0" data-z="1000">
             <h3 class="emoji">Test :open_mouth:</h3>
             <div class="visContainer"></div>
             <p style="text-align: center; font-size: 175%;">
@@ -404,45 +404,45 @@
             </script>
         </div>
 
-        <div id="conclusion" class="step slide" data-x="12000" data-y="0" data-z="5000">
-            <h3 class="emoji">Fazit :thinking:</h3>
-            <div class="visContainer"></div>
-            <script type="text/javascript">
-                new VisIntegrater(function(c) {
-                    weightsWrapper.afterLoad(function() {
-                        weightsWrapper.jumpTo(weightsWrapper.steps()-1);
-                        weightsWrapper.openIn(c, false);
-                        function calc() {
-                            var inputs, calculated, expected;
-                            do {
-                                var row = Math.floor(Math.random()*bostonset.length());
-                                inputs = bostonset.inputs(row);
-                                calculated = bostonset.asOutput(weightsWrapper.calculate(inputs)[0]);
-                                expected = bostonset.expectedOutput(row);
-                                console.log("calc", calculated, expected);
-                            } while (Math.abs(calculated - expected) > 3);
-                            d3.select(c).select(".calculated").text(calculated.toString());
-                            d3.select(c).select(".expected").text(expected.toString());
-                            weightsWrapper.activate(inputs);
-                        }
-                        calc();
-                        d3.select(c).select(".btn-calc").on("click", calc);
-                    });
-                }, function(c) {
-                    weightsWrapper.remove(c);
-                }, ".visContainer");
-            </script>
-        </div>
+            <div id="conclusion" class="step slide" data-x="6000" data-y="0" data-z="1000">
+                <h3 class="emoji">Fazit :thinking:</h3>
+                <div class="visContainer"></div>
+                <script type="text/javascript">
+                    new VisIntegrater(function(c) {
+                        weightsWrapper.afterLoad(function() {
+                            weightsWrapper.jumpTo(weightsWrapper.steps()-1);
+                            weightsWrapper.openIn(c, false);
+                            function calc() {
+                                var inputs, calculated, expected;
+                                do {
+                                    var row = Math.floor(Math.random()*bostonset.length());
+                                    inputs = bostonset.inputs(row);
+                                    calculated = bostonset.asOutput(weightsWrapper.calculate(inputs)[0]);
+                                    expected = bostonset.expectedOutput(row);
+                                    console.log("calc", calculated, expected);
+                                } while (Math.abs(calculated - expected) > 3);
+                                d3.select(c).select(".calculated").text(calculated.toString());
+                                d3.select(c).select(".expected").text(expected.toString());
+                                weightsWrapper.activate(inputs);
+                            }
+                            calc();
+                            d3.select(c).select(".btn-calc").on("click", calc);
+                        });
+                    }, function(c) {
+                        weightsWrapper.remove(c);
+                    }, ".visContainer");
+                </script>
+            </div>
 
-        <div id="sources" class="step slide" data-x="14000" data-y="0" data-z="5000">
+        <div id="sources" class="step slide" data-x="7000" data-y="0" data-z="1000">
             <h3>Quellen, Lizenzen &amp; mehr</h3>
         </div>
 
-        <div id="thanx" class="step slide" data-x="14000" data-y="2000" data-z="5000">
+        <div id="thanx" class="step slide" data-x="7000" data-y="1000" data-z="1000">
             <h1 class="emoji">:blush:</h1>
         </div>
 
-        <div id="overview" class="step" data-x="7000" data-y="3000" data-scale="24">
+        <div id="overview" class="step" data-x="3500" data-y="1500" data-scale="11">
             <!-- overview -->
         </div>
     </div>
-- 
cgit v1.3.1