JSFiddle - React, Tailwind, and code Playground

by sathish panduga p

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
	<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>    
	<script type='text/javascript' src="http://d3js.org/d3.v3.min.js"></script>

  
		<div id="holder">
			<div class="concentric" data-role="concentric" data-width=420 data-height=420 data-thickness=15></div>
			<div class="concentric" data-role="concentric" data-width=320 data-height=320 data-thickness=17></div>
			<div class="concentric" data-role="concentric" data-width=220 data-height=220 data-thickness=15></div>
            <div class="concentric" data-role="concentric" data-width=220 data-height=220 data-thickness=8></div>
		</div>
		
			<ul class="testers">
				<li><a href="#">toggle</a></li>
			</ul>

CSS

body{
		background: #eeeeee;    
		}
		
		#holder{
			overflow:hidden;
		}
		.concentric{
			float:left;
			border: 1px solid black;
		}

		.concentricchart path {
			stroke: #cccccc;
			stroke-width: 1px;
			opacity:0.8;
		}

		.concentricchart text{
			font-size:12px;    
		}

		.legend_group circle{
			stroke: #cccccc;
			stroke-width: 1px;
			opacity:0.8;
		}

JavaScript

$(document).ready(function() {
					

			(function( $ ){
				var methods = {
					el: "",
					init : function(options) {
						var clone = jQuery.extend(true, {}, options["data"]);
						var preparedData = methods.setData(clone);
						
						methods.el = this;			
						methods.setup(preparedData, options["width"], options["height"]);
					},
					setup: function(data, w, h){
                        
                        var selector = methods.el["selector"];
                        
                        var padding = 20;

                        
						var chart = d3.select(selector).append("svg:svg")
							.attr("class", "chart")
							.attr("width", w)
							.attr("height", h)
						.append("svg:g")
							.attr("class", "concentricchart")
							.attr("transform", "translate("+((w/3)+padding)+","+h/3+")");
                        
                        methods.radius = Math.min(w, h) / 2;
							
						var label_group = chart.append("svg:g")
							.attr("class", "label_group")
							.attr("transform", "translate("+((w/3)-15)+","+(-h/4)+")");

						var legend_group = chart.append("svg:g")
							.attr("class", "legend_group")
							.attr("transform", "translate("+((w/3)-130)+","+((-h/4)-5)+")");
							
						var value_group = chart.append("svg:g")
							.attr("class", "value_group")
							.attr("transform", "translate("+ -(w*.24)+","+ -(h*.09)+")");

						var path_group = chart.append("svg:g")
							.attr("class", "path_group")
							.attr("transform", "translate(0,"+(h/4)+")");				

                        
						this.generateArcs(selector, data);		
					},
					update: function(data){
						var clone = jQuery.extend(true, {}, data);

						var preparedData = methods.setData(clone);
						
						methods.el = this;
						methods.animate(preparedData);			
						methods.oldData = preparedData;
					},
					animate: function(data){
						var that = this;
                        
                        var selector =...