Animated Donut Chart with Labels, Legend and Tooltips

Animated Donut Chart in D3.js that includes labels, transitions when users select other option in the radio buttons, a legend and tooltips.

Based on https://gist.github.com/dbuezas/9306799

forked from juan-cb's block: Animated Donut Chart with Labels, Legend and Tooltips

forked from lcastrogarcia's block: Animated Donut Chart with Labels, Legend and Tooltips

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 960px;
  height: 500px;
  position: relative;
}

svg {
	width: 100%;
	height: 100%;
}

path.slice{
	stroke-width:2px;
}

polyline{
	opacity: .3;
	stroke: black;
	stroke-width: 2px;
	fill: none;
}

.labelValue
{
	font-size: 60%;
	opacity: .5;
	
}

.toolTip {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: absolute;
    display: none;
    width: auto;
    height: auto;
    background: none repeat scroll 0 0 white;
    border: 0 none;
    border-radius: 8px 8px 8px 8px;
    box-shadow: -3px 3px 15px #888888;
    color: black;
    font: 12px sans-serif;
    padding: 5px;
    text-align: center;
}
text {
  font: 12px sans-serif;
}
</style>
<body>
<form>
<label><input type="radio" name="dataset" id="radio_total" value="total" checked> Total</label>
<label><input type="radio" name="dataset" id="dataset1" value="femmes"> Option 1</label>
<label><input type="radio" name="dataset" id="dataset2" value="hommes"> Option 2</label>
</form>

d3.select("input[value=\"total\"]").property("checked", true);

var svg = d3.select("body")
	.append("svg")
	.append("g")

svg.append("g")
	.attr("class", "slices");
svg.append("g")
	.attr("class", "labelName");
svg.append("g")
	.attr("class", "labelValue");
svg.append("g")
	.attr("class", "lines");

var width = 960,
    height = 450,
	radius = Math.min(width, height) / 2;

var pie = d3.pie()
	.sort(null)
	.value(function(d) {
		return d.value;
	});

var arc = d3.arc()
	.outerRadius(radius * 0.8)
	.innerRadius(radius * 0.4);

var outerArc = d3.arc()
	.innerRadius(radius * 0.9)
	.outerRadius(radius * 0.9);

var legendRectSize = (radius * 0.05);
var legendSpacing = radius * 0.02;

var div = d3.select("body").append("div").attr("class", "toolTip");

svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var colorRange = d3.scaleOrdinal(d3.schemeCategory20);
var color = d3.scaleOrdinal()
	.range(colorRange.range());

datasetTotal = [
		{label:"Moins_25", value:20.1}, 
        {label:"Entre_25_45", value:45.05}, 
        {label:"Entre_45_70", value:29.58},
        {label:"Plus_70", value:5.28}
        //{label:"Category 5", value:19},
        //{label:"Category 6", value:27}
        ];

datasetOption1 = [
		{label:"Moins_25", value:18.07}, 
        {label:"Entre_25_45", value:45.37}, 
        {label:"Entre_45_70", value:30.29},
        {label:"Plus_70", value:6.27}
        //{label:"Category 5", value:36},
        //{label:"Category 6", value:0}
        ];

datasetOption2 = [
		{label:"Moins_25", value:20.74}, 
        {label:"Entre_25_45", value:44.95}, 
        {label:"Entre_45_70", value:29.35},
        {label:"Plus_70", value:4.96}
  			//{label:"Category 5", value:12},
        //{label:"Category 6", value:23}
        ];

d3.selectAll("input")
	.on("change", selectDataset);
	
function selectDataset()
{
	var value = this.value;
	if (value == "total")
	{
		change(datasetTotal);
	}
	else if (value == "femmes")
	{
		change(datasetOption1);
	}
	else if (value == "hommes")
	{
		change(datasetOption2);
	}
}

function change(data) {

/* ------- PIE SLICES -------*/
	var slice = d3.select(".slices").selectAll("path.slice")
        .data(pie(data), function(d){ return d.data.label });

slice.enter()
        .insert("path")
        .style("fill", function(d) { return color(d.data.label); })
        .attr("class", "slice");

slice
        .transition().duration(1000)
        .attrTween("d", function(d) {
            this._current = this._current || d;
            var interpolate = d3.interpolate(this._current, d);
            this._current = interpolate(0);
            return function(t) {
                return arc(interpolate(t));
            };
        })
    slice
        .on("mousemove", function(d){
            div.style("left", d3.event.pageX+10+"px");
            div.style("top", d3.event.pageY-25+"px");
            div.style("display", "inline-block");
            div.html((d.data.label)+"<br>"+(d.data.value)+"%");
        });
    slice
        .on("mouseout", function(d){
            div.style("display", "none");
        });

slice.exit()
        .remove();

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 = -3 * 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; });

/* ------- TEXT LABELS -------*/

var text = d3.select(".labelName").selectAll("text")
        .data(pie(data), function(d){ return d.data.label });

text.enter()
        .append("text")
        .attr("dy", ".35em")
        .text(function(d) {
            return (d.data.label+": "+d.value+"%");
        });

function midAngle(d){
        return d.startAngle + (d.endAngle - d.startAngle)/2;
    }

text
        .transition().duration(1000)
        .attrTween("transform", function(d) {
            this._current = this._current || d;
            var interpolate = d3.interpolate(this._current, d);
            this._current = interpolate(0);
            return function(t) {
                var d2 = interpolate(t);
                var pos = outerArc.centroid(d2);
                pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
                return "translate("+ pos +")";
            };
        })
        .styleTween("text-anchor", function(d){
            this._current = this._current || d;
            var interpolate = d3.interpolate(this._current, d);
            this._current = interpolate(0);
            return function(t) {
                var d2 = interpolate(t);
                return midAngle(d2) < Math.PI ? "start":"end";
            };
        })
        .text(function(d) {
            return (d.data.label+": "+d.value+"%");
        });

text.exit()
        .remove();

/* ------- SLICE TO TEXT POLYLINES -------*/

var polyline = d3.select(".lines").selectAll("polyline")
        .data(pie(data), function(d){ return d.data.label });

polyline.enter()
        .append("polyline");

polyline.transition().duration(1000)
        .attrTween("points", function(d){
            this._current = this._current || d;
            var interpolate = d3.interpolate(this._current, d);
            this._current = interpolate(0);
            return function(t) {
                var d2 = interpolate(t);
                var pos = outerArc.centroid(d2);
                pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
                return [arc.centroid(d2), outerArc.centroid(d2), pos];
            };
        });

polyline.exit()
        .remove();
};

setTimeout(function(){ change(datasetTotal); }, 1000);

</script>
</body>

Modified http://d3js.org/d3.v4.min.js to a secure url

https://d3js.org/d3.v4.min.js