Rewrite of the WDRLs pie chart script to show animated chart.

main.js

/**
 * Main.js
 * https://github.com/anselmh/wdrl/blob/gh-pages/js/main.js
 *
 */

(function (global) {
	'use strict';

	// Twitter Button
	!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

	/**
	 * Create a SVG Pie Chart
	 * Arguments:
	 *   data: an array of numbers to chart, one for each wedge of the pie.
	 *   width: width of SVG graphic [px]
	 *   height: height of SVG graphic [px]
	 *   cx, cy, r: the center and radius of the pie
	 *   colors: array of HTML color strings, one for each wedge
	 *   labels: array of labels to appear in the legend, one for each wedge
	 *   lx, ly: upper-left corner of the chart legend
	 * Returns:
	 *    <svg> element that holds the pie chart.
	 *    The caller must insert the returned element into the document.
	 */

	var pieChart = function (data, width, height, cx, cy, r, colors, labels, lx, ly) {
		var svgns = 'http://www.w3.org/2000/svg';
		var chart = document.createElementNS(svgns, 'svg:svg');
		var total = 0;
		var angles = [];
		var startangle = 0;
		var i = 0;
		var duration = 2500;
		var steps = Math.PI * 2 / Math.floor( duration / 60 );
		var pathIndex = 0;
		var paths = [];

		var endangle;

		var loop = function() {

			if ( i < endangle ) {

				i = i + steps;

				drawSlice( paths[pathIndex], startangle, startangle + i > startangle + endangle ? startangle + endangle : startangle + i)

				window.requestAnimationFrame(loop);

			} else {

				startangle = startangle + endangle;

				if ( pathIndex + 1 !== paths.length ) {

					pathIndex++;

					i = 0;

					endangle = angles[pathIndex];

					window.requestAnimationFrame(loop);

				}
			}
		},

		drawSlice = function(path, startangle, endangle) {

			var big = endangle - startangle > Math.PI ? 1 : 0;
			var x1 = cx + r * Math.sin(startangle);
			var y1 = cy - r * Math.cos(startangle);
			var x2 = cx + r * Math.sin(endangle);
			var y2 = cy - r * Math.cos(endangle);

			var d = 'M ' + cx + ',' + cy + ' L ' + x1 + ',' + y1 + ' A ' + r + ',' + r + ' 0 ' + big + ' 1 ' +  x2 + ',' + y2 + ' Z';

			path.setAttribute('d', d);
		};	    

		chart.setAttribute('width', width);
		chart.setAttribute('height', height);
		chart.setAttribute('viewBox', '0 0 ' + width + ' ' + height);

		// Add up the data values so we know how big the pie is
		for (i = 0; i < data.length; i++) {
			total += data[i];
		};

		// Now figure out how big each slice of pie is. Angles in radians.
		for (i = 0; i < data.length; i++) {
			angles[i] = data[i] / total * Math.PI * 2;
		};

		// Loop through each slice of pie.
		for (i = 0; i < data.length; i++) {
			var path = document.createElementNS(svgns, 'path');
			var labelShare = Math.round(((data[i] / total) * 100)) + '%: ';
			var labelColor = document.createElementNS(svgns, 'rect');
			var label = document.createElementNS(svgns, 'text');

			chart.appendChild(path);
			paths.push(path);
			path.setAttribute('fill', colors[i]);

			// Now draw a little matching square for the key
			labelColor.setAttribute('x', lx);
			labelColor.setAttribute('y', ly + 30*i);
			labelColor.setAttribute('width', 20);
			labelColor.setAttribute('height', 20);
			labelColor.setAttribute('fill', colors[i]);
			chart.appendChild(labelColor);

			// Add label to the right of the rectangle
			label.setAttribute('x', lx + 30);
			label.setAttribute('y', ly + 30*i + 18);
			label.setAttribute('font-family', '"jaf-bernino-sans", sans-serif');
			label.setAttribute('font-size', '16');

			// Add DOM node for the text to the <svg:text> element
			label.appendChild(document.createTextNode(labelShare + labels[i]));
			chart.appendChild(label);
		};

		i = 0;
		endangle = angles[0];
		window.requestAnimationFrame(loop);

		return chart;
	};


	// ServicesChart
	var serviceChartWrapper = document.querySelector('#chart-services');
	var serviceChartData = [80, 10, 2];
	var serviceChartColors = ['#017E61', '#01A57F', '#02E4B0'];
	var serviceChartLabels = ['80€ Newsletter service', '8€ Hosting fees', '2€ Domain'];
	var servicesChart = pieChart(serviceChartData, 450, 200, 100, 100, 100, serviceChartColors, serviceChartLabels, 220, 50);

	// workingChart
	var workChartWrapper = document.querySelector('#chart-work');
	var workChartData = [25, 1, 3];
	var workChartColors = ['#017E61', '#01A57F', '#02E4B0'];
	var workChartLabels = ['20hrs Curating Content', '1hr Work on Website', '3hrs Communication'];
	var workChart = pieChart(workChartData, 450, 200, 100, 100, 100, workChartColors, workChartLabels, 220, 50);

	// fundingChart
	var fundingChartWrapper = document.querySelector('#chart-funding');
	var fundedMoney = 225; // GratiPay, Circle/Bitcoin, Flattr, denkwerk
	var adsMoney = 100; // One ad per month OR one ad each 4 letters
	var missingMoney = 500 - (fundedMoney + adsMoney); // 1052 if services + 24hrs at 40EUR
	var fundingChartData = [fundedMoney, missingMoney];
	var fundingChartColors = ['rgb(0, 178, 202)', '#EEEEEE'];
	var fundingChartLabels = ['Money by Readers', 'Still needed'];
	var fundingChart = pieChart(fundingChartData, 450, 200, 100, 100, 100, fundingChartColors, fundingChartLabels, 220, 50);

	// Append Charts to DOM
	if (serviceChartWrapper) {
		serviceChartWrapper.appendChild(servicesChart);
		serviceChartWrapper.classList.add('has-svg');
	};

	if (workChartWrapper) {
		workChartWrapper.appendChild(workChart);
		workChartWrapper.classList.add('has-svg');
	};

	if (fundingChartWrapper) {
		fundingChartWrapper.appendChild(fundingChart);
		fundingChartWrapper.classList.add('has-svg');
	};
}(window));