diff options
| -rw-r--r-- | code/weightvis.js | 44 | ||||
| -rw-r--r-- | index.html | 32 |
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(); @@ -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> |