adding detail of hovered point to interface

fileops.js

@@ -25,7 +25,7 @@ var loadFile = function(text, dataStart, xCol, yCol, grpCol) {
   ds.groupCol = grpCol;
   var delimiter = ",";
 
-  var lines = text.trim("\r").split("\n");
+  var lines = text.trim().split("\n").map(function(d) { return d.trim(); });
   for (var i = 0; i < lines.length; i++) {
     lines[i] = lines[i].split(delimiter);
   }
@@ -46,7 +46,7 @@ var loadFile = function(text, dataStart, xCol, yCol, grpCol) {
     // Otherwise, slice data by the group-by column.
     var thisGroup = 0;
     if (grpCol != -1) {
-      thisGroupName = lines[i][ds.groupCol]
+      var thisGroupName = lines[i][ds.groupCol]
       if (ds.groupNames.indexOf(thisGroupName) == -1)
         ds.groupNames.push(thisGroupName);
 

index.html

@@ -61,7 +61,13 @@
         <div id="splatters">
 
         </div>
-        <div id="legend" class="panel panel-default">
+        <div id="detail" class="panel panel-default splatter-panel">
+            <div class="panel-heading">
+                <h3 class="panel-title">Point Detail</h3>
+            </div>
+            <div class="panel-body" id="detail-text">[no point selected]</div>
+        </div>
+        <div id="legend" class="panel panel-default splatter-panel">
             <div class="panel-heading">
                 <h3 class="panel-title">Legend</h3>
             </div>

splatterplot.js

@@ -853,7 +853,6 @@ gl.onmousedown = function(e) {
   panY = gl.canvas.height - e.y;
 };
 
-var lastPt = {'x': Number.MAX_VALUE, 'y': Number.MIN_VALUE};
 gl.onmousemove = function(e) {
   if (drags(e)) {
     screenOffset[0] += e.x - panX;
@@ -862,7 +861,7 @@ gl.onmousemove = function(e) {
     panX = e.x;
     panY = gl.canvas.height - e.y;
     gl.ondraw();
-  } else {
+  } else if (pointTree.hasOwnProperty("nearest")) {
     // get actual mouse position within the canvas
     var mouseX = e.x - gl.canvas.offsetLeft;
     var mouseY = gl.canvas.height - (e.y - gl.canvas.offsetParent.offsetTop);
@@ -897,10 +896,15 @@ gl.onmousemove = function(e) {
 
     // get closest point
     var nearestPt = pointTree.nearest({'x': curPos[0], 'y': curPos[1]}, 1)[0];
-    if (!(lastPt.x == nearestPt[0].x && lastPt.y == nearestPt[0].y)) {    
-      console.log("%s (%4.3f, %4.3f), distance %4.3f", nearestPt[0].grp, nearestPt[0].x, nearestPt[0].y, nearestPt[1]);
-      lastPt = nearestPt[0];
-    }
+
+    var grpColor = ds.colors[ds.groupNames.indexOf(nearestPt[0].grp)];
+    var cssColor = grpColor.map(function(c) { return Math.round(c * 255); }).join(",");
+
+    var detailStr = '<div class="legend-swatch" style="background-color: ';
+    detailStr += 'rgb(' + cssColor + ');"></div> ';
+    detailStr += '<strong>' + nearestPt[0].grp + "</strong><br />";
+    detailStr += "(" + nearestPt[0].x.toFixed(2) + ", " + nearestPt[0].y.toFixed(2) + ")";
+    $("#detail-text").html(detailStr);
   }
 };
 

style.css

@@ -17,17 +17,20 @@ html, body {
 	display: inline-block;
 }
 
-#legend { 
+.splatter-panel {
 	background-color: #fff;
 	border: 1px solid black;
 	display: inline-block;
 	width: 150px;
 	position: absolute;
-	bottom: -10px;
 	margin-left: 10px;
 	text-align: left;
 }
 
+#detail {
+	bottom: -10px;
+}
+
 #legend li { 
 	display: block;
 	margin-bottom: 7px;