Created
October 24, 2016 17:40
-
-
Save sarubenfeld/56dc691df199b4055d90e66b9d5fc0d2 to your computer and use it in GitHub Desktop.
D3: How you can use Tooltips in v4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>D3: Tooltips in v4</title> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style type="text/css"> | |
rect:hover { | |
fill: orange; | |
} | |
#tooltip { | |
position: absolute; | |
width: 200px; | |
height: auto; | |
padding: 10px; | |
background-color: white; | |
-webkit-border-radius: 10px; | |
-moz-border-radius: 10px; | |
border-radius: 10px; | |
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); | |
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); | |
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); | |
pointer-events: none; | |
} | |
#tooltip.hidden { | |
display: none; | |
} | |
#tooltip p { | |
margin: 0; | |
font-family: Futura; | |
font-size: 16px; | |
line-height: 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="tooltip" class="hidden"> | |
<p><strong>Percentage Value</strong></p> | |
<p><span id="value">100</span>%</p> | |
</div> | |
<script type="text/javascript"> | |
//Width and height | |
var width = 1200; | |
var height = 500; | |
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, | |
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; | |
var xScale = d3.scaleBand() | |
.domain(d3.range(0, dataset.length)) | |
.range([0, width], 0.05); | |
var yScale = d3.scaleLinear() | |
.domain([0, d3.max(dataset)]) | |
.range([0, height]); | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
svg.selectAll("rect") | |
.data(dataset) | |
.enter() | |
.append("rect") | |
.attr("x", function(d, i) { | |
return xScale(i); | |
}) | |
.attr("y", function(d) { | |
return height - yScale(d); | |
}) | |
.attr("width", xScale.bandwidth()) | |
.attr("height", function(d) { | |
return yScale(d); | |
}) | |
.attr("fill", function(d) { | |
return "rgb(0, 0, " + (d * 10) + ")"; | |
}) | |
.on("mouseover", function(d) { | |
var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() / 2; | |
var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + height / 2; | |
d3.select("#tooltip") | |
.style("left", xPosition + "px") | |
.style("top", yPosition + "px") | |
.select("#value") | |
.text(d); | |
d3.select("#tooltip").classed("hidden", false); | |
}) | |
.on("mouseout", function() { | |
d3.select("#tooltip").classed("hidden", true); | |
}) | |
.on("click", function() { | |
sortBars(); | |
}); | |
var sortOrder = false; | |
var sortBars = function() { | |
sortOrder = !sortOrder; | |
svg.selectAll("rect") | |
.sort(function(a, b) { | |
if (sortOrder) { | |
return d3.ascending(a, b); | |
} else { | |
return d3.descending(a, b); | |
} | |
}) | |
.transition() | |
.delay(function(d, i) { | |
return i * 50; | |
}) | |
.duration(1000) | |
.attr("x", function(d, i) { | |
return xScale(i); | |
}); | |
}; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment