aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZachary Sloan2013-02-15 16:56:41 -0600
committerZachary Sloan2013-02-15 16:56:41 -0600
commit0f0f39bb34e57ad673cbb1d221825a2c2328abe0 (patch)
treeba406c3a047aa6686a863a5025f0785211f9a159
parent4af315eda76739763d4cdc4b1e078e436b6c3f5b (diff)
downloadgenenetwork2-0f0f39bb34e57ad673cbb1d221825a2c2328abe0.tar.gz
Made it to where hovering over a point in the manhattan plot changes
its style
-rw-r--r--wqflask/wqflask/static/new/javascript/marker_regression.coffee28
-rw-r--r--wqflask/wqflask/static/new/javascript/marker_regression.js13
-rw-r--r--wqflask/wqflask/templates/marker_regression.html1
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 -->