Skip to content

Instantly share code, notes, and snippets.

@cflavs
Created February 16, 2016 19:34
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
Tooltip Pie Chart
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>D3.js Step by Step: Step 5 - Adding Tooltips</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" rel="stylesheet" data-semver="3.0.1" data-require="normalize@*" />
<style>
#chart { /* NEW */
height: 360px; /* NEW */
position: relative; /* NEW */
width: 360px; /* NEW */
} /* NEW */
.tooltip { /* NEW */
background: #eee; /* NEW */
box-shadow: 0 0 5px #999999; /* NEW */
color: #333; /* NEW */
display: none; /* NEW */
font-size: 12px; /* NEW */
left: 130px; /* NEW */
padding: 10px; /* NEW */
position: absolute; /* NEW */
text-align: center; /* NEW */
top: 95px; /* NEW */
width: 80px; /* NEW */
z-index: 10; /* NEW */
} /* NEW */
.legend {
font-size: 12px;
}
rect {
stroke-width: 2;
}
</style>
</head>
<body>
<div id="chart"></div>
<script data-require="d3@*" data-semver="3.4.6" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
<script>
(function(d3) {
'use strict';
var width = 360;
var height = 360;
var radius = Math.min(width, height) / 2;
var donutWidth = 75;
var legendRectSize = 18;
var legendSpacing = 4;
var color = d3.scale.category20b();
var svg = d3.select('#chart')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + (width / 2) +
',' + (height / 2) + ')');
var arc = d3.svg.arc()
.innerRadius(radius - donutWidth)
.outerRadius(radius);
var pie = d3.layout.pie()
.value(function(d) { return d.count; })
.sort(null);
var tooltip = d3.select('#chart') // NEW
.append('div') // NEW
.attr('class', 'tooltip'); // NEW
tooltip.append('div') // NEW
.attr('class', 'label'); // NEW
tooltip.append('div') // NEW
.attr('class', 'count'); // NEW
tooltip.append('div') // NEW
.attr('class', 'percent'); // NEW
d3.csv('weekdays.csv', function(error, dataset) {
dataset.forEach(function(d) {
d.count = +d.count;
});
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.label);
});
path.on('mouseover', function(d) { // NEW
var total = d3.sum(dataset.map(function(d) { // NEW
return d.count; // NEW
})); // NEW
var percent = Math.round(1000 * d.data.count / total) / 10; // NEW
tooltip.select('.label').html(d.data.label); // NEW
tooltip.select('.count').html(d.data.count); // NEW
tooltip.select('.percent').html(percent + '%'); // NEW
tooltip.style('display', 'block'); // NEW
}); // NEW
path.on('mouseout', function() { // NEW
tooltip.style('display', 'none'); // NEW
}); // NEW
/* OPTIONAL
path.on('mousemove', function(d) { // NEW
tooltip.style('top', (d3.event.pageY + 10) + 'px') // NEW
.style('left', (d3.event.pageX + 10) + 'px'); // NEW
}); // NEW
*/
var legend = svg.selectAll('.legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
var horz = -2 * legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color);
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; });
});
})(window.d3);
</script>
</body>
</html>
label count
AM 739.43
BA 365.79
CE 235.34
DF 229.14
ES 159.08
GO 82.02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment