<svg width="600px" height="600px" viewbox='0 0 600 600' id='pie'>
</svg>

// random data generated form https://www.mockaroo.com/
const data = [
  {
    "label": "web-enabled",
    "value": 717,
    "color": "#460898"
  }, {
    "label": "5th generation",
    "value": 700,
    "color": "#fabd15"
  }, {
    "label": "bifurcated",
    "value": 128,
    "color": "#f3a068"
  }, {
    "label": "Profit-focused",
    "value": 409,
    "color": "#e70ca4"
  }, {
    "label": "encompassing",
    "value": 929,
    "color": "#27f755"
  }, {
    "label": "real-time",
    "value": 519,
    "color": "#fdad65"
  }, {
    "label": "6th generation",
    "value": 979,
    "color": "#c3024a"
  }, {
    "label": "initiative",
    "value": 834,
    "color": "#afbf90"
  }, {
    "label": "task-force",
    "value": 160,
    "color": "#39f5d7"
  }, {
    "label": "Ameliorated",
    "value": 161,
    "color": "#7373b3"
  }
];

const total = data.reduce((p, c) => p + c.value, 0);

function scale (value) {
  return value * Math.PI * 2 / total;
}

function arc(startAngle, endAngle, outerRadius, innerRadius = 0) {
  const sinAlpha = Math.sin(startAngle);
  const cosAlpha = Math.cos(startAngle);
  const sinBeta = Math.sin(endAngle);
  const cosBeta = Math.cos(endAngle);
  
  const largeArc = endAngle - startAngle > Math.PI;
  
  const P = {
    x: outerRadius + (outerRadius * sinAlpha),
    y: outerRadius - (outerRadius * cosAlpha)
  };
  
  const Q = {
    x: outerRadius + (outerRadius * sinBeta),
    y: outerRadius - (outerRadius * cosBeta)
  };
  
  const R = {
    x: outerRadius + (innerRadius * sinBeta),
    y: outerRadius - (innerRadius * cosBeta)
  };
  
  const S = {
    x: outerRadius + (innerRadius * sinAlpha),
    y: outerRadius - (innerRadius* cosAlpha)
  }
  
  return `M${P.x},${P.y} A${outerRadius},${outerRadius} 0 ${largeArc ? '1,1' : '0,1'} ${Q.x},${Q.y} L${R.x},${R.y} A${innerRadius},${innerRadius} 0 ${largeArc ? '1,0' : '0,0'} ${S.x},${S.y} Z`;
}

const fragment = document.createDocumentFragment();

const outerRadius = 300;
const innerRadius = 150;

let startAngle = 0;

const radToDeg = (val) => val * 180 / Math.PI; 

data.forEach((slice) => {
  const { value, color, label } = slice;
  const sectorAngle = scale(value);
  const d = arc(startAngle, startAngle + sectorAngle, outerRadius, innerRadius);

  startAngle += sectorAngle;

  const path = document.createElementNS('http://www.w3.org/2000/svg','path');
  const title = document.createElementNS('http://www.w3.org/2000/svg','title');
  title.innerHTML = title;
  path.setAttribute('d', d);
  path.setAttribute('fill', color);
  path.appendChild(title);
  fragment.appendChild(path);
});

document.getElementById('pie').appendChild(fragment);