RightHandedMonkey/D3 Aster plot with labels

## D3 Aster plot with labels
//Originally from http://plnkr.co/edit/gcjJgFcMs189rF1ucGQa?p=preview
========================= CSV ===========================
"id","order","score","weight","color","label"
"FIS",1.1,59,2,"#9E0041","Fisheries"
"MAR",1.3,24,0.5,"#C32F4B","Mariculture"
"AO",2,98,1,"#E1514B","Artisanal Fishing Opportunities"
"NP",3,60,1,"#F47245","Natural Products"
"CS",4,74,1,"#FB9F59","Carbon Storage"
"CP",5,70,1,"#FEC574","Coastal Protection"
"TR",6,42,1,"#FAE38C","Tourism &  Recreation"
"LIV",7.1,77,0.5,"#EAF195","Livelihoods"
"ECO",7.3,88,0.5,"#C7E89E","Economies"
"ICO",8.1,60,0.5,"#9CD6A4","Iconic Species"
"LSP",8.3,65,0.5,"#6CC4A4","Lasting Special Places"
"CW",9,71,1,"#4D9DB4","Clean Waters"
"HAB",10.1,88,0.5,"#4776B4","Habitats"
"SPP",10.3,83,0.5,"#5E4EA1","Species"

========================= HTML ===========================
<!DOCTYPE html>
<html>
  <head>
    <script data-require="d3@3.4.6" data-semver="3.4.6" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
    <script src="http://rawgit.com/Caged/d3-tip/master/index.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <script src="script.js"></script>
  </body>
</html>

========================= CSS ===========================

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: orange;
}

.solidArc:hover {
  fill: orangered ;
}

.solidArc {
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.x.axis path {
  display: none;
}

.aster-score {
  line-height: 1;
  font-weight: bold;
  font-size: 500%;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

========================= JS ===========================
var margin = {top: 40, right: 80, bottom: 40, left: 80};

var width = 400,
    height = 400,
    radius = Math.min(width, height) / 2,
    innerRadius = 0.3 * radius;

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.width; });

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([0, 0])
  .html(function(d) {
    return d.data.label + ": <span style='color:orangered'>" + d.data.score + "</span>";
  });

var arc = d3.svg.arc()
  .innerRadius(innerRadius)
  .outerRadius(function (d) {
    return (radius - innerRadius) * (d.data.score / 100.0) + innerRadius;
  });

var outlineArc = d3.svg.arc()
        .innerRadius(innerRadius)
        .outerRadius(radius);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + (width / 2 + margin.left) + "," + (height / 2 + margin.top) + ")");

svg.call(tip);

d3.csv('aster_data.csv', function(error, data) {

  data.forEach(function(d) {
    d.id     =  d.id;
    d.order  = +d.order;
    d.color  =  d.color;
    d.weight = +d.weight;
    d.score  = +d.score;
    d.width  = +d.weight;
    d.label  =  d.label;
  });
  // for (var i = 0; i < data.score; i++) { console.log(data[i].id) }

   var outerGroup = svg.selectAll(".solidArc")
      .data(pie(data))
      .enter()
      .append("g")

    outerGroup
      .append("path")
      .attr("fill", function(d) { return d.data.color; })
      .attr("class", "solidArc")
      .attr("stroke", "gray")
      .attr("d", arc)
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide);

    outerGroup
      .append("text")
      .attr("transform", function(d) {
        return "translate(" + centroid(60, width, d.startAngle, d.endAngle) + ")";
      })
      .attr("text-anchor", "middle")
      .text(function(d) { return d.data.label });

  var outerPath = svg.selectAll(".outlineArc")
      .data(pie(data))
      .enter().append("path")
      .attr("fill", "none")
      .attr("stroke", "gray")
      .attr("class", "outlineArc")
      .attr("d", outlineArc);


  // calculate the weighted mean score
  var score =
    data.reduce(function(a, b) {
      //console.log('a:' + a + ', b.score: ' + b.score + ', b.weight: ' + b.weight);
      return a + (b.score * b.weight);
    }, 0) /
    data.reduce(function(a, b) {
      return a + b.weight;
    }, 0);

  svg.append("svg:text")
    .attr("class", "aster-score")
    .attr("dy", ".35em")
    .attr("text-anchor", "middle") // text-align: right
    .text(Math.round(score));

  function centroid(innerR, outerR, startAngle, endAngle){
    var r = (innerR + outerR) / 2, a = (startAngle + endAngle) / 2 - (Math.PI / 2);
    return [ Math.cos(a) * r, Math.sin(a) * r ];
  }

});
	//Originally from http://plnkr.co/edit/gcjJgFcMs189rF1ucGQa?p=preview
	========================= CSV ===========================
	"id","order","score","weight","color","label"
	"FIS",1.1,59,2,"#9E0041","Fisheries"
	"MAR",1.3,24,0.5,"#C32F4B","Mariculture"
	"AO",2,98,1,"#E1514B","Artisanal Fishing Opportunities"
	"NP",3,60,1,"#F47245","Natural Products"
	"CS",4,74,1,"#FB9F59","Carbon Storage"
	"CP",5,70,1,"#FEC574","Coastal Protection"
	"TR",6,42,1,"#FAE38C","Tourism & Recreation"
	"LIV",7.1,77,0.5,"#EAF195","Livelihoods"
	"ECO",7.3,88,0.5,"#C7E89E","Economies"
	"ICO",8.1,60,0.5,"#9CD6A4","Iconic Species"
	"LSP",8.3,65,0.5,"#6CC4A4","Lasting Special Places"
	"CW",9,71,1,"#4D9DB4","Clean Waters"
	"HAB",10.1,88,0.5,"#4776B4","Habitats"
	"SPP",10.3,83,0.5,"#5E4EA1","Species"

	========================= HTML ===========================
	<!DOCTYPE html>
	<html>
	<head>
	<script data-require="d3@3.4.6" data-semver="3.4.6" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
	<script src="http://rawgit.com/Caged/d3-tip/master/index.js"></script>
	<link rel="stylesheet" href="style.css" />
	</head>

	<body>
	<script src="script.js"></script>
	</body>
	</html>

	========================= CSS ===========================

	body {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.bar {
	fill: orange;
	}

	.solidArc:hover {
	fill: orangered ;
	}

	.solidArc {
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	}

	.x.axis path {
	display: none;
	}

	.aster-score {
	line-height: 1;
	font-weight: bold;
	font-size: 500%;
	}

	.d3-tip {
	line-height: 1;
	font-weight: bold;
	padding: 12px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 2px;
	}

	/* Creates a small triangle extender for the tooltip */
	.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: rgba(0, 0, 0, 0.8);
	content: "\25BC";
	position: absolute;
	text-align: center;
	}

	/* Style northward tooltips differently */
	.d3-tip.n:after {
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
	}

	========================= JS ===========================
	var margin = {top: 40, right: 80, bottom: 40, left: 80};

	var width = 400,
	height = 400,
	radius = Math.min(width, height) / 2,
	innerRadius = 0.3 * radius;

	var pie = d3.layout.pie()
	.sort(null)
	.value(function(d) { return d.width; });

	var tip = d3.tip()
	.attr('class', 'd3-tip')
	.offset([0, 0])
	.html(function(d) {
	return d.data.label + ": <span style='color:orangered'>" + d.data.score + "</span>";
	});

	var arc = d3.svg.arc()
	.innerRadius(innerRadius)
	.outerRadius(function (d) {
	return (radius - innerRadius) * (d.data.score / 100.0) + innerRadius;
	});

	var outlineArc = d3.svg.arc()
	.innerRadius(innerRadius)
	.outerRadius(radius);

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + (width / 2 + margin.left) + "," + (height / 2 + margin.top) + ")");

	svg.call(tip);

	d3.csv('aster_data.csv', function(error, data) {

	data.forEach(function(d) {
	d.id = d.id;
	d.order = +d.order;
	d.color = d.color;
	d.weight = +d.weight;
	d.score = +d.score;
	d.width = +d.weight;
	d.label = d.label;
	});
	// for (var i = 0; i < data.score; i++) { console.log(data[i].id) }

	var outerGroup = svg.selectAll(".solidArc")
	.data(pie(data))
	.enter()
	.append("g")

	outerGroup
	.append("path")
	.attr("fill", function(d) { return d.data.color; })
	.attr("class", "solidArc")
	.attr("stroke", "gray")
	.attr("d", arc)
	.on('mouseover', tip.show)
	.on('mouseout', tip.hide);

	outerGroup
	.append("text")
	.attr("transform", function(d) {
	return "translate(" + centroid(60, width, d.startAngle, d.endAngle) + ")";
	})
	.attr("text-anchor", "middle")
	.text(function(d) { return d.data.label });

	var outerPath = svg.selectAll(".outlineArc")
	.data(pie(data))
	.enter().append("path")
	.attr("fill", "none")
	.attr("stroke", "gray")
	.attr("class", "outlineArc")
	.attr("d", outlineArc);


	// calculate the weighted mean score
	var score =
	data.reduce(function(a, b) {
	//console.log('a:' + a + ', b.score: ' + b.score + ', b.weight: ' + b.weight);
	return a + (b.score * b.weight);
	}, 0) /
	data.reduce(function(a, b) {
	return a + b.weight;
	}, 0);

	svg.append("svg:text")
	.attr("class", "aster-score")
	.attr("dy", ".35em")
	.attr("text-anchor", "middle") // text-align: right
	.text(Math.round(score));

	function centroid(innerR, outerR, startAngle, endAngle){
	var r = (innerR + outerR) / 2, a = (startAngle + endAngle) / 2 - (Math.PI / 2);
	return [ Math.cos(a) * r, Math.sin(a) * r ];
	}

	});