JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
	<div id='sliderContainer'>
		<input id='timeslide' type='range' min='0' max='11' value='0' step='1'/><br>
		<span id='range'>JAN 2016</span>
	</div>

JavaScript

var width = 450;
var height = 350;
var margins = { left: 0, top: 0, right: 0, bottom: 0 };

var svg = d3.select("body")
			.append("svg")
			.attr("width", width+margins.right)
			.attr("height", height+margins.top);
	
var pieG = svg.append('g')
	.attr('transform', 'translate(' + 100 +',' + 75 + ')');

var period = ['JAN 2016','FEB 2016','MAR 2016', 'APR 2016', 'MAY 2016', 'JUN 2016',
'JUL 2016', 'AUG 2016', 'SEP 2016', 'OCT 2016', 'NOV 2016', 'DEC 2016'];

d3.select('#timeslide').on('input', function() {
	update(+this.value);
});

function update(value) {
	document.getElementById('range').innerHTML=period[value];
	create_pie(period[value]);
}

var pie_data = {
	'JAN2016': [16,4,1,30],
	'FEB2016': [17,4,0,30],
	'MAR2016': [16,5,1,10],
	'APR2016': [17,4,1,29],
	'MAY2016': [17,4,1,29],
	'JUN2016': [17,4,2,28],
	'JUL2016': [18,3,2,8],
	'AUG2016': [18,3,2,28],
	'SEP2016': [18,3,2,28],
	'OCT2016': [18,3,3,27],
	'NOV2016': [18,3,3,2],
	'DEC2016': [18,3,3,27]
}

function create_pie(month) {

		var radius = Math.min(width, height) / 4;

		var color = d3.scale.ordinal().range(['darkblue','steelblue','blue',  'lightblue']);

		var arc = d3.svg.arc()
		.innerRadius(radius - 50)
		.outerRadius(radius - 20);

		var sMonth = String(month).replace(' ','');
		var pData = pie_data[sMonth];

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

		var Ppath = pieG.datum(pData).selectAll(".pie")
			.data(pie);

	Ppath
		.enter().append("path").attr('class','pie').attr("d", arc);

	Ppath
			.attr("fill", function(d, i) { return color(i); })
			//.attr("d", arc)
			.each(function(d) {
				this.x0 = d.x;
				this.dx0 = d.dx;
			});

	Ppath
			.transition()
			.duration(650)
			.attrTween("d", arcTweenUpdate);

	Ppath
			.exit().remove();

//setInterval(function() {
  Ppath.transition()
      .duration(750)
      .attrTween("d", arcTween(d.endAngle));
//}, 1500);

function arcTween(newAngle) {

  // The function passed to attrTween is invoked...