update data structure

1 files changed, 24 insertions, 20 deletions

diff --git a/index.html b/index.html
index fb88382..7cb910a 100644
--- a/index.html
+++ b/index.html
@@ -19,8 +19,12 @@
 
         function sizeSlides() {
             d3.selectAll(".slide")
-                .style("width", parseInt(window.innerWidth) * 0.8 + "px")
-                .style("height", parseInt(window.innerHeight) * 0.8 + "px");
+                .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);
@@ -58,15 +62,12 @@
                 var thisStep = document.currentScript.parentElement;
 
                 document.addEventListener("DOMContentLoaded", function() {
-                    var svg = d3.select("#visContainer").append("svg").remove();
+                    var container = d3.select("#visContainer");
+                    var svg = container.append("svg").remove();
                     svg
-                        .attr("width", "100%")
-                        .attr("height", "100%");
-                    svg.append("rect")
-                        .attr("width", "100%")
-                        .attr("height", "100%")
-                        .attr("fill", bgColor);
-                    var visualizer = new Visualizer(svg);
+                        .style("width", container.style("width"))
+                        .style("height", container.style("height"));
+                    var netVisualizer = new NetVisualizer(svg);
                     var loaded = false;
 
                     var attrFontSize = 20;
@@ -81,7 +82,7 @@
                         }
                     }
 
-                    visualizer.load("data/log.json", function(){
+                    netVisualizer.load("data/weights.json", function(){
                         d3.select("#svgLoader").remove();
                         d3.select("#visContainer").node().appendChild(svg.node());
                         var attributeNames = 
@@ -99,12 +100,12 @@
                                 .attr("cursor", "default")
                                 .text(attributeNames[node]);
                         }
-                        resizeHooks.push(visualizer.reposition);
+                        resizeHooks.push(function() { netVisualizer.reposition(); });
                         resizeHooks.push(placeAttributes);
-                        visualizer.hookStepper(function(step) {
+                        netVisualizer.hookStepper(function(step) {
                             d3.select("#visSlider").node().MaterialSlider.change(step);
                         });
-                        visualizer.hookStop(function() {
+                        netVisualizer.hookStop(function() {
                             d3.select("#visPlayButton").attr("data-pressed", "false");
                             d3.select("#visPlay").style("display", "");
                             d3.select("#visPause").style("display", "none");
@@ -113,22 +114,25 @@
                                 slider.MaterialSlider.change(0); // wrap at right end
                             }
                         });
-                        visualizer.reposition();
+                        svg
+                            .style("width", container.style("width"))
+                            .style("height", container.style("height"));
+                        netVisualizer.reposition();
                         placeAttributes();
-                        var slider = d3.select("#visSlider").attr("max", visualizer.getSteps() - 1);
+                        var slider = d3.select("#visSlider").attr("max", netVisualizer.getSteps() - 1);
                         slider.node().addEventListener("input", function() {
-                            visualizer.showStep(this.value);
+                            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;
-                                visualizer.animate(15, 10, step);
+                                netVisualizer.animate(15, 10, step);
                                 btn.attr("data-pressed", "true");
                                 d3.select("#visPlay").style("display", "none");
                                 d3.select("#visPause").style("display", "");
                             } else {
-                                visualizer.stopAnimation();
+                                netVisualizer.stopAnimation();
                                 btn.attr("data-pressed", "false");
                                 d3.select("#visPlay").style("display", "");
                                 d3.select("#visPause").style("display", "none");
@@ -140,7 +144,7 @@
 
                     document.addEventListener("impress:stepenter", function(e) {
                         if (!loaded || e.target != thisStep) return;
-                        visualizer.animate(10, 20);
+                        netVisualizer.animate(10, 20);
                     });
                 });
             </script>