JSFiddle - React, Tailwind, and code Playground

by sathish panduga p

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<div id="holder">

		<div id="threshold"></div>
	</div>
	
		<ul class="testers">
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
	</ul>

CSS

.slice path {
    stroke: #fff;
    stroke-width: 1px;
}

.textTop {
    font-family: 'Segoe UI';
    font-size: 12pt;
    fill: #bbb;
}

.textBottom {
    fill: #444;
    font-family: 'Segoe UI';
    font-weight: bold;
    font-size: 18pt;
}

.top {
    border: 1px solid #bbb;
    color: #777;
    font-family: 'Segoe UI';
    padding: 5px;
    text-decoration: none;
}

.top:hover {
    border: 1px solid #555;
    color: #333;
}

JavaScript

var arcGenerator = {
		radius: 100,
		oldData: "",
		init: function(data){
			var clone = jQuery.extend(true, {}, data);
			
			var preparedData = this.setData(clone);			
			this.oldData = preparedData;
			this.setup(preparedData);			
		},
		update: function(data){
			var clone = jQuery.extend(true, {}, data);
			
			var preparedData = this.setData(clone);
		
			this.animate(preparedData);			
			this.oldData = preparedData;
		},
		animate: function(data){
			var that = this;
			
			var chart = d3.select(".arcchart");
			that.generateArcs(chart, data);
		},	
		setData: function(data){
			var diameter = 2 * Math.PI * this.radius;			
			var localData = new Array();
			
			var segmentValueSum = 0;
			$.each(data[0].segments, function( ri, va) {
				segmentValueSum+= va.value;
			});
				
			$.each(data[0].segments, function(ri, value) {
								
				var segmentValue = value.value;
				
				var fraction = segmentValue/segmentValueSum;
				
				var arcBatchLength = fraction*4*Math.PI;
				var arcPartition = arcBatchLength;		
				
				var startAngle = Math.PI/2;			
	            var endAngle = startAngle + arcPartition; 
                
				data[0].segments[ri]["startAngle"] = startAngle;
				data[0].segments[ri]["endAngle"] = endAngle;
				data[0].segments[ri]["index"] = ri;
			});
				
			localData.push(data[0].segments);
						
			return localData[0];		
		},
        textOffset: 10,
		generateArcs: function(chart, data){
			
			var that = this;
			
			//append previous value to it.			
			$.each(data, function(index, value) {
				if(that.oldData[index] != undefined){
					data[index]["previousEndAngle"] = that.oldData[index].endAngle;
				}
				else{
					data[index]["previousEndAngle"] = 0;
				}
			});		
	
			var arcpaths = chart.selectAll("path")
					.data(data);
	
				arcpaths.enter().append("svg:path")
					.attr("class", function(d, i){
						return d.machineType;
					})	
					.style("fill", function(d, i){
						return...