From eb67713db7ceae4e384c515f82316562c7aae3a4 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@gmail.com>
Date: Sun, 3 Jun 2012 17:17:48 +0200
Subject: [PATCH] nodeinfo box

---
 html/force.css | 25 +++++++++++++++++++++++++
 html/force.js  | 18 ++++++++++++++++++
 2 files changed, 43 insertions(+)

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")