Skip to content

Commit

Permalink
add tooltips for all graphs
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeffreyshen19
jeffreyshen19 committed May 24, 2018
1 parent 92ba4a7 commit 746cc11
Show file tree
Hide file tree
Showing 7 changed files with 133 additions and 89 deletions.
2 changes: 1 addition & 1 deletion dist/CSS/main.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/script-min.js
View file

Large diffs are not rendered by default.

105 changes: 62 additions & 43 deletions dist/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ function drawCurve(id){
.classed("hidden", false);

tooltip.classed("hidden", false)
.html("<strong>At " + mouseX.toFixed(2) + "% of the Vote</strong>:<br>Republican Seat Share: " + datum.seatsR.toFixed(2) + "%<br>Democrat Seat Share: " + datum.seatsD.toFixed(2) + "%")
.html("<strong>At " + datum.votes.toFixed(2) + "% of the Vote</strong>:<br>Republican Seat Share: " + datum.seatsR.toFixed(2) + "%<br>Democrat Seat Share: " + datum.seatsD.toFixed(2) + "%")
.style("left", (20 + mouse[0] + tooltip.node().offsetWidth > thisElement.node().offsetWidth ? mouse[0] - 20 - tooltip.node().offsetWidth : mouse[0] + 20) + "px")
.style("top", mouse[1] - 30 + "px");
}
Expand Down Expand Up @@ -271,23 +271,6 @@ function drawDemonstrationCurve(id){
var svg = d3.select("#" + id).classed("hidden", false).select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.on("mouseover", function(d){

})
.on("mousemove", function(d){
mouseX = x.invert(d3.mouse(this)[0] - margin.left).toFixed(2);

if(mouseX < 0 || mouseX > 100) tooltip.classed("hidden", true);
else{
tooltip.classed("hidden", false)
.html("At " + mouseX + "% of vote:<br><br>")
.style("left", d3.mouse(this)[0] + 20 + "px")
.style("top", height - 30 + "px");
}
})
.on("mouseout", function(d){
tooltip.classed("hidden", true);
})
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Expand Down Expand Up @@ -407,41 +390,77 @@ function drawHistoricalCurve(id){
var y = d3.scaleLinear().range([height, 0]).domain([-50, 50]);

//Make graph
var tooltip = d3.select("#" + id).select(".tooltip");
var mouseX;

var dataset = d3.select("#" + id).node().dataset;
var thisElement = d3.select("#" + id);
var tooltip = thisElement.select(".tooltip");

d3.select("#" + id).select('svg').selectAll("*").remove(); //Clear all past graph drawings
var svg = d3.select("#" + id).classed("hidden", false).classed("active-historical", true).select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.on("mouseover", function(d){
var dataset = thisElement.node().dataset;

})
.on("mousemove", function(d){
mouseX = x.invert(d3.mouse(this)[0] - margin.left).toFixed(2);
thisElement.select('svg').selectAll("*").remove(); //Clear all past graph drawings

if(mouseX < 0 || mouseX > 100) tooltip.classed("hidden", true);
else{
tooltip.classed("hidden", false)
.html("At " + mouseX + "% of vote:<br><br>")
.style("left", d3.mouse(this)[0] + 20 + "px")
.style("top", height - 30 + "px");
}
})
.on("mouseout", function(d){
tooltip.classed("hidden", true);
})
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var dot, tooltipLine, mouse, mouseX;

d3.csv("../data/historical-results/" + title + "/" + state + ".csv", function(error, data){
data.forEach(function(d){
d.y = parseFloat(d.y);
});

x.domain(data.map(function(d) { return d.year; }));
x.invert = d3.scaleQuantize().domain(x.range()).range(x.domain());

var svg = thisElement.classed("hidden", false).classed("active-historical", true).select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.on("mousemove", function(d){
mouse = d3.mouse(this);
mouseX = x.invert(mouse[0] - margin.left);
index = 0;
var datum;

for(index = 0; index < data.length; index++) {
if(data[index].year == mouseX) {
datum = data[index];
break;
}
}

dot = thisElement.select(".dot");
tooltipLine = thisElement.select(".tooltip-line");

dot.attr("cx", x(datum.year))
.attr("cy", y(datum.y))
.classed("hidden", false);

tooltipLine.attr("x1", x(datum.year))
.attr("x2", x(datum.year))
.classed("hidden", false);

tooltip.classed("hidden", false)
.html("<strong>In " + datum.year + "</strong>:<br>" + dataset.title + ": " + datum.y.toFixed(2) + "%")
.style("left", (20 + mouse[0] + tooltip.node().offsetWidth > thisElement.node().offsetWidth ? mouse[0] - 20 - tooltip.node().offsetWidth : mouse[0] + 20) + "px")
.style("top", mouse[1] - 30 + "px");
})
.on("mouseout", function(d){
tooltip.classed("hidden", true);
dot.classed("hidden", true);
tooltipLine.classed("hidden", true);
})
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("circle")
.attr("class", "dot hidden")
.style("fill", "black")
.attr("r", 5);

svg.append("line")
.attr("class", "tooltip-line hidden")
.attr("x1", x(0))
.attr("y1", y(-50))
.attr("x2", x(0))
.attr("y2", y(50))
.style("stroke", "black")
.style("stroke-width", "1")
.style("stroke-dasharray", "5,5");

//Add x axis w/ label
svg.append("g")
Expand Down
2 changes: 1 addition & 1 deletion src/JS/drawCurve.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ function drawCurve(id){
.classed("hidden", false);

tooltip.classed("hidden", false)
.html("<strong>At " + mouseX.toFixed(2) + "% of the Vote</strong>:<br>Republican Seat Share: " + datum.seatsR.toFixed(2) + "%<br>Democrat Seat Share: " + datum.seatsD.toFixed(2) + "%")
.html("<strong>At " + datum.votes.toFixed(2) + "% of the Vote</strong>:<br>Republican Seat Share: " + datum.seatsR.toFixed(2) + "%<br>Democrat Seat Share: " + datum.seatsD.toFixed(2) + "%")
.style("left", (20 + mouse[0] + tooltip.node().offsetWidth > thisElement.node().offsetWidth ? mouse[0] - 20 - tooltip.node().offsetWidth : mouse[0] + 20) + "px")
.style("top", mouse[1] - 30 + "px");
}
Expand Down
17 changes: 0 additions & 17 deletions src/JS/drawDemonstrationCurve.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,23 +31,6 @@ function drawDemonstrationCurve(id){
var svg = d3.select("#" + id).classed("hidden", false).select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.on("mouseover", function(d){

})
.on("mousemove", function(d){
mouseX = x.invert(d3.mouse(this)[0] - margin.left).toFixed(2);

if(mouseX < 0 || mouseX > 100) tooltip.classed("hidden", true);
else{
tooltip.classed("hidden", false)
.html("At " + mouseX + "% of vote:<br><br>")
.style("left", d3.mouse(this)[0] + 20 + "px")
.style("top", height - 30 + "px");
}
})
.on("mouseout", function(d){
tooltip.classed("hidden", true);
})
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Expand Down
86 changes: 61 additions & 25 deletions src/JS/drawHistoricalCurves.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,41 +15,77 @@ function drawHistoricalCurve(id){
var y = d3.scaleLinear().range([height, 0]).domain([-50, 50]);

//Make graph
var tooltip = d3.select("#" + id).select(".tooltip");
var mouseX;
var thisElement = d3.select("#" + id);
var tooltip = thisElement.select(".tooltip");

var dataset = d3.select("#" + id).node().dataset;
var dataset = thisElement.node().dataset;

d3.select("#" + id).select('svg').selectAll("*").remove(); //Clear all past graph drawings
var svg = d3.select("#" + id).classed("hidden", false).classed("active-historical", true).select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.on("mouseover", function(d){
thisElement.select('svg').selectAll("*").remove(); //Clear all past graph drawings

})
.on("mousemove", function(d){
mouseX = x.invert(d3.mouse(this)[0] - margin.left).toFixed(2);

if(mouseX < 0 || mouseX > 100) tooltip.classed("hidden", true);
else{
tooltip.classed("hidden", false)
.html("At " + mouseX + "% of vote:<br><br>")
.style("left", d3.mouse(this)[0] + 20 + "px")
.style("top", height - 30 + "px");
}
})
.on("mouseout", function(d){
tooltip.classed("hidden", true);
})
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var dot, tooltipLine, mouse, mouseX;

d3.csv("../data/historical-results/" + title + "/" + state + ".csv", function(error, data){
data.forEach(function(d){
d.y = parseFloat(d.y);
});

x.domain(data.map(function(d) { return d.year; }));
x.invert = d3.scaleQuantize().domain(x.range()).range(x.domain());

var svg = thisElement.classed("hidden", false).classed("active-historical", true).select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.on("mousemove", function(d){
mouse = d3.mouse(this);
mouseX = x.invert(mouse[0] - margin.left);
index = 0;
var datum;

for(index = 0; index < data.length; index++) {
if(data[index].year == mouseX) {
datum = data[index];
break;
}
}

dot = thisElement.select(".dot");
tooltipLine = thisElement.select(".tooltip-line");

dot.attr("cx", x(datum.year))
.attr("cy", y(datum.y))
.classed("hidden", false);

tooltipLine.attr("x1", x(datum.year))
.attr("x2", x(datum.year))
.classed("hidden", false);

tooltip.classed("hidden", false)
.html("<strong>In " + datum.year + "</strong>:<br>" + dataset.title + ": " + datum.y.toFixed(2) + "%")
.style("left", (20 + mouse[0] + tooltip.node().offsetWidth > thisElement.node().offsetWidth ? mouse[0] - 20 - tooltip.node().offsetWidth : mouse[0] + 20) + "px")
.style("top", mouse[1] - 30 + "px");
})
.on("mouseout", function(d){
tooltip.classed("hidden", true);
dot.classed("hidden", true);
tooltipLine.classed("hidden", true);
})
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("circle")
.attr("class", "dot hidden")
.style("fill", "black")
.attr("r", 5);

svg.append("line")
.attr("class", "tooltip-line hidden")
.attr("x1", x(0))
.attr("y1", y(-50))
.attr("x2", x(0))
.attr("y2", y(50))
.style("stroke", "black")
.style("stroke-width", "1")
.style("stroke-dasharray", "5,5");

//Add x axis w/ label
svg.append("g")
Expand Down
8 changes: 7 additions & 1 deletion src/SCSS/_structure.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
display: none;
}

.graph, .graph-historical{
.graph, .graph-historical-gk, .graph-historical-symmetry, .graph-historical-responsiveness{
position: relative;
.tooltip{
position: absolute;
Expand All @@ -103,6 +103,12 @@
}
}

.graph-historical-gk, .graph-historical-symmetry, .graph-historical-responsiveness{
.tooltip{
background: #EEEEEE;
}
}

#explore{
min-height: 600px;
}

0 comments on commit 746cc11

Please sign in to comment.