Half Donut Fiddle

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"
}];

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)

  /* ------------------ drawing ------------------------- */
  /* ----------------------------------------------------- */
  //draw svg element
  var object = d3.select('#pieChart').append('object')
    .attr('width', '100%')
    .attr('height', 'auto')
    .style('display', 'block')
    .style('position', 'relative')
    .style('padding-top', height + 'px');

  var vis = object.append('svg')
    .data([data])
    .attr('width', '100%')
    .attr('height', '100%')
    .attr('viewBox', '0 0 ' + width + ' ' + height)
    .attr('preserveAspectRatio', 'xMinYMin')
    .style('position', 'absolute')
    .style('top', '0')
    .style('left', '0')
    .append('g')
    .attr('transform', 'translate(' + r + ',' + r + ')');

  //draw slices
  var arcs = vis.selectAll('g.slice')
    .data(pie)
    .enter()
    .append('g')
    .attr('class', 'slice');

  //draw arcs
  arcs
    .append('path')
    .attr('d', arc)
    .attr('fill', function(d, i) {
      return data[i].color;
    })
    
   var current = vis.append('text')
   .text('93')
   .attr('class', 'current-value')
   .attr('x', "-40")
   .attr('y', "-10");   

}