path: root/index.js

/* custom d3 widgets */

// slider
function makeSlider(labelName, x, y, scale, cb) {
    var brush = d3.svg.brush()
        .x(scale)
        .extent([0, 0])
        .on("brush", brushed);

    var label = svg.append("text")
        .attr("x", x-5)
        .attr("y", y)
        .text(labelName);

    var brushg = svg.append("g")
        .attr("transform", "translate(" + x + "," + (y+10) + ")");

    brushg.append("g")
        .attr("class", "x axis")
        .call(d3.svg.axis()
            .scale(scale)
            .ticks(5)
            .tickSize(1)
            .tickFormat(function(d) { return Math.floor(d*100) + "%"; })
            .tickPadding(10)            
        .orient("bottom"));

    var slider = brushg.append("g")
        .attr("class", "slider")
        .call(brush);

    var handle = slider.append("circle")
        .attr("r", 5)
        .attr("cx", 0)
        .attr("cy", 0)
        .attr("stroke", "#000")
        .attr("fill", "#DDD");

    slider.call(brush);

    function brushed() {
        var value = brush.extent()[0];

        if (d3.event.sourceEvent) { // not a programmatic event
            value = scale.invert(d3.mouse(this)[0]);
            brush.extent([value, value]);
        }

        handle.attr("cx", scale(value));
        cb(value);
    }
}


/* 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++;
    }
    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++;
        }
    }
    return nodes;
}

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];
            }
        }
    }
    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
                        source: nodesMap.get(layer.toString() + "_" + src.toString()),
                        target: nodesMap.get((layer+1).toString() + "_" + tar.toString()),
                        weight: 1
                    });
                }
            }
        }
    }

    return {
        "nodes": nodes,
        "links": links
    };
}


/* 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; });
}


/* 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 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;
        }
        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!
            }
        }
    }

    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);
    }
    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
        }
    }
    setTimeout(animate, frameDuration);
}