Made it to where hovering over a point in the manhattan plot changes

its style

3 files changed, 40 insertions, 2 deletions

diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.coffee b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
index 53f52704..8ae53515 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
@@ -62,6 +62,34 @@ $ ->
                     return @plot_height - ((0.8*@plot_height) * d[1]/@y_max)
                 )
                 .attr("r", 2)
+                .classed("circle", true)
+                .on("mouseover", () =>
+                    d3.select(d3.event.target).classed("d3_highlight", true)
+                        .attr("r", 5)
+                        .attr("fill", "yellow")
+                )
+                .on("mouseout", () =>
+                    d3.select(d3.event.target).classed("d3_highlight", false)
+                        .attr("r", 2)
+                        .attr("fill", "black")
+                )
+
+                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 1d3afacd..9f82081c 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.js
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.js
@@ -64,7 +64,18 @@
           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);
+        }).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");
+        }).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");
         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 b55580c3..e572c5d9 100644
--- a/wqflask/wqflask/templates/marker_regression.html
+++ b/wqflask/wqflask/templates/marker_regression.html
@@ -5,7 +5,6 @@
     <link rel="stylesheet" type="text/css" href="/static/new/css/marker_regression.css" />
     <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
     <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />
-    
 {% endblock %}
 {% block content %} <!-- Start of body -->