diff options
| author | Zachary Sloan | 2013-02-15 16:56:41 -0600 |
|---|---|---|
| committer | Zachary Sloan | 2013-02-15 16:56:41 -0600 |
| commit | 0f0f39bb34e57ad673cbb1d221825a2c2328abe0 (patch) | |
| tree | ba406c3a047aa6686a863a5025f0785211f9a159 | |
| parent | 4af315eda76739763d4cdc4b1e078e436b6c3f5b (diff) | |
| download | genenetwork2-0f0f39bb34e57ad673cbb1d221825a2c2328abe0.tar.gz | |
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 --> |