click-highlight nodes

1 files changed, 31 insertions, 1 deletions

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>