nodeinfo box

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;
+}

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