d3 radial chart with flipped text

by Francis MacDougall

HTML

<div id="chart"></div>

CSS

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

	.x.axis path {
		display: none;
	}
	.tick {
		text, line {
			display:none;
		}
	}
	circle {
		stroke:#fff;
		opacity: 0.3;
	}
	.labels {
		text {
			font-size:9px;
		}
	}
	.bar{
		cursor: pointer;
		&.selected {
			stroke:#fff;
			stroke-width:3;
		}
	}
}

JavaScript

var data = [
{"name":"A11","value":217,"color":"#fad64b"},
{"name":"A12","value":86,"color":"#f15d5d"},
{"name":"A13","value":79,"color":"#f15d5d"},
{"name":"A14","value":82,"color":"#f15d5d"},
{"name":"A15","value":101,"color":"#fad64b"},
{"name":"A16","value":91,"color":"#fad64b"}
];

var width = 500;
var height = 300;
var barHeight = height / 2 - 15;
var formatNumber = d3.format('s');

var color = d3.scale.ordinal()
	.range(['#F15D5D', '#FAD64B']);
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 extent = [0, d3.max(data, function(d) { return d.value; })];

var lastNum = extent[1];
var percentageOne = (lastNum*25)/100;
var percentageTwo = (lastNum*50)/100;
var percentageThree = (lastNum*75)/100;
var tickValues = [percentageOne, percentageTwo, percentageThree, lastNum];

var barScale = d3.scale.linear()
	.domain(extent)
	.range([0, barHeight]);

var keys = data.map(function(d, i) {
  return d.name;
});
var numBars = keys.length;
				
// X scale
var x = d3.scale.linear()
.domain(extent)
.range([0, -barHeight]);

// X axis
var xAxis = d3.svg.axis()
.scale(x).orient('left')
.tickFormat(formatNumber)
.tickValues(tickValues);

// Inner circles
var circles = svg.selectAll('circle')
.data(tickValues)
.enter().append('circle')
.attr('r', function(d) {
  return barScale(d);
})
.style('fill', 'none')
.style('stroke', 'white')
.style('stroke-width', '0.5px');

// 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) / 4;
  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) / 4;
  var x = a + d;
  var y = b - d;
  return y; //((i + 1) * 2 *...