RightHandedMonkey · February 4, 2016 21:22
diff --git a/D3 Aster plot with labels b/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="[email protected]" 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="[email protected]" 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 ];
	}

	});