simplify weightVis usage

3 files changed, 49 insertions, 124 deletions

diff --git a/code/weightvis.js b/code/weightvis.js
index f777755..5265cee 100644
--- a/code/weightvis.js
+++ b/code/weightvis.js
@@ -288,12 +288,13 @@ var NetVisualizer = (function() {
     };
 
     NetVisualizer.prototype.stopAnimation = function() {
-        this.animator.stop();
+        if (this.animator) this.animator.stop();
     };
 
     NetVisualizer.prototype.animate = function(animationTime, resolution, step) {
         // animationTime in seconds per frame
         // resolution in epochs per frame
+        if (!step) step = 0;
         var self = this;
         var batch = Math.floor(step / this.layout.data.epochs),
             epoch = step % this.layout.data.epochs;
diff --git a/index.css b/index.css
index 8ba1365..62639f4 100644
--- a/index.css
+++ b/index.css
@@ -20,27 +20,6 @@ time, mark, audio, video {
     vertical-align: baseline;
 }
 
-.svgContainer {
-    margin-top: 1.5em;
-    margin-bottom: 1em;
-    height: 100%;
-}
-
-.contentLoader {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-}
-
 h1, h2, h3, h4, h5, h6 {
     text-align: center;
 }
-
-.center {
-    margin-left: auto;
-    margin-right: auto;
-}
-.vcenter {
-    margin-top: auto;
-    margin-bottom: auto;
-}
diff --git a/index.html b/index.html
index 7cb910a..c750c2b 100644
--- a/index.html
+++ b/index.html
@@ -11,24 +11,32 @@
     <script src="dep/d3.js" type="text/javascript"></script>
     <script src="dep/material.min.js"></script>
     <script src="dep/impress.js"></script>
+
+    <script src="code/weightvis.js" type="text/javascript"></script>
+    <script src="code/weightviswrapper.js" type="text/javascript"></script>
+
     <script type="text/javascript">
-        var resizeHooks = [];
+        var weightsWrapper = new WeightVisWrapper();
+
         document.addEventListener("DOMContentLoaded", function() {
             impress().init();
+
+            d3.selectAll(".visContainer")[0].forEach(function(el) {
+                weightsWrapper.addPlaceholder(d3.select(el));
+            });
+            weightsWrapper.load("data/weights.json", function() {
+                weightsWrapper.reposition();
+            });
+            sizeSlides();
         }, false);
 
         function sizeSlides() {
             d3.selectAll(".slide")
                 .style("width", parseInt(window.innerWidth) * 0.9 + "px")
                 .style("height", parseInt(window.innerHeight) * 0.9 + "px");
-            var container = d3.select("#visContainer");
-            container.select("svg")
-                .style("width", container.style("width"))
-                .style("height", container.style("height"));
-            resizeHooks.forEach(function (hook) { hook(); });
         };
+
         window.addEventListener("resize", sizeSlides);
-        document.addEventListener("DOMContentLoaded", sizeSlides);
     </script>
 
     <div id="impress">
@@ -44,109 +52,46 @@
                 <h2>Die Gewichte im Verlauf</h2>
             </div>
 
-            <div id="visContainer" class="svgContainer">
-                <div id="svgLoader" class="mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active contentLoader"></div>
-            </div>
-            <div class="center" style="width: 50%">
-                <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" id="visPlayButton" data-pressed="false" style="float: left;">
-                    <i class="material-icons" id="visPlay">play_arrow</i>
-                    <i style="display: none" class="material-icons" id="visPause">pause</i>
-                </button>
-                <p style="margin-top: 1.4em">
-                    <input id="visSlider" class="mdl-slider mdl-js-slider" type="range" min="0" max="1" value="0" tabindex="0">
-                </p>
+            <div class="visContainer" style="width: 100%; height: 100%">
             </div>
 
-            <script src="code/weightvis.js" type="text/javascript"></script>
             <script type="text/javascript">
-                var thisStep = document.currentScript.parentElement;
-
-                document.addEventListener("DOMContentLoaded", function() {
-                    var container = d3.select("#visContainer");
-                    var svg = container.append("svg").remove();
-                    svg
-                        .style("width", container.style("width"))
-                        .style("height", container.style("height"));
-                    var netVisualizer = new NetVisualizer(svg);
-                    var loaded = false;
-
-                    var attrFontSize = 20;
-                    function placeAttributes() {
-                        var inputNodes = d3.selectAll(".layer-1")[0];
-                        var attrs = d3.selectAll(".attribute")[0];
-                        for (node=0; node<inputNodes.length; node++) {
-                            var iNode = d3.select(inputNodes[node]);
-                            d3.select(attrs[node])
-                                .attr("x", iNode.attr("cx"))
-                                .attr("y", Math.floor(parseInt(iNode.attr("cy")) + attrFontSize / 2));
-                        }
-                    }
+                (function() {
+                    var thisStep = document.currentScript.parentElement;
+                    document.addEventListener("impress:stepenter", function(e) {
+                        if (!weightsWrapper.ready || e.target != thisStep) return;
+                        weightsWrapper.openIn(d3.select(thisStep).select(".visContainer"));
+                        weightsWrapper.animate(10, 10);
+                    });
+                    document.addEventListener("impress:stepleave", function(e) {
+                        if (e.target != thisStep) return;
+                        weightsWrapper.remove(d3.select(thisStep).select(".visContainer"));
+                    });
+                }());
+            </script>
+        </div>
 
-                    netVisualizer.load("data/weights.json", function(){
-                        d3.select("#svgLoader").remove();
-                        d3.select("#visContainer").node().appendChild(svg.node());
-                        var attributeNames = 
-                            ["CRIM", "ZN", "INDUS", "CHAS", "NOX", "RM", "AGE", "DIS", "RAD", "TAX", "PTRATIO", "B", "LSTAT"];
-                        var inputNodes = d3.selectAll(".layer-1")[0];
-                        console.log(inputNodes);
-                        for (node=0; node<inputNodes.length; node++) {
-                            svg
-                                .append("text")
-                                .attr("class", "attribute")
-                                .attr("text-anchor", "middle")
-                                .attr("font-weight", "bold")
-                                .attr("font-size", attrFontSize + "px")
-                                .attr("pointer-events", "none") // disable hovering
-                                .attr("cursor", "default")
-                                .text(attributeNames[node]);
-                        }
-                        resizeHooks.push(function() { netVisualizer.reposition(); });
-                        resizeHooks.push(placeAttributes);
-                        netVisualizer.hookStepper(function(step) {
-                            d3.select("#visSlider").node().MaterialSlider.change(step);
-                        });
-                        netVisualizer.hookStop(function() {
-                            d3.select("#visPlayButton").attr("data-pressed", "false");
-                            d3.select("#visPlay").style("display", "");
-                            d3.select("#visPause").style("display", "none");
-                            var slider = d3.select("#visSlider").node();
-                            if (slider.value >= slider.max * 0.95) {
-                                slider.MaterialSlider.change(0); // wrap at right end
-                            }
-                        });
-                        svg
-                            .style("width", container.style("width"))
-                            .style("height", container.style("height"));
-                        netVisualizer.reposition();
-                        placeAttributes();
-                        var slider = d3.select("#visSlider").attr("max", netVisualizer.getSteps() - 1);
-                        slider.node().addEventListener("input", function() {
-                            netVisualizer.showStep(this.value);
-                        });
-                        d3.select("#visPlayButton").node().addEventListener("click", function() {
-                            var btn = d3.select(this);
-                            if (btn.attr("data-pressed") != "true") {
-                                var step = d3.select("#visSlider").node().value;
-                                netVisualizer.animate(15, 10, step);
-                                btn.attr("data-pressed", "true");
-                                d3.select("#visPlay").style("display", "none");
-                                d3.select("#visPause").style("display", "");
-                            } else {
-                                netVisualizer.stopAnimation();
-                                btn.attr("data-pressed", "false");
-                                d3.select("#visPlay").style("display", "");
-                                d3.select("#visPause").style("display", "none");
-                            }
-                        });
+        <div class="step slide mdl-layout mdl-js-layout" data-x="2000" data-y="1000">
+            <div class="mdl-layout__header">
+                <h2>Gewichte und Fehler</h2>
+            </div>
 
-                        loaded = true;
-                    });
+            <div class="visContainer" style="width: 100%; height: 100%">
+            </div>
 
+            <script type="text/javascript">
+                (function() {
+                    var thisStep = document.currentScript.parentElement;
                     document.addEventListener("impress:stepenter", function(e) {
-                        if (!loaded || e.target != thisStep) return;
-                        netVisualizer.animate(10, 20);
+                        if (!weightsWrapper.ready || e.target != thisStep) return;
+                        weightsWrapper.openIn(d3.select(thisStep).select(".visContainer"));
+                        weightsWrapper.animate(60, 1);
+                    });
+                    document.addEventListener("impress:stepleave", function(e) {
+                        if (e.target != thisStep) return;
+                        weightsWrapper.remove(d3.select(thisStep).select(".visContainer"));
                     });
-                });
+                }());
             </script>
         </div>
     </div>