Half Donut Fiddle with Needle

by rdenver6

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<h1>Quality</h1>
<div class="js-pie-chart pie-chart" id="pieChart"></div>
<div class="pie-label">
  Current Score
</div>

CSS

body {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  background-color: white;
}

.pie-chart {
  max-width: 500px;
  margin: 20px auto;
}

.current-value {
  font-size: 80px
}

JavaScript

var datasPie = [{
  "label": "Label1",
  "number": "75",
  "color": "#E76253"
}, {
  "label": "Label2",
  "number": "13",
  "color": "#F8A639"
}, {
  "label": "Label3",
  "number": "8",
  "color": "#00A0AF"
}];
var percent = .43;

drawPie(datasPie);

function drawPie(data) {
  /* ------------ initialization/calculation ------------- */
  /* ----------------------------------------------------- */
  var $container = $('.js-pie-chart'),
    width = $container.width(),
    height = width / 2,
    r = width / 2,
    ir = r / 2,
    pi = Math.PI;

  //pie structure
  var pie = d3.layout.pie();
  pie.padAngle(.02)
    .sort(null)
    .value(function(d) {
      return d.number;
    })
    .startAngle(-90 * (pi / 180))
    .endAngle(90 * (pi / 180));


  var arc = d3.svg.arc().outerRadius(r - 10).innerRadius(ir - 5)

  //var needleArc = d3.svg.arc().outerRadius(r - 170).innerRadius(0)
  //console.log(needleArc);

  // HELPER FUNCTIONS
  percToDeg = function(perc) {
    return perc * 360;
  };

  percToRad = function(perc) {
    return degToRad(percToDeg(perc));
  };

  degToRad = function(deg) {
    return deg * Math.PI / 180;
  };
 function mkCmd(perc) {
      var leftX, leftY, rightX, rightY, thetaRad, topX, topY;
      var len = 120;
      var radius = 20;
      var centerX = 0;
      var centerY = -15;
      thetaRad = percToRad(perc / 2);			
      topX = centerX - len * Math.cos(thetaRad);
      topY = centerY - len * Math.sin(thetaRad);
      leftX = centerX - radius * Math.cos(thetaRad - Math.PI / 2);
      leftY = centerY - radius * Math.sin(thetaRad - Math.PI / 2);
      rightX = centerX - radius * Math.cos(thetaRad + Math.PI / 2);
      rightY = centerY - radius * Math.sin(thetaRad + Math.PI / 2);
      return "M " + leftX + " " + leftY + " L " + topX + " " + topY + " L " + rightX + " " + rightY;
    };
    
  function needleBaseCx(perc) {
      var len = 80;      
      var centerX = 0;      
      thetaRad = percToRad(perc / 2);			
      topX = centerX - len...