D3.js Template

HTML

<div id="chart"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
  padding: 10px;
}

JavaScript

var $this = $("#chart");


		var data = [{
		      "label": "Overall Stress",
		      "value": 89
		    },{
		      "label": "Emotional Stress",
		      "value": 1
		    },{
		      "label": "Behavioural difficulties",
		      "value": 29
		    },{
		      "label": "hyperactivity and concetration",
		      "value": 89
		    },{
		      "label": "Getting along with others",
		      "value": 19
		    },{
		      "label": "Keen and helpful behaviour",
		      "value": 45
		    }];


        var w  = 350;
        var h  = 350;

		function colores_google(n) {
	        var colores_g = ["#f7b363", "#448875", "#c12f39", "#2b2d39", "#f8dd2f", "#c12fff"];
	        return colores_g[n % colores_g.length];
	    }

		var arcGenerator = {
			radius: 70,
			oldData: "",
			init: function(el, data, w, h){

				var stardata = [
					{
						"segments": data
					}
				];

				this.el = el;

				var clone = $.extend(true, {}, stardata);
				this.oldData = this.setData(clone, false);
				this.setup(el, this.setData(stardata, true), w, h);			
			},
			update: function(data){
				var clone = $.extend(true, {}, data);			
				this.animate(this.setData(data, true));			
				this.oldData = this.setData(clone, false);
			},
			animate: function(data){
				var that = this;
				
				var chart = d3.select(this.el);
				that.generateArcs(chart, data);
			},	
			setData: function(data, isSorted){

				var diameter = 2 * Math.PI * this.radius;
				
				var localData = new Array();
				
				var displacement = 0;
				var oldBatchLength = 0;
							
				$.each(data, function(index, value) {				
					var riseLevels = value.segments;

					var riseLevelCount = riseLevels.length;
									
					if(oldBatchLength !=undefined){				
						displacement+=oldBatchLength;
					}
					
					var arcBatchLength = 2*Math.PI;
					var arcPartition = arcBatchLength/riseLevelCount;
					
						$.each(riseLevels, function( ri, value ) {
							var startAngle = (ri*arcPartition);
							var endAngle =...