Some D3 Tips
Creating Tooltips in D3
Tooltip is the term used to reference the small box which appears over certain elements of a web graphic, offering more information to the user.
There are numerous ways to create tooltips. This tutorial will show one way using a tooltip.
Using d3-tip
A developer named Justin Palmer created a D3 tooltip, and is hosting it for free on Github. You can download the whole package, install with a utility called Bower, or you can just copy and paste the JavaScript file into your own project.
To include the tooltip in your own project, make sure you link to the JavaScript file after you include the D3 library. In the example below, we named the d3 tip file d3tip.js.
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3tip.js"></script>
Next, in your code, you will need to declare a variable to store the d3-tip element. In this variable, you will also describe what part of your data should be displayed in the tooltip.
var tip = d3.tip()
.attr("class", "d3-tip")
.html(function(d) {
//you would modify what you want to show up in box here.
return d;
});
The d variable refers to the data of the element which invokes the tooltip. Let’s hypothetically say that a piece of your data was a property called “pop” for population. Our tooltip might look like this:
var tip = d3.tip()
.attr("class", "d3-tip")
.html(function(d) {
//hypothetical example:
var content = "<strong>Population:</strong> " + d.pop;
return content;
});
In the example above, the d.pop will refer to each element that invoked the tooltip. This would only work in cases where a “pop” property existed in the data.
To actually run the code, you’ll need two more things: 1) To load in the CSS for the tooltip, and 2) call the tooltip on mouseover. The CSS can be downloaded here and included in your own stylesheets.
//via d3-tip readme:
/* Invoke the tip in the context of your visualization */
vis.call(tip)
vis.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('width', function() { return x.rangeBand() })
.attr('height', function(d) { return h - y(d) })
.attr('y', function(d) { return y(d) })
.attr('x', function(d, i) { return x(i) })
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
Example in Action
Below is an example of a simple bubble chart using d3-tip.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Bubble Chart</title>
<link href="http://rawgit.com/Caged/d3-tip/master/examples/example-styles.css" rel="stylesheet">
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://rawgit.com/Caged/d3-tip/master/index.js" charset="utf-8"></script>
<script>
var margin = {top:0, right:0, bottom:0, left:0},
width = 400 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var data = [
{name: "Apple", value: 20},
{name: "Banana", value: 12},
{name: "Cherry", value: 10}
];
var bubble = d3.layout.pack()
.size([width, height])
.padding(1.5);
var nodes = bubble.nodes({children: data})
.filter(function(d) { return !d.children; });
var tip = d3.tip()
.attr("class", "d3-tip")
.html(function(d) { return d.name; });
//setup the tooltip
svg.call(tip);
svg.selectAll(".bubble")
.data(nodes)
.enter()
.append("circle")
.attr("r", function(d){ return d.r; })
.attr("cx", function(d){ return d.x; })
.attr("cy", function(d){ return d.y; })
.style("fill", "red")
//show and hide the tooltip during mouse events
.on("mouseover", tip.show)
.on("mouseout", tip.hide);
</script>
</body>
</html>