Points are labeled with marker names and hovering causes the LRS

value to appear above the plot

3 files changed, 72 insertions, 31 deletions

diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.coffee b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
index 8ae53515..41632723 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
@@ -11,12 +11,13 @@ $ ->
 
             @x_coords = []
             @y_coords = []
+            @marker_names = []
             @get_coordinates()
             
             @x_max = d3.max(@x_coords)
             @y_max = d3.max(@y_coords)
 
-            @plot_coordinates = _.zip(@x_coords, @y_coords)
+            @plot_coordinates = _.zip(@x_coords, @y_coords, @marker_names)
             @create_graph()
 
 
@@ -42,8 +43,12 @@ $ ->
         
                 @x_coords.push(((chr-1) * 200) + parseFloat(result.Mb))
                 @y_coords.push(result.lrs_value)
+                @marker_names.push(result.name)
 
 
+        display_info: (d) ->
+            $("#coords").text(d[1])
+
         create_graph: () ->
             svg = d3.select("#manhattan_plots")
                         .append("svg")
@@ -51,6 +56,21 @@ $ ->
                         .attr("width", @plot_width)
                         .attr("height", @plot_height)
         
+            svg.selectAll("text")
+                .data(@plot_coordinates)
+                .enter()
+                .append("text")
+                .attr("x", (d) =>
+                    return (@plot_width * d[0]/@x_max)
+                )
+                .attr("y", (d) =>
+                    return @plot_height - ((0.8*@plot_height) * d[1]/@y_max)
+                )
+                .text((d) => d[2])
+                .attr("font-family", "sans-serif")
+                .attr("font-size", "12px")
+                .attr("fill", "black");
+            
             svg.selectAll("circle")
                 .data(@plot_coordinates)
                 .enter()
@@ -63,33 +83,45 @@ $ ->
                 )
                 .attr("r", 2)
                 .classed("circle", true)
-                .on("mouseover", () =>
+                .on("mouseover", (d) =>
                     d3.select(d3.event.target).classed("d3_highlight", true)
                         .attr("r", 5)
                         .attr("fill", "yellow")
+                        .call(@display_info(d))
+                        #.append("svg:text")
+                        #.text("test")
+                        #.attr("dx", 12)
+                        #.attr("dy", ".35em")
+                        #.attr("font-family", "sans-serif")
+                        #.attr("font-size", "11px")
+                        #.attr("fill", "red")
+                        #.attr("x", @plot_width * d[0]/@x_max)
+                        #.attr("y", @plot_height - ((0.8*@plot_height) * d[1]/@y_max))                 
+
+                        
+                    #d3.select(this).enter().append("svg:text") 
+                    #                .text("test") 
+                    #                .attr("x", function(d, i) { return i; } ) 
+                    #                .attr("y", function(d) { return -1 * d; }) 
+                    #                          }) 
+                        #.attr("font-family", "sans-serif")
+                        #.attr("font-size", "11px")
+                        #.attr("fill", "red")
+                        #.text(d[1])
+                        #.attr("x", @plot_width * d[0]/@x_max)
+                        #.attr("y", @plot_height - ((0.8*@plot_height) * d[1]/@y_max))
+                        #.attr("font-family", "sans-serif")
+                        #.attr("font-size", "11px")
+                        #.attr("fill", "red")
                 )
                 .on("mouseout", () =>
                     d3.select(d3.event.target).classed("d3_highlight", false)
                         .attr("r", 2)
                         .attr("fill", "black")
                 )
+                .attr("title", "foobar")
+                
 
-                svg.selectAll("text")
-                    .data(@plot_coordinates)
-                    .enter()
-                    .append("text")
-                    .text( (d) =>
-                        return d[1]
-                    )
-                    .attr("x", (d) =>
-                        return (@plot_width * d[0]/@x_max)
-                    )
-                    .attr("y", (d) =>
-                        return @plot_height - ((0.8*@plot_height) * d[1]/@y_max)
-                    )                 
-                    .attr("font-family", "sans-serif")
-                    .attr("font-size", "11px")
-                    .attr("fill", "red")
 
             x = d3.scale.linear()
                 .domain([0, @x_max])
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.js b/wqflask/wqflask/static/new/javascript/marker_regression.js
index 9f82081c..68e04034 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.js
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.js
@@ -12,10 +12,11 @@
         this.plot_width = 1000;
         this.x_coords = [];
         this.y_coords = [];
+        this.marker_names = [];
         this.get_coordinates();
         this.x_max = d3.max(this.x_coords);
         this.y_max = d3.max(this.y_coords);
-        this.plot_coordinates = _.zip(this.x_coords, this.y_coords);
+        this.plot_coordinates = _.zip(this.x_coords, this.y_coords, this.marker_names);
         this.create_graph();
       }
 
@@ -51,31 +52,36 @@
             }
           }
           this.x_coords.push(((chr - 1) * 200) + parseFloat(result.Mb));
-          _results.push(this.y_coords.push(result.lrs_value));
+          this.y_coords.push(result.lrs_value);
+          _results.push(this.marker_names.push(result.name));
         }
         return _results;
       };
 
+      Manhattan_Plot.prototype.display_info = function(d) {
+        return $("#coords").text(d[1]);
+      };
+
       Manhattan_Plot.prototype.create_graph = function() {
         var svg, x, y,
           _this = this;
         svg = d3.select("#manhattan_plots").append("svg").style('border', '2px solid black').attr("width", this.plot_width).attr("height", this.plot_height);
+        svg.selectAll("text").data(this.plot_coordinates).enter().append("text").attr("x", function(d) {
+          return _this.plot_width * d[0] / _this.x_max;
+        }).attr("y", function(d) {
+          return _this.plot_height - ((0.8 * _this.plot_height) * d[1] / _this.y_max);
+        }).text(function(d) {
+          return d[2];
+        }).attr("font-family", "sans-serif").attr("font-size", "12px").attr("fill", "black");
         svg.selectAll("circle").data(this.plot_coordinates).enter().append("circle").attr("cx", function(d) {
           return _this.plot_width * d[0] / _this.x_max;
         }).attr("cy", function(d) {
           return _this.plot_height - ((0.8 * _this.plot_height) * d[1] / _this.y_max);
-        }).attr("r", 2).classed("circle", true).on("mouseover", function() {
-          return d3.select(d3.event.target).classed("d3_highlight", true).attr("r", 5).attr("fill", "yellow");
+        }).attr("r", 2).classed("circle", true).on("mouseover", function(d) {
+          return d3.select(d3.event.target).classed("d3_highlight", true).attr("r", 5).attr("fill", "yellow").call(_this.display_info(d));
         }).on("mouseout", function() {
           return d3.select(d3.event.target).classed("d3_highlight", false).attr("r", 2).attr("fill", "black");
-        });
-        svg.selectAll("text").data(this.plot_coordinates).enter().append("text").text(function(d) {
-          return d[1];
-        }).attr("x", function(d) {
-          return _this.plot_width * d[0] / _this.x_max;
-        }).attr("y", function(d) {
-          return _this.plot_height - ((0.8 * _this.plot_height) * d[1] / _this.y_max);
-        }).attr("font-family", "sans-serif").attr("font-size", "11px").attr("fill", "red");
+        }).attr("title", "foobar");
         x = d3.scale.linear().domain([0, this.x_max]).range([0, this.plot_width]);
         y = d3.scale.linear().domain([0, this.y_max]).range([0, this.plot_height]);
         return svg.selectAll("line").data(x.ticks(this.max_chr)).enter().append("line").attr("x1", x).attr("x2", x).attr("y1", 0).attr("y2", this.plot_height).style("stroke", "#ccc");
diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html
index e572c5d9..b4f8300f 100644
--- a/wqflask/wqflask/templates/marker_regression.html
+++ b/wqflask/wqflask/templates/marker_regression.html
@@ -18,7 +18,10 @@
     </header>
 
     <div class="container">
-        <div id="manhattan_plots" class="manhattan_plots"></div>
+        <div id="coords">Foobar</div>
+        <div id="manhattan_plots" class="manhattan_plots">
+            
+        </div>
         <table cellpadding="0" cellspacing="0" border="0" id="qtl_results" class="table table-hover table-striped table-bordered">
             <thead>
                 <tr>