diff --git a/html/force.css b/html/force.css
index 32d8ddb..28b8e2a 100644
--- a/html/force.css
+++ b/html/force.css
@@ -20,8 +20,33 @@ line.link {
#chart {
background-image: url(gplaypattern.png);
+ position: relative;
}
.node.highlight ellipse {
fill: #FFF0B3;
}
+
+#nodeinfo {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ background: #fff;
+ border: 1px solid #ddd;
+ padding: 0.5em;
+ font-family: arial, helvatica;
+}
+
+#nodeinfo h1, p {
+ color: #555;
+}
+
+#nodeinfo h1 {
+ font-size: 10pt;
+ margin: 0 0 0.5em;
+}
+
+#nodeinfo p {
+ font-size: 10pt;
+ margin: 0;
+}
diff --git a/html/force.js b/html/force.js
index a3981aa..5d1e6ed 100644
--- a/html/force.js
+++ b/html/force.js
@@ -73,6 +73,23 @@ d3.json("nodes.json", function(json) {
});
};
}
+
+ function show_node_info(d) {
+ if (!(typeof nodeinfo === 'undefined'))
+ nodeinfo.remove();
+
+ nodeinfo = d3.select("#chart").append("div")
+ .attr("id", "nodeinfo");
+
+ nodeinfo.append("h1")
+ .text(d.name);
+
+ nodeinfo.append("p")
+ .text(d.macs);
+
+ nodeinfo.append("p")
+ .text(d.gps);
+ }
var node = vis.selectAll("svg.node")
.data(json.nodes)
@@ -80,6 +97,7 @@ d3.json("nodes.json", function(json) {
.attr("class", "node")
.on("mouseover", fade(.2))
.on("mouseout", fade(1))
+ .on("click", show_node_info)
.call(force.drag);
node.append("ellipse")