click-highlight nodes

2 files changed, 67 insertions, 9 deletions

diff --git a/code/weightvis.js b/code/weightvis.js
index 7b4b5ef..3512373 100644
--- a/code/weightvis.js
+++ b/code/weightvis.js
@@ -21,7 +21,8 @@ var
     linkColor = primaryColor[0],
     linkHighlightColor = primaryColor[1],
     nodeColor = primaryColor[1],
-    nodeHighlightColor = accentColor
+    nodeHighlightColor = primaryColor[2],
+    nodeSelectionColor = accentColor
 ;
 
 
@@ -53,6 +54,7 @@ var Network = (function() {
             for (node=0; node<this.layout.net[layer].size; node++) {
                 this.nodes.push({
                     id: layer.toString() + "_" + node.toString(),
+                    layer: layer,
                     fixed: true
                 });
             }
@@ -332,25 +334,51 @@ var Visualizer = (function() {
                 d3.select(this).style("stroke", linkHighlightColor); 
             })
             .on("mouseout", function(d) {
-                d3.select("#node-" + d.source.id).style("fill", nodeColor);
-                d3.select("#node-" + d.target.id).style("fill", nodeColor);
-                d3.select(this).style("stroke", linkColor);
+                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", linkColor);
             });
         var node = this.svg.selectAll(".node")
             .data(this.network.nodes)
             .enter().append("circle")
-            .attr("class", "node")
+            .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);
                 d3.select(this).style("fill", nodeHighlightColor);
             })
             .on("mouseout", function(d) {
-                d3.selectAll(".source-" + d.id).style("stroke", linkColor);
-                d3.selectAll(".target-" + d.id).style("stroke", linkColor);
-                d3.select(this).style("fill", nodeColor);
+                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);
+                });
+                var me = d3.select(this);
+                if (me.attr("data-highlight") != "true") me.style("fill", nodeColor);
+            })
+            .on("click", function(d) {
+                var me = d3.select(this);
+                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);
+                } 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);
+                }
             });
 
         reposition();
diff --git a/index.html b/index.html
index 823982e..456ad87 100644
--- a/index.html
+++ b/index.html
@@ -24,8 +24,38 @@
             .attr("height", "100%")
             .attr("fill", bgColor);
         var visualizer = new Visualizer(svg);
+
+        var attrFontSize = 20;
+        function placeAttributes() {
+            var inputNodes = d3.selectAll(".layer-1")[0];
+            var attrs = d3.selectAll(".attribute")[0];
+            for (node=0; node<inputNodes.length; node++) {
+                var iNode = d3.select(inputNodes[node]);
+                d3.select(attrs[node])
+                    .attr("x", iNode.attr("cx"))
+                    .attr("y", Math.floor(parseInt(iNode.attr("cy")) + attrFontSize / 2));
+            }
+        }
+
         visualizer.load("data/log.json", function(){
-            visualizer.animate(10, 20);
+            var attributeNames = 
+                ["CRIM", "ZN", "INDUS", "CHAS", "NOX", "RM", "AGE", "DIS", "RAD", "TAX", "PTRATIO", "B", "LSTAT"];
+            var inputNodes = d3.selectAll(".layer-1")[0];
+            for (node=0; node<inputNodes.length; node++) {
+                var iNode = d3.select(inputNodes[node]);
+                svg
+                    .append("text")
+                    .attr("class", "attribute")
+                    .attr("text-anchor", "middle")
+                    .attr("font-weight", "bold")
+                    .attr("font-size", attrFontSize + "px")
+                    .attr("pointer-events", "none") // disable hovering
+                    .attr("cursor", "default")
+                    .text(attributeNames[node]);
+            }
+            window.addEventListener("resize", placeAttributes, true);
+            placeAttributes();
+            //visualizer.animate(10, 20);
         });
     </script>
 </body>