Permalink
Browse files

Merge pull request #50 from seatgeek/issue-43

Graph hover states. Closes #43
  • Loading branch information...
2 parents 6d1e290 + 5f6f2fb commit f438b91a9760d89ab775f289195a7ba3cf6d7608 @matthewhudson matthewhudson committed Apr 12, 2013
@@ -174,6 +174,10 @@
ul.experiments li table tr td:nth-child(even) {
background: none repeat scroll 0 0 rgba(170, 170, 170, 0.02);
}
+ ul.experiments li table tr.highlight td {
+ color: #fff;
+ background: none repeat scroll 0 0 rgba(170,170,170,0.05);
+ }
/* The following lines are to combat a Chrome bug: http://code.google.com/p/chromium/issues/detail?id=62445 */
ul.experiments li table tr {
@@ -231,6 +235,9 @@
fill: none;
stroke-width: 2.2px;
}
+.chart .line-hover {
+ stroke-width: 6px;
+}
.chart g.tick text {
font-weight: 400;
font-size: 12px;
@@ -550,6 +557,18 @@ hr {
margin-top: 90px;
text-align: center;
}
+div.tooltip {
+ position: absolute;
+ text-align: center;
+ width: 60px;
+ height: 12px;
+ padding: 8px;
+ font: 10px sans-serif;
+ background: #ddd;
+ border: solid 1px #aaa;
+ border-radius: 8px;
+ pointer-events: none;
+}
/* Chart color values.*/
.color-1 {
View
@@ -75,6 +75,7 @@ $(function () {
my.drawLine = function (data, color) {
color = color || "#9d5012";
+ var line_id = my.experiment + "-line-" + _.indexOf(my.colors, color);
var line = d3.svg.line()
.x(function (d) {
return my.xScale(d.date);
@@ -86,20 +87,52 @@ $(function () {
my.svg.append("path")
.datum(data)
.attr("class", "line")
+ .attr("id", line_id)
.attr("d", line)
.attr("style", "stroke:" + color);
+
+ my.svg.select("#" + line_id)
+ .data(data)
+ .on("mouseover", function (d) {
+ // Sort the lines so the current line is "above" the non-hovered lines
+ d3.select(this.parentNode.appendChild(this));
+
+ // Highlight line
+ var currClass = d3.select(this).attr("class");
+ d3.select(this).attr("class", currClass + " line-hover");
+
+ // Highlight corresponding table alternative
+ var table = $('.' + d3.event.target.id).closest('div').find('table')
+ table.find('tr').removeClass('highlight');
+ table.find('.' + d3.event.target.id).addClass('highlight');
+ })
+ .on("mouseout", function (d) {
+ // Remove line highlight
+ d3.select(this).attr("class", "line");
+ var id = d3.event.target.id;
+
+ // Remove table highlight
+ $('.' + id).removeClass('highlight');
+ });
};
my.drawCircle = function (data, color) {
color = color || "#9d5012";
+ var id = my.experiment + "-line-" + _.indexOf(my.colors, color);
my.svg.selectAll("dot")
.data(data)
.enter()
.append("circle")
+ .attr("class", "circle")
+ .attr("id", id)
.attr("r", 5)
.attr("cx", function(d) { return my.xScale(d.date); })
.attr("cy", function(d) { return my.yScale(d.close); })
- .attr("style", "fill:" + color);
+ .attr("style", "fill:" + color)
+ .on("mouseover", function (d) {
+ // Sort the lines so the current line is "above" the non-hovered lines
+ d3.select(this.parentNode.appendChild(this));
+ });
};
my.drawArea = function (data) {
@@ -41,6 +41,42 @@ $(function () {
});
my.el.append(my.template(data));
+ $("li[data-name='" + my.name + "'] tr").hover(
+ function () {
+ var alt_name = $(this).attr('class');
+ if (!alt_name) return;
+
+ $(this).addClass('highlight');
+
+ var line = d3.select("#" + alt_name);
+ var id = line.attr('id');
+ var el = d3.select('#' + id)[0][0];
+
+ if (line.attr('class') === 'circle') {
+ line.attr('r', 7);
+ } else {
+ line.attr('class', line.attr('class') + " line-hover");
+ }
+
+ // Sort the lines so the current line is "above" the non-hovered lines
+ el.parentNode.appendChild(el);
+ },
+ function () {
+ $(this).removeClass('highlight');
+
+ var alt_name = $(this).attr('class');
+ if (!alt_name) return;
+
+ var line = d3.select('#' + alt_name);
+
+ if (line.attr('class') === 'circle') {
+ line.attr('r', 5);
+ } else {
+ line.attr('class', 'line');
+ }
+ }
+ );
+
var chart = new Chart(my.name, data);
chart.draw();
my.callback();
@@ -41,7 +41,7 @@ <h3 class="name">
<th>Confidence</th>
</tr>
<% _.each(experiment.alternatives, function (alt, index) { %>
- <tr>
+ <tr class="<%- experiment.name %>-line-<%- index %>">
<td>
<span class="circle color-<%- (index + 1) %>">
<% if (alt.is_winner) { %>
@@ -55,7 +55,7 @@ <h3 class="name">
<th>Winner</th>
</tr>
<% _.each(experiment.alternatives, function (alt, index) { %>
- <tr>
+ <tr class="<%- experiment.name %>-line-<%- index %>">
<td>
<span class="circle color-<%- (index + 1) %>">
<% if (alt.is_winner) { %>
@@ -99,7 +99,7 @@ <h3 class="name">
</script>
<div id="details-page">
- <ul class="experiments"><li></li></ul>
+ <ul class="experiments"><li data-name="{{ experiment.name }}"></li></ul>
</div>
<div class="modal hide fade" id="desc-modal">

0 comments on commit f438b91

Please sign in to comment.