first impress-ions; add error vis

5 files changed, 276 insertions, 13 deletions

diff --git a/code/errorvis.js b/code/errorvis.js
new file mode 100644
index 0000000..9cd87f4
--- /dev/null
+++ b/code/errorvis.js
@@ -0,0 +1,126 @@
+var ErrorVis = (function() {
+    var margins = {
+        "top": 40,
+        "bottom": 40,
+        "left": 40,
+        "right": 40
+    };
+
+    function ErrorVis() {
+        this.container = d3.select("body").append("div").remove();
+        this.svgContainer = this.container.append("div");
+        this.svg = this.svgContainer.append("svg");
+        this.ready = false;
+        this.readyHooks = [];
+
+        this.svgContainer
+            .style("margin-top", "1.5em")
+            .style("margin-bottom", "1em")
+            .style("height", "100%")
+            .style("width", "100%");
+
+        this.spinner = this.container.append("div")
+            .attr("class", "mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active spinner")
+            .style("position", "absolute")
+            .style("left", "50%")
+            .style("top", "50%");
+        componentHandler.upgradeElement(this.spinner.node());
+    }
+
+    ErrorVis.prototype.addPlaceholder = function(el) {
+        el.appendChild(this.spinner.node().cloneNode(true));
+    };
+
+    ErrorVis.prototype.afterLoad = function(cb) {
+        if (!this.ready) {
+            this.readyHooks.push(cb);
+        } else {
+            cb();
+        }
+    };
+
+    ErrorVis.prototype.load = function(url, callback) {
+        var self = this;
+        d3.json(url)
+            .get(function(e, json) {
+                if (e) console.log(e);
+                self.data = Object.keys(json).map(function(k) { return parseFloat(json[k]); });
+                self.ready = true;
+                callback();
+                self.readyHooks.forEach(function(hook) { hook(); });
+            });
+    };
+
+    ErrorVis.prototype.openIn = function(el) {
+        d3.select(el).select(".spinner").remove();
+        el.appendChild(this.svgContainer.node());
+        this.reposition();
+    };
+
+    ErrorVis.prototype.remove = function(el) {
+        this.svgContainer.node().parentNode.appendChild(this.spinner.node().cloneNode(true));
+        this.svgContainer.node().parentNode.removeChild(this.svgContainer.node());
+    };
+
+    ErrorVis.prototype.reposition = function() {
+        var self = this;
+        // TODO may not need to recreate everything
+        this.svg.remove();
+        this.svg = this.svgContainer.append("svg");
+
+        var width = parseInt(this.svgContainer.style("width"))   || 800,
+            height = parseInt(this.svgContainer.style("height")) || 600;
+        this.svg
+            .style("width", width)
+            .style("height", height);
+
+        this.scalerX = d3.scale.linear()
+            .range([margins.left, width-margins.right])
+            .domain([0, this.data.length]);
+        this.scalerY = d3.scale.linear()
+            .range([height-margins.top, margins.bottom])
+            .domain(d3.extent(this.data));
+
+        var xAxis = d3.svg.axis()
+            .scale(this.scalerX);
+        var yAxis = d3.svg.axis()
+            .orient("left")
+            .scale(this.scalerY);
+
+        var gy = this.svg.append("g")
+            .attr("transform", "translate(" + margins.left + ", 0)")
+            .attr("class", "axis")
+            .call(yAxis);
+        var gx = this.svg.append("g")
+            .attr("transform", "translate(0, " + (height-margins.bottom) + ")")
+            .attr("class", "axis")
+            .call(xAxis);
+
+        var line = d3.svg.line()
+            .x(function(d, i) { return self.scalerX(i); })
+            .y(function(d) { return self.scalerY(d); });
+
+        this.svg.append("path")
+            .attr("d", line(this.data))
+            .attr("stroke", "#673ab7")
+            .attr("stroke-width", 5)
+            .attr("fill", "none");
+
+        this.marker = this.svg.append("circle")
+            .attr("display", "none")
+            .attr("r", 10)
+            .attr("fill", "#2962ff");
+    };
+
+    ErrorVis.prototype.showMarker = function(step) {
+        this.marker.style("display", "inherit");
+        this.marker.attr("cx", this.scalerX(step));
+        this.marker.attr("cy", this.scalerY(this.data[step]));
+    };
+
+    ErrorVis.prototype.hideMarker = function() {
+        this.marker.style("display", "none");
+    };
+
+    return ErrorVis;
+})();
diff --git a/code/weightviswrapper.js b/code/weightviswrapper.js
index eec2a84..ad33092 100644
--- a/code/weightviswrapper.js
+++ b/code/weightviswrapper.js
@@ -1,3 +1,4 @@
+// TODO rename classes (weightVis etc.)
 var WeightVisWrapper = (function() {
     var attributeNames = 
         ["CRIM", "ZN", "INDUS", "CHAS", "NOX", "RM", "AGE", "DIS", "RAD", "TAX", "PTRATIO", "B", "LSTAT"];
@@ -136,8 +137,6 @@ var WeightVisWrapper = (function() {
         this.svgContainer.node().parentNode.removeChild(this.controlContainer.node());
         this.svgContainer.node().parentNode.appendChild(this.spinner.node().cloneNode(true));
         this.svgContainer.node().parentNode.removeChild(this.svgContainer.node());
-        this.container.node().appendChild(this.controlContainer.node());
-        this.container.node().appendChild(this.svgContainer.node());
         this.netVisualizer.stopAnimation();
         this.slider.node().MaterialSlider.change(0);
     };
@@ -162,10 +161,10 @@ var WeightVisWrapper = (function() {
 
 /* helps with impress.js' stepenter/stepleave events */
 var VisIntegrater = (function() {
-    function VisIntegrater(enterCb, leaveCb) {
+    function VisIntegrater(enterCb, leaveCb, selector) {
         var self = this;
         this.slide = document.currentScript.parentElement;
-        this.container = d3.select(this.slide).select(".visContainer");
+        this.container = d3.select(this.slide).select(selector);
         this.slide.addEventListener("impress:stepenter", function() {
             enterCb(self.slide);
         });
diff --git a/dep/impress.js b/dep/impress.js
index 2529e26..8115af1 100644
--- a/dep/impress.js
+++ b/dep/impress.js
@@ -553,15 +553,33 @@
             var prev = steps.indexOf( activeStep ) - 1;
             prev = prev >= 0 ? steps[ prev ] : steps[ steps.length-1 ];
             
+            // when backing through a slide, clear its inner steps
+            $$('.innerStep.stepped', activeStep).forEach( function (elem) {
+                elem.classList.remove('stepped');
+            });
+            
             return goto(prev);
         };
         
+        var inner = {
+            next: function () {
+                var innerNext = activeStep.querySelector('.innerStep:not(.stepped)');
+                innerNext.classList.add('stepped');
+            }
+        };
+        
         // `next` API function goes to next step (in document order)
         var next = function () {
-            var next = steps.indexOf( activeStep ) + 1;
-            next = next < steps.length ? steps[ next ] : steps[ 0 ];
+            // if there are unshown inner steps, show next one instead of next slide
+            if(activeStep.querySelectorAll('.innerStep:not(.stepped)').length) {
+                inner.next();
+                triggerEvent(activeStep, "impress:innerstep");
+            } else {
+                var next = steps.indexOf( activeStep ) + 1;
+                next = next < steps.length ? steps[ next ] : steps[ 0 ];
             
-            return goto(next);
+                return goto(next);
+            }
         };
         
         // Adding some useful classes to step elements.
diff --git a/index.css b/index.css
index 62639f4..ae81e85 100644
--- a/index.css
+++ b/index.css
@@ -23,3 +23,44 @@ time, mark, audio, video {
 h1, h2, h3, h4, h5, h6 {
     text-align: center;
 }
+
+.step {
+    opacity: 0;
+    transition: opacity 1s;
+}
+.step.active {
+    opacity: 1;
+}
+.innerStep {
+    position: absolute;
+    opacity: 0;
+    transition: opacity 0.5s;
+}
+.lastInnerstep {
+    opacity: 1;
+}
+
+.center {
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: auto;
+    text-align: center;
+}
+p.center {
+    top: 50%;
+    bottom: 50%;
+}
+
+.hidden {
+    display: none;
+}
+
+.axis path, .axis line {
+    fill: none;
+    stroke: rgba(0, 0, 0, 0.87);
+    stroke-width: 3;
+}
+.axis text {
+    font-size: large;
+}
diff --git a/index.html b/index.html
index 8f6bb35..972e889 100644
--- a/index.html
+++ b/index.html
@@ -14,9 +14,11 @@
 
     <script src="code/weightvis.js" type="text/javascript"></script>
     <script src="code/weightviswrapper.js" type="text/javascript"></script>
+    <script src="code/errorvis.js" type="text/javascript"></script>
 
     <script type="text/javascript">
         var weightsWrapper = new WeightVisWrapper();
+        var errorVis = new ErrorVis();
 
         document.addEventListener("DOMContentLoaded", function() {
             impress().init();
@@ -27,6 +29,14 @@
             weightsWrapper.load("data/weights.json", function() {
                 weightsWrapper.reposition();
             });
+
+            d3.selectAll(".errorContainer")[0].forEach(function(el) {
+                errorVis.addPlaceholder(el.parentNode);
+            });
+            errorVis.load("data/error.json", function() {
+                //errorVis.reposition();
+            });
+
             sizeSlides();
         }, false);
 
@@ -37,14 +47,83 @@
                 .style("height", parseInt(window.innerHeight) * 0.9 + "px");
         };
         window.addEventListener("resize", sizeSlides);
+
+        document.addEventListener("impress:innerstep", function(e) {
+            d3.selectAll(".lastInnerstep")[0].forEach(function(ist) { ist.classList.remove("lastInnerstep"); });
+            var stepped = d3.select(e.target).selectAll(".stepped")[0];
+            stepped[stepped.length-1].classList.add("lastInnerstep");
+        });
     </script>
 
     <div id="impress">
-        <div class="step slide" data-x="0" data-y="0">
-            <div class="title mdl-layout mdl-js-layout">
-                <h1 class="mdl-layout__header">Künstliche neuronale Netze</h1>
-                <h3>38 Gewichte in 15 Minuten</h3>
+        <div class="mdl-layout mdl-js-layout step slide" data-x="0" data-y="0" data-z="5000">
+            <h1 class="mdl-layout__header">Künstliche neuronale Netze</h1>
+            <h2>38 Gewichte in 20 Minuten</h2>
+        </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>
+            <div class="innerStep stepped lastInnerstep center">
+                <h3>Der Mensch und die Maschine.</h3>
+                <p style="font-size: 2500%">
+                    <i style="font-size: 100%;" class="material-icons">accessibility</i>
+                    🖥
+                </p>
             </div>
+            <div class="innerStep center">
+                <h3>Wahrnehmung</h3>
+                <p>
+                    <i style="font-size: 800%;" class="material-icons">remove_red_eye</i>
+                </p>
+                <p>
+                    <span style="font-size: 500%;">Rezeptor</span>
+                </p>
+            </div>
+            <div class="innerStep center">
+                <h3>Reaktion.</h3>
+                <p>
+                    <i style="font-size: 2500%;" class="material-icons">directions_walk</i>
+                </p>
+                <p>
+                    <span style="font-size: 500%;">Effektor</span>
+                </p>
+            </div>
+        </div>
+
+        <div class="mdl-layout mdl-js-layout step slide" data-x="0" data-y="0" data-z="1000">
+            <h1 class="mdl-layout__header">Abstraktion eines Individuums</h1>
+            <p class="innerStep stepped lastInnerstep center" style="font-size: 500%;">
+                Wahrnehmung &#x279e; 
+                <i style="font-size: 100%;" class="material-icons">help_outline</i>
+                &#x279e; Reaktion
+            </p>
+            <p class="innerStep center" style="font-size: 500%;">
+                Eingabe &#x279e; &#x2728; &#x279e; Ausgabe
+            </p>
+        </div>
+
+        <!-- TODO x' besser verteilen -->
+        <div class="mdl-layout mdl-js-layout step slide" data-x="1000" data-y="0" data-z="1000">
+            <h1 class="mdl-layout__header">Abstraktion der Ein- und Ausgabe</h1>
+        </div>
+
+        <div class="step slide mdl-layout mdl-js-layout" data-x="0" data-y="1000">
+            <div class="mdl-layout__header">
+                <h2>Der Fehler im Verlauf</h2>
+            </div>
+
+            <div class="errorContainer"></div>
+
+            <script type="text/javascript">
+                new VisIntegrater(function(c) {
+                    errorVis.afterLoad(function() {
+                        errorVis.openIn(c);
+                        errorVis.showMarker(203);
+                    });
+                }, function(c) {
+                    errorVis.remove(c);
+                }, ".errorContainer");
+            </script>
         </div>
 
         <div class="step slide mdl-layout mdl-js-layout" data-x="0" data-y="1000">
@@ -62,7 +141,7 @@
                     });
                 }, function(c) {
                     weightsWrapper.remove(c);
-                });
+                }, ".visContainer");
             </script>
         </div>
 
@@ -81,7 +160,7 @@
                     });
                 }, function(c) {
                     weightsWrapper.remove(c);
-                });
+                }, ".visContainer");
             </script>
         </div>
     </div>