summaryrefslogtreecommitdiff
path: root/code/weightvis.js
diff options
context:
space:
mode:
Diffstat (limited to 'code/weightvis.js')
-rw-r--r--code/weightvis.js123
1 files changed, 70 insertions, 53 deletions
diff --git a/code/weightvis.js b/code/weightvis.js
index 2ef33e1..bf9a047 100644
--- a/code/weightvis.js
+++ b/code/weightvis.js
@@ -35,6 +35,38 @@ var
nodeHighlightColorAlt = pPinkA[3]
;
+function fLinkColor(d, i, highlight) {
+ console.log(d.highlight, highlight);
+ if (highlight === true || d.highlight) {
+ if (d.altLayout) {
+ return linkHighlightColorAlt;
+ } else {
+ return linkHighlightColor;
+ }
+ } else {
+ if (d.altLayout) {
+ return linkColorAlt;
+ } else {
+ return linkColor;
+ }
+ }
+}
+function fNodeColor(d, i, highlight) {
+ if (highlight === true || d.highlight) {
+ if (d.altLayout) {
+ return nodeHighlightColorAlt;
+ } else {
+ return nodeHighlightColor;
+ }
+ } else {
+ if (d.altLayout) {
+ return nodeColorAlt;
+ } else {
+ return nodeColor;
+ }
+ }
+}
+
/* network construction */
// TODO make multiple bias layers at positions > 0 possible?
@@ -66,6 +98,8 @@ var Network = (function() {
id: layer.toString() + "_" + node.toString(),
layer: layer,
node: node,
+ altLayout: false,
+ highlight: false,
fixed: true
});
}
@@ -86,7 +120,8 @@ var Network = (function() {
source: nodesMap.get(layer.toString() + "_" + src.toString()),
target: nodesMap.get((layer+1).toString() + "_" + src.toString()),
weight: 1,
- positive: true
+ altLayout: false,
+ highlight: false
});
} else { // normal layer
for (tar=0; tar<this.layout.net[layer+1].size; tar++) { // get all nodes of the next layer
@@ -94,7 +129,8 @@ var Network = (function() {
source: nodesMap.get(layer.toString() + "_" + src.toString()),
target: nodesMap.get((layer+1).toString() + "_" + tar.toString()),
weight: 1,
- positive: true
+ altLayout: false,
+ highlight: false
});
}
}
@@ -130,7 +166,7 @@ var Network = (function() {
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);
+ this.links[cnt].altLayout = (weights[layer][layer2][node] < 0);
// scaled = (x - min) / (max - min)
this.links[cnt++].weight = (Math.abs(weights[layer][layer2][node]) - epochLayout.min) / (epochLayout.max - epochLayout.min);
}
@@ -393,13 +429,7 @@ var NetVisualizer = (function() {
.duration(transitionDuration / 1.1);
}
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;
- }
- });
+ .style("stroke", fLinkColor);
this.stepHooks.forEach(function(hook){ hook(batch * self.layout.data.epochs + epoch); });
};
@@ -436,75 +466,62 @@ var NetVisualizer = (function() {
.data(this.network.links)
.enter().append("line")
.attr("class", function(d) { return "link source-" + d.source.id + " target-" + d.target.id; })
- .style("stroke", function(d) { return (d.positive?linkColor:linkColorAlt); })
+ .style("stroke", fLinkColor)
.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", function(d) { return (d.positive?linkHighlightColor:linkHighlightColorAlt); });
+ d3.select("#node-" + d.source.id).style("fill", function(d, i) { return fNodeColor(d, i, true); });
+ d3.select("#node-" + d.target.id).style("fill", function(d, i) { return fNodeColor(d, i, true); });
+ d3.select(this).style("stroke", function(d, i) { return fLinkColor(d, i, true); });
})
.on("mouseout", function(d) {
- var src = d3.select("#node-" + d.source.id);
- if (src.attr("data-highlight") != "true") src.style("fill", nodeColor);
- 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", d.positive?linkColor:linkColorAlt);
+ d3.select("#node-" + d.source.id).style("fill", fNodeColor);
+ d3.select("#node-" + d.target.id).style("fill", fNodeColor);
+ d3.select(this).style("stroke", fLinkColor);
})
.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");
- }
+ d.highlight = !d.highlight;
});
var node = this.svg.selectAll(".node")
.data(this.network.nodes)
.enter().append("circle")
.attr("class", function(d) { return "node layer-" + d.layer; })
.attr("id", function(d) { return "node-" + d.id; })
- .style("fill", nodeColor)
+ .style("fill", fNodeColor)
.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);
+ d3.selectAll(".source-" + n.id).style("stroke", function(d, i) { return fLinkColor(d, i, true); });
+ d3.selectAll(".target-" + n.id).style("stroke", function(d, i) { return fLinkColor(d, i, true); });
+ d3.select(this).style("fill", function(d, i) { return fNodeColor(d, i, true); });
})
.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);
+ d3.selectAll(".source-" + n.id).style("stroke", fLinkColor);
+ d3.selectAll(".target-" + n.id).style("stroke", fLinkColor);
+ d3.select(this).style("fill", fNodeColor);
})
.on("click", function(d) {
var me = d3.select(this);
- if (me.attr("data-highlight") == "true") {
- d3.selectAll(".source-" + d.id).attr("data-highlight", "false");
+ if (d.highlight) {
+ d3.selectAll(".target-" + d.id).each(function(d) { d.highlight=false; });
//d3.selectAll(".target-" + d.id).attr("data-highlight", "false");
- me.attr("data-highlight", "false");
} else {
- d3.selectAll(".source-" + d.id).attr("data-highlight", "true");
+ d3.selectAll(".target-" + d.id).each(function(d) { d.highlight=true; });
//d3.selectAll(".target-" + d.id).attr("data-highlight", "true");
- me.attr("data-highlight", "true");
}
+ d.highlight = !d.highlight;
});
this.reposition();
};
+ NetVisualizer.prototype.visualActivate = function(inputs) {
+ var activations = this.activate(inputs);
+ var flatActivations = [].concat.apply([], activations);
+ var max = d3.max(flatActivations, Math.abs),
+ min = d3.min(flatActivations, Math.abs);
+ var node = this.svg.selectAll(".node");
+ node.each(function(d) { d.altLayout = activations[d.layer][d.node]>0; })
+ .attr("r", function(d) { return 2 * d.r * (Math.abs(activations[d.layer][d.node]) - min) / (max-min); })
+ .style("fill", fNodeColor);
+ };
+
NetVisualizer.prototype.activate = function(inputs) {
// assumes the sigmoid function is used as activation
function activation(x) { return 1 / (1 + Math.exp(-x)); }
generated by cgit v1.3.1 (git 2.54.0) at 2026-08-02 04:05:14 +0000