<!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="4.0.0" src="https://d3js.org/d3.v4.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.scaleOrdinal(d3.schemeCategory20b);
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.arc()
.innerRadius(radius - donutWidth)
.outerRadius(radius);
var pie = d3.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
Monday,379130
Tuesday,424923
Wednesday,430728
Thursday,432138
Friday,428295
Saturday,368239
Sunday,282701
Learn more at: http://zeroviscosity.com/category/d3-js-step-by-step