cflavs/index.html

## index.html
<!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>

## weekdays.csv

          
            label
            count

            
              AM
              	739.43

            
              BA
              	365.79

            
              CE
              	235.34

            
              DF
              	229.14

            
              ES
              	159.08

            
              GO
              	82.02
	<!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>