From 962b1ec3ded7a0ccc77765e973f6321dc92ec688 Mon Sep 17 00:00:00 2001 From: schneefux Date: Fri, 1 Apr 2016 17:22:44 +0200 Subject: highlight negative weights --- code/weightvis.js | 120 ++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 75 insertions(+), 45 deletions(-) (limited to 'code') 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'], - accentColor = secondaryColor, - bgColor = themeColor[3], + primaryColor = [pDeepPurple[1], pDeepPurple[5], pDeepPurple[7]], + secondaryColor = pBlueA[3], + tertiaryColor = [pPink[1], pPink[5], pPink[7]], + themeColor = pLight, - linkColor = primaryColor[0], - linkHighlightColor = primaryColor[1], - nodeColor = primaryColor[1], - nodeHighlightColor = primaryColor[2], - nodeSelectionColor = accentColor + accentColor = secondaryColor, + bgColor = themeColor[3], + + 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= 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 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"); } }); -- cgit v1.3.1