diff options
| -rw-r--r-- | code/weightvis.js | 118 |
1 files changed, 74 insertions, 44 deletions
diff --git a/code/weightvis.js b/code/weightvis.js index 757fa2b..409eb90 100644 --- a/code/weightvis.js +++ b/code/weightvis.js @@ -3,26 +3,35 @@ var // 50 100 200 300 400 500 pDeepPurple = ['#ede7f6', '#d1c4e9', '#b39ddb', '#9575cd', '#7e57c2', '#673ab7', // 600 700 800 900 - '#5e35b1', '#512da8', '#4527a0', '#311b92', - // A100 A200 A400 A700 - '#b388ff', '#7c4dff', '#651fff', '#6200ea'], - // A100 A200 A400 A700 - pGreen = ['#b9f6ca', '#69f0ae', '#00e676', '#00c853'], - pDark = ['#000000', '#212121', '#303030', '#424242'], + '#5e35b1', '#512da8', '#4527a0', '#311b92'], + pPink = ['#fce4ec', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a', '#e91e63', + '#d81b60', '#c2185b', '#ad1457', '#880e4f'], + // A100 A200 A400 A700 + pDeepPurpleA = ['#b388ff', '#7c4dff', '#651fff', '#6200ea'], + pGreenA = ['#b9f6ca', '#69f0ae', '#00e676', '#00c853'], + pBlueA = ['#82b1ff', '#448aff', '#2979ff', '#2962ff'], + pPinkA = ['#ff80ab', '#ff4081', '#f50057', '#c51162'], + + pDark = ['#000000', '#212121', '#303030', '#424242'], pLight = ['#E0E0E0', '#F5F5F5', '#FAFAFA', '#FFFFFF'], - primaryColor = [pDeepPurple[1], pDeepPurple[5], pDeepPurple[7]], - secondaryColor = pGreen[3], - themeColor = pLight, + oText = [0.87, 0.54, 0.38, 0.12], + textColor = ['#000000'], + + primaryColor = [pDeepPurple[1], pDeepPurple[5], pDeepPurple[7]], + secondaryColor = pBlueA[3], + tertiaryColor = [pPink[1], pPink[5], pPink[7]], + themeColor = pLight, accentColor = secondaryColor, - bgColor = themeColor[3], + bgColor = themeColor[3], - linkColor = primaryColor[0], - linkHighlightColor = primaryColor[1], - nodeColor = primaryColor[1], - nodeHighlightColor = primaryColor[2], - nodeSelectionColor = accentColor + linkColor = primaryColor[0], + linkColorAlt = tertiaryColor[0], + linkHighlightColor = primaryColor[1], + linkHighlightColorAlt = tertiaryColor[1], + nodeColor = textColor[0], + nodeHighlightColor = accentColor ; @@ -74,14 +83,16 @@ var Network = (function() { 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() + "_" + src.toString()), - weight: 1 + weight: 1, + positive: true }); } 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 + weight: 1, + positive: true }); } } @@ -112,14 +123,14 @@ var Network = (function() { } }; - Network.prototype.updateWeights = function(weights, epochLayout) { // TODO negative weights!?! + 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++) { + this.links[cnt].positive = (weights[layer][layer2][node] >= 0); // scaled = (x - min) / (max - min) - var scaled = (weights[layer][layer2][node] - epochLayout.min) / (epochLayout.max - epochLayout.min); - this.links[cnt++].weight = scaled; + this.links[cnt++].weight = (Math.abs(weights[layer][layer2][node]) - epochLayout.min) / (epochLayout.max - epochLayout.min); } } } @@ -192,8 +203,8 @@ var Loader = (function() { 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]); + var layerMin = d3.min(json[batch][epoch][layer], Math.abs); + var layerMax = d3.max(json[batch][epoch][layer], Math.abs); 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; } @@ -318,7 +329,14 @@ var Visualizer = (function() { .transition() .duration(transitionDuration / 1.1); } - this.domLink.style("stroke-width", function(d) { return d.weight * _weightScaler; }); + this.domLink.style("stroke-width", function(d) { return d.weight * _weightScaler; }) + .style("stroke", function(d) { + if (d3.select(this).attr("data-highlight") != "true") { + return d.positive?linkColor:linkColorAlt; + } else { + return d.positive?linkHighlightColor:linkHighlightColorAlt; + } + }); this.stepHooks.forEach(function(hook){ hook(batch * self.layout.data.epochs + epoch); }); }; @@ -355,12 +373,12 @@ var Visualizer = (function() { .data(this.network.links) .enter().append("line") .attr("class", function(d) { return "link source-" + d.source.id + " target-" + d.target.id; }) - .style("stroke", linkColor) + .style("stroke", function(d) { return (d.positive?linkColor:linkColorAlt); }) .style("stroke-width", function(d) { return d.weight * _weightScaler; }) .on("mouseover", function(d) { d3.select("#node-" + d.source.id).style("fill", nodeHighlightColor); d3.select("#node-" + d.target.id).style("fill", nodeHighlightColor); - d3.select(this).style("stroke", linkHighlightColor); + d3.select(this).style("stroke", function(d) { return (d.positive?linkHighlightColor:linkHighlightColorAlt); }); }) .on("mouseout", function(d) { var src = d3.select("#node-" + d.source.id); @@ -368,7 +386,15 @@ var Visualizer = (function() { var tar = d3.select("#node-" + d.target.id); if (tar.attr("data-highlight") != "true") tar.style("fill", nodeColor); var me = d3.select(this); - if (me.attr("data-highlight") != "true") me.style("stroke", linkColor); + if (me.attr("data-highlight") != "true") me.style("stroke", d.positive?linkColor:linkColorAlt); + }) + .on("click", function(d) { + var me = d3.select(this); + if (me.attr("data-highlight") != "true") { + d3.select(this).attr("data-highlight", "true"); + } else { + d3.select(this).attr("data-highlight", "false"); + } }); var node = this.svg.selectAll(".node") .data(this.network.nodes) @@ -376,22 +402,28 @@ var Visualizer = (function() { .attr("class", function(d) { return "node layer-" + d.layer; }) .attr("id", function(d) { return "node-" + d.id; }) .style("fill", nodeColor) - .style("stroke-width", 0) - .style("stroke", nodeSelectionColor) - .on("mouseover", function(d) { - d3.selectAll(".source-" + d.id).style("stroke", linkHighlightColor); - d3.selectAll(".target-" + d.id).style("stroke", linkHighlightColor); + .on("mouseover", function(n) { + d3.selectAll(".source-" + n.id).style("stroke", function(d) { return (d.positive?linkHighlightColor:linkHighlightColorAlt); }); + d3.selectAll(".target-" + n.id).style("stroke", function(d) { return (d.positive?linkHighlightColor:linkHighlightColorAlt); }); d3.select(this).style("fill", nodeHighlightColor); }) - .on("mouseout", function(d) { - d3.selectAll(".source-" + d.id)[0].forEach(function (el) { - var src = d3.select(el); - if (src.attr("data-highlight") != "true") src.style("stroke", linkColor); - }); - d3.selectAll(".target-" + d.id)[0].forEach(function (el) { - var tar = d3.select(el); - if (tar.attr("data-highlight") != "true") tar.style("stroke", linkColor); - }); + .on("mouseout", function(n) { + d3.selectAll(".source-" + n.id) + .style("stroke", function(d) { + if (d3.select(this).attr("data-highlight") != "true") { + return (d.positive?linkColor:linkColorAlt); + } else { + return d3.select(this).style("stroke"); + } + }); + d3.selectAll(".target-" + n.id) + .style("stroke", function(d) { + if (d3.select(this).attr("data-highlight") != "true") { + return (d.positive?linkColor:linkColorAlt); + } else { + return d3.select(this).style("stroke"); + } + }); var me = d3.select(this); if (me.attr("data-highlight") != "true") me.style("fill", nodeColor); }) @@ -400,13 +432,11 @@ var Visualizer = (function() { if (me.attr("data-highlight") == "true") { d3.selectAll(".source-" + d.id).attr("data-highlight", "false"); //d3.selectAll(".target-" + d.id).attr("data-highlight", "false"); - me.attr("data-highlight", "false") - .style("stroke-width", 0); + me.attr("data-highlight", "false"); } else { d3.selectAll(".source-" + d.id).attr("data-highlight", "true"); //d3.selectAll(".target-" + d.id).attr("data-highlight", "true"); - me.attr("data-highlight", "true") - .style("stroke-width", d.r / 2); + me.attr("data-highlight", "true"); } }); |