d3 radial

interactive d3 radial

HTML

<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<div id="chart"></div>

SCSS

body {
  background-color:#fff;
}
.radial{
	.axis path,
	.axis line {
		fill: none;
		shape-rendering: crispEdges;
	}
  

	.x.axis path {
		display: none;
	}
	.tick {
		text, line {
			display:none;
		}
	}
  circle {
    stroke:#ccc;
  }
  
  .line {
    fill: none;
    stroke-width: 1.5px;
  }
}

JavaScript

var width = 360,
			height = 300,
			barHeight = height / 2 - 40;

			var formatNumber = d3.format("s");

			var color = d3.scale.ordinal()
      .range(["#36e214","#e4f224","#ffb13d","#23cfff","#d60e0e","#d60dad"]);

			var svg = d3.select('#chart').append("svg")
			.attr("width", width)
			.attr("height", height)
			.attr('class','radial')
			.append("g")
			.attr("transform", "translate(" + width/2 + "," + height/2 + ")");

			var data = [{
				"name": "HP",
				"value":4
			},
			{
				"name": "Velocity",
				"value":5
			},{
				"name": "Mobility",
				"value":2
			},
			{
				"name": "Range",
				"value":3
			},{
				"name": "DPS",
				"value":1
			},{
      	"name": "Accuracy",
        "value":5
      }];

/* 			data.sort(function(a,b) { return b.value - a.value; }); */

			var extent = [0, d3.max(data, d=>d.value)];
			var barScale = d3.scale.linear()
			.domain(extent)
			.range([0, barHeight]);

			var keys = data.map(function(d,i) { return d.name; });
			var numBars = keys.length;
      console.log(data)
			
      // X scale
var x = d3.scale.linear()
      .domain(extent)
      .range([0, -barHeight]);
        
            // X axis
      var xAxis = d3.svg.axis()
      .scale(x).orient("left")
      .ticks(3)
      .tickFormat(formatNumber);
			
      // Create arcs
			var arc = d3.svg.arc()
			.startAngle(function(d,i) { 
         var a = (i * 2 * Math.PI) / numBars;
         var b = ((i + 1) * 2 * Math.PI) / numBars;
         var d = (b-a)/20; d=0;
         var x = a+d;
         var y = b-d;
        
      	return x;//(i * 2 * Math.PI) / numBars; 
      })
			.endAngle(function(d,i) { 
      	var a = (i * 2 * Math.PI) / numBars;
         var b = ((i + 1) * 2 * Math.PI) / numBars;
         var d = (b-a)/20; d=0;
         var x = a+d;
         var y = b-d;
      	return y;//((i + 1) * 2 * Math.PI) / numBars; 
      })
			.innerRadius(6);
	
      
      // Render colored arcs
			var segments =...