From 5f954f48f8ff55c339faed709ebd26b0984abfb2 Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Thu, 31 Mar 2016 12:22:50 +0200
Subject: move everything into classes

---
 index.js | 484 ++++++++++++++++++++++++++++++++++++---------------------------
 1 file changed, 280 insertions(+), 204 deletions(-)

diff --git a/index.js b/index.js
index 56b2e5d..e58ddd7 100644
--- a/index.js
+++ b/index.js
@@ -54,237 +54,313 @@ function makeSlider(labelName, x, y, scale, cb) {
 
 /* network construction */
 
-function drawNodes(nodes, layout, env) {
-    var cnt = 0;
-    var biasLayers = 0;
-    for (layer=0; layer<layout.net.layers; layer++) {
-        if (layout.net[layer].isBias) biasLayers++;
+var Network = (function() {
+    function Network(layout) {
+        this.layout = layout;
     }
-    for (layer=0; layer<layout.net.layers; layer++) {
-        for (node=0; node<layout.net[layer].size; node++) {
-            // dynamic ("responsive") attributes for all window sizes
-            if (layout.net[layer].isBias) {
-                nodes[cnt].x = (layer - biasLayers + 1.25) * (env.width / (layout.net.layers - biasLayers));
-                nodes[cnt].y = (node + 0.25) * (env.height / layout.net[layer].size);
-                nodes[cnt].r = d3.min([env.width, env.height]) / d3.max([layout.net.layers, layout.net[layer].size]) * 0.2;
-            } else {
-                nodes[cnt].x = (layer - biasLayers + 0.5) * (env.width / (layout.net.layers - biasLayers));
-                nodes[cnt].y = (node + 0.5) * (env.height / layout.net[layer].size);
-                nodes[cnt].r = d3.min([env.width, env.height]) / d3.max([layout.net.layers, layout.net[layer].size]) * 0.3;
-            }
-            cnt++;
+
+    Network.prototype.init = function() {
+        this._createNodes();
+        this._createLinks();
+    };
+
+    Network.prototype.resize = function(env) {
+        var largestLayerSize = 0;
+        for (layer=0; layer<this.layout.net.layers; layer++) {
+            if (this.layout.net[layer].size > largestLayerSize) largestLayerSize = this.layout.net[layer].size;
         }
-    }
-    return nodes;
-}
+        this.responsiveRadius = d3.min([env.width, env.height]) / d3.max([this.layout.net.layers, largestLayerSize]);
+        this._updateNodes(env);
+    };
 
-function drawLinks(links, weights) {
-    var cnt = 0;
-    for (layer=0; layer<weights.length; layer++) {
-        for (layer2=0; layer2<weights[layer].length; layer2++) {
-            for (node=0; node<weights[layer][layer2].length; node++) {
-                links[cnt++].weight = weights[layer][layer2][node];
+    Network.prototype._createNodes = function() {
+        // create layers
+        this.nodes = [];
+        for (layer=0; layer<this.layout.net.layers; layer++) {
+            for (node=0; node<this.layout.net[layer].size; node++) {
+                this.nodes.push({
+                    id: layer.toString() + "_" + node.toString(),
+                    fixed: true
+                });
             }
         }
-    }
-    return links;
-}
+    };
 
-function createNet(layout) {
-    // create layers
-    var nodes = [];
-    for (layer=0; layer<layout.net.layers; layer++) {
-        for (node=0; node<layout.net[layer].size; node++) {
-            nodes.push({
-                id: layer.toString() + "_" + node.toString(),
-                fixed: true
-            });
-        }
-    }
-    var nodesMap = d3.map();
-    nodes.forEach(function (n) {
-        return nodesMap.set(n.id, n);
-    });
-    // create links between adjacent layers
-    var links = [];
-    for (layer=0; layer<layout.net.layers-1; layer++) { // for every layer except the last
-        for (src=0; src<layout.net[layer].size; src++) { // get all nodes
-            if (layout.net[layer].isBias) {
-                links.push({ // in case of a bias layer, connect 1:1
-                    source: nodesMap.get(layer.toString() + "_" + src.toString()),
-                    target: nodesMap.get((layer+1).toString() + "_" + src.toString()),
-                    weight: 1
-                });
-            } else { // normal layer
-                for (tar=0; tar<layout.net[layer+1].size; tar++) { // get all nodes of the next layer
-                    links.push({ // connect both nodes
+    Network.prototype._createLinks = function() {
+        this.links = [];
+        var nodesMap = d3.map();
+        this.nodes.forEach(function (n) {
+            return nodesMap.set(n.id, n);
+        });
+        // create links between adjacent layers
+        for (layer=0; layer<this.layout.net.layers-1; layer++) { // for every layer except the last
+            for (src=0; src<this.layout.net[layer].size; src++) { // get all nodes
+                if (this.layout.net[layer].isBias) {
+                    this.links.push({ // in case of a bias layer, connect 1:1
                         source: nodesMap.get(layer.toString() + "_" + src.toString()),
-                        target: nodesMap.get((layer+1).toString() + "_" + tar.toString()),
+                        target: nodesMap.get((layer+1).toString() + "_" + src.toString()),
                         weight: 1
                     });
+                } else { // normal layer
+                    for (tar=0; tar<this.layout.net[layer+1].size; tar++) { // get all nodes of the next layer
+                        this.links.push({ // connect both nodes
+                            source: nodesMap.get(layer.toString() + "_" + src.toString()),
+                            target: nodesMap.get((layer+1).toString() + "_" + tar.toString()),
+                            weight: 1
+                        });
+                    }
                 }
             }
         }
-    }
+    };
 
-    return {
-        "nodes": nodes,
-        "links": links
+    Network.prototype._updateNodes = function(env) {
+        biasLayers = 0;
+        for (layer=0; layer<this.layout.net.layers; layer++) {
+            if (this.layout.net[layer].isBias) biasLayers++;
+        }
+        var cnt = 0;
+        for (layer=0; layer<this.layout.net.layers; layer++) {
+            for (node=0; node<this.layout.net[layer].size; node++) {
+                // dynamic ("responsive") attributes for all window sizes
+                if (this.layout.net[layer].isBias) {
+                    this.nodes[cnt].x = (layer - biasLayers + 1.25) * (env.width / (this.layout.net.layers - biasLayers));
+                    this.nodes[cnt].y = (node + 0.25) * (env.height / this.layout.net[layer].size);
+                    this.nodes[cnt].r = this.responsiveRadius * 0.2;
+                } else {
+                    this.nodes[cnt].x = (layer - biasLayers + 0.5) * (env.width / (this.layout.net.layers - biasLayers));
+                    this.nodes[cnt].y = (node + 0.5) * (env.height / this.layout.net[layer].size);
+                    this.nodes[cnt].r = this.responsiveRadius * 0.3;
+                }
+                cnt++;
+            }
+        }
     };
-}
 
+    Network.prototype.updateWeights = function(weights, epochLayout) {
+        var cnt = 0;
+        for (layer=0; layer<weights.length; layer++) {
+            for (layer2=0; layer2<weights[layer].length; layer2++) {
+                for (node=0; node<weights[layer][layer2].length; node++) {
+                    // scaled = (x - min) / (max - min)
+                    var scaled = (weights[layer][layer2][node] - epochLayout.min) / (epochLayout.max - epochLayout.min);
+                    this.links[cnt++].weight = scaled;
+                }
+            }
+        }
+    };
 
-/* visualisation */
-
-// create visualisation
-function envRedraw(weights, duration) {
-    var width = parseInt(svg.style("width"))   || 800,
-        height = parseInt(svg.style("height")) || 600;
-    net.nodes = drawNodes(net.nodes, netSpec, designSpec, {"width": width, "height": height});
-    net.links = drawLinks(net.links, weights);
-
-    node = svg.selectAll(".node");
-    node
-        .transition()
-        .duration(duration)
-        .attr("cx", function(d) { return d.x; })
-        .attr("cy", function(d) { return d.y; })
-        .attr("r",  function(d) { return d.r; });
-    link = svg.selectAll(".link");
-    link
-        .transition()
-        .duration(duration)
-        .style("stroke-width", function(d) { return d.weight * 4; })
-        .attr("x1", function(d) { return d.source.x; })
-        .attr("y1", function(d) { return d.source.y; })
-        .attr("x2", function(d) { return d.target.x; })
-        .attr("y2", function(d) { return d.target.y; });
-}
+    return Network;
+})();
 
 
 /* data handling */
 
-// now we're getting to the grips
-function preload(callback) {
-    d3.json("data/log.json")
-        .get(function(e, json) {
-            if (e) console.log(e);
-            callback(json);
+var Loader = (function() {
+    function Loader() {
+    }
+
+    Loader.prototype.load = function(url, callback) {
+        var self = this;
+        d3.json(url)
+            .get(function(e, json) {
+                if (e) console.log(e);
+                self._parse(json);
         });
-}
+        this._finished = callback;
+    };
 
-var cache = {};
-preload(function (json) {
-    // json format:
-    // json.
-    //   [batch][epoch] [[sourceIndex x targetIndex]] (int)
-    // careful - root and first level nodes are objects and have no '.length'
-
-    var layout = {};
-    // layout format:
-    // layout.
-    //   net.layers (int)
-    //   net.[net.layers].
-    //      isBias (bool)
-    //      size (int)
-    //   layers.[batch][epoch].
-    //      min (int)
-    //      max (int)
-    layout.net = {};
-    // network structure
-    console.log(json);
-    layout.net.layers = json[0][0].length;
-    for (layer=0; layer<layout.net.layers; layer++) {
-        layerObj = {};
-        if (json[0][0][layer].length == 1) { // bias
-            layerObj.isBias = true;
-            layerObj.size = json[0][0][0][layer].length; // workaround - Matrix should be rotatet serverside
-        } else {
-            layerObj.isBias = false;
-            layerObj.size = json[0][0][layer].length;
+    Loader.prototype._parse = function(json) {
+        // json format:
+        // json.
+        //   [batch][epoch] [[sourceIndex x targetIndex]] (int)
+        // careful - root and first level nodes are objects and have no '.length'
+
+        var layout = {};
+        // layout format:
+        // layout.
+        //   net.layers (int)
+        //   net.[net.layers].
+        //      isBias (bool)
+        //      size (int)
+        //   layers.[batch][epoch].
+        //      min (int)
+        //      max (int)
+        //   data.
+        //      batches (int)
+        //      epochs  (int)
+        layout.data = {};
+        layout.data.batches = Object.keys(json).length;
+        layout.data.epochs  = Object.keys(json[0]).length;
+        layout.net = {};
+        // network structure
+        layout.net.layers = json[0][0].length;
+        for (layer=0; layer<layout.net.layers; layer++) {
+            layerObj = {};
+            if (json[0][0][layer].length == 1) { // bias
+                layerObj.isBias = true;
+                layerObj.size = json[0][0][0][layer].length; // workaround - Matrix should be rotatet serverside
+            } else {
+                layerObj.isBias = false;
+                layerObj.size = json[0][0][layer].length;
+            }
+            layout.net[layer] = layerObj;
         }
-        layout.net[layer] = layerObj;
-    }
-    layout.net[layout.net.layers] = {'isBias': false, 'size': json[0][0][layout.net.layers-1][0].length};
-    layout.net.layers += 1; // output layer
-    // layer properties
-    layout.layers = {};
-    for (batch=0; batch<Object.keys(json).length; batch++) {
-        layout.layers[batch] = {};
-        for (epoch=0; epoch<Object.keys(json[batch]).length; epoch++) {
-            layout.layers[batch][epoch] = {};
-            for (layer=0; layer<json[batch][epoch].length; layer++) {
-                layout.layers[batch][epoch][layer] = {};
-                layout.layers[batch][epoch][layer].min = d3.min(json[batch][epoch][layer]);
-                layout.layers[batch][epoch][layer].max = d3.max(json[batch][epoch][layer]);
-                // TODO use these values while drawing links!
+        layout.net[layout.net.layers] = {'isBias': false, 'size': json[0][0][layout.net.layers-1][0].length};
+        layout.net.layers += 1; // output layer
+        // layer properties
+        layout.layers = {};
+        for (batch=0; batch<layout.data.batches; batch++) {
+            layout.layers[batch] = {};
+            for (epoch=0; epoch<layout.data.epochs; epoch++) {
+                layout.layers[batch][epoch] = {};
+                layout.layers[batch][epoch].max = 0;
+                layout.layers[batch][epoch].min = Infinity;
+                for (layer=0; layer<json[batch][epoch].length; layer++) {
+                    var layerMin = d3.min(json[batch][epoch][layer]);
+                    var layerMax = d3.max(json[batch][epoch][layer]);
+                    if (layerMin < layout.layers[batch][epoch].min) layout.layers[batch][epoch].min = layerMin;
+                    if (layerMax > layout.layers[batch][epoch].max) layout.layers[batch][epoch].max = layerMax;
+                }
             }
         }
-    }
+        console.log(layout); // DEBUG
 
-    setup(layout, json);
-});
-
-function setup(layout, data) {
-    // create empty elements and determine the visualisation's size
-    var svg = d3.select("#visContainer").append("svg")
-        .attr("width", "100%")
-        .attr("height", "100%");
-    var width = parseInt(svg.style("width"))   || 800,
-        height = parseInt(svg.style("height")) || 600;
-
-    /*var slideScaler = d3.scale.linear()
-        .domain([0, 180])
-        .range([0, 200])
-        .clamp(true);
-    function slid(val) {
-        console.log(val);
+        if (this._finished) this._finished(layout, json);
+    };
+
+    return Loader;
+})();
+
+var Animator = (function() {
+    function Animator(layout, time, step) {
+        this.layout = layout;
+        this.step = step;
+        this.batch = this.epoch = 0;
+        this.frameDuration = time / (this.layout.data.batches * this.layout.data.epochs / this.step);
+        console.log("frame duration:" + this.frameDuration); // DEBUG
     }
-    makeSlider("Test", 10, 20, slideScaler, slid);*/
-
-    var net = createNet(layout);
-    console.log(layout);
-    console.log(net);
-    net.nodes = drawNodes(net.nodes, layout, {"width": width, "height": height});
-    net.links = drawLinks(net.links, data[0][0]);
-
-    var link = svg.selectAll(".link")
-        .data(net.links)
-        .enter().append("line")
-        .attr("class", "link")
-        .style("stroke", "grey")
-        .style("stroke-width", function(d) { return d.weight * 4; }) // TODO make width always stay between 0-1
-        .attr("x1", function(d) { return d.source.x; })
-        .attr("y1", function(d) { return d.source.y; })
-        .attr("x2", function(d) { return d.target.x; })
-        .attr("y2", function(d) { return d.target.y; });
-    var node = svg.selectAll(".node")
-        .data(net.nodes)
-        .enter().append("circle")
-        .attr("class", "node")
-        .attr("cx", function(d) { return d.x; })
-        .attr("cy", function(d) { return d.y; })
-        .attr("r",  function(d) { return d.r; });
-
-    window.addEventListener("resize", envRedraw, true);
-    // TODO animation & refresh
-}
 
-var maxBatch = 8, maxEpoch = 300;
-var epochStep = 50;
-var numLayers = 3;
-var currBatch = 0, currEpoch = 0;
-function animate() {
-    frameDuration = 20000 / (maxBatch * maxEpoch / epochStep);
-    envRedraw(cache[currBatch][currEpoch], frameDuration);
-    currEpoch += epochStep;
-    if (currEpoch >= maxEpoch) {
-        currEpoch = 0;
-        console.log("batch " + currBatch.toString());
-        if (++currBatch >= maxBatch) {
-            currBatch = 0;
-            return;  // stop
+    Animator.prototype.start = function(callback) {
+        var self = this;
+        wrapper = function() {
+            callback(self.batch, self.epoch, self.frameDuration);
+            self.animate();
+        };
+        this.pid = setInterval(wrapper, this.frameDuration);
+    };
+
+    Animator.prototype.animate = function() {
+        this.epoch += this.step;
+        if (this.epoch >= this.layout.data.epochs) {
+            this.epoch = 0;
+            if (++this.batch>= this.layout.data.batches) {
+                this.batch = 0;
+                clearInterval(this.pid); // suicide
+                console.log("finished");
+            }
         }
+    };
+
+    return Animator;
+})();
+
+var Visualizer = (function() {
+    function Visualizer(svg) {
+        this.loader = new Loader();
+        this.svg = svg;
     }
-    setTimeout(animate, frameDuration);
-}
+
+    Visualizer.prototype.start = function(url, animationTime, resolution) {
+        // animationTime in seconds per frame
+        // resolution in epochs per frame
+        var self = this;
+        this.animationTime = animationTime;
+        this.resolution = resolution;
+        function wrapper(layout, data) {
+            self.layout = layout;
+            self.data = data;
+            self._setup();
+        }
+        this.loader.load("data/log.json", wrapper);
+    };
+
+    Visualizer.prototype._setup = function() {
+        console.log("setup"); // DEBUG
+        var self = this;
+        // create empty elements and determine the visualisation's size
+        this.svg
+            .attr("width", "100%")
+            .attr("height", "100%");
+        var width = parseInt(this.svg.style("width"))   || 800,
+            height = parseInt(this.svg.style("height")) || 600;
+
+        /*var slideScaler = d3.scale.linear()
+            .domain([0, 180])
+            .range([0, 200])
+            .clamp(true);
+        function slid(val) {
+            console.log(val);
+        }
+        makeSlider("Test", 10, 20, slideScaler, slid);*/
+
+        this.network = new Network(this.layout);
+        this.network.init();
+        this.network.resize({"width": width, "height": height});
+        this.network.updateWeights(this.data[0][0], this.layout.layers[0][0]);
+
+        function resized() {
+            width = parseInt(self.svg.style("width"))   || 800;
+            height = parseInt(self.svg.style("height")) || 600;
+
+            self.network.resize({"width": width, "height": height});
+
+            node
+                .attr("cx", function(d) { return d.x; })
+                .attr("cy", function(d) { return d.y; })
+                .attr("r",  function(d) { return d.r; });
+            link
+                .attr("x1", function(d) { return d.source.x; })
+                .attr("y1", function(d) { return d.source.y; })
+                .attr("x2", function(d) { return d.target.x; })
+                .attr("y2", function(d) { return d.target.y; });
+        }
+        window.addEventListener("resize", resized, true);
+
+        var link = this.svg.selectAll(".link")
+            .data(this.network.links)
+            .enter().append("line")
+            .attr("class", "link")
+            .style("stroke", "grey")
+            .style("stroke-width", function(d) { return d.weight * 10; })
+            .attr("x1", function(d) { return d.source.x; })
+            .attr("y1", function(d) { return d.source.y; })
+            .attr("x2", function(d) { return d.target.x; })
+            .attr("y2", function(d) { return d.target.y; });
+        var node = this.svg.selectAll(".node")
+            .data(this.network.nodes)
+            .enter().append("circle")
+            .attr("class", "node")
+            .attr("cx", function(d) { return d.x; })
+            .attr("cy", function(d) { return d.y; })
+            .attr("r",  function(d) { return d.r; });
+
+        this.animator = new Animator(this.layout, this.animationTime * 1000, this.resolution);
+        this.animator.start(function(batch, epoch, duration) {
+            self.network.updateWeights(self.data[batch][epoch], self.layout.layers[batch][epoch]);
+
+            // 10% extra time per frame for the code execution
+            duration = duration / 1.1;
+            link
+                .transition()
+                .duration(duration)
+                .style("stroke-width", function(d) { return d.weight * 10; });
+        });
+    };
+
+    return Visualizer;
+})();
+
+var svg = d3.select("#visContainer").append("svg");
+var visualizer = new Visualizer(svg);
+visualizer.start("data/log.json", 30, 10);
-- 
cgit v1.3.1