Skilled Birth Attendants (PHS II)

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.arc text {
  font: 10px sans-serif;
  text-anchor: middle;
}

.arc path {
  stroke: #fff;
}

.icon-svg {
  fill: #2980b9;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 560,
    radius = (height) / 2 - 30;

var color = d3.scale.ordinal()
    .range(["#2980b9", "#2ecc71", "#7b6888"]);

var color_sub = d3.scale.ordinal()
    .range(["#2980b9", "#2ecc71", "#7b6888", "purple"]);

var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 120);

var sub_arc = d3.svg.arc()
    .outerRadius(radius - 6)
    .innerRadius(radius + 10);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.percentage; })
    .startAngle([5.37])
    .endAngle([5.37 + Math.PI * 2]);

var sub_pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.percentage; })
    .startAngle([5.37])
    .endAngle([10.33]);

var svg = d3.select("body")
    .append("div")
    .attr("width", width)
    .attr("height", height)
    .classed("svg-container", true)
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .classed("svg", true)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var icon_width = 128 + 32, icon_height = 128 + 32;

d3.select(".svg")
  .append("g")
  .classed("icon-container", true)
  .append("svg")
  .classed("icon-svg", true)
  .attr("width", icon_width)
  .attr("height", icon_height)
  .attr("viewBox", function(d, i ){ // "0 0 64 64"
    return 0 + " " + 0 + " " + 64 + " " + 64;
  })
  .append("path")
  .attr("d", "M40.067 20.573c0 4.557-3.699 8.25-8.26 8.25-4.556 0-8.249-3.694-8.249-8.25s3.693-8.25 8.249-8.25c4.561-0 8.26 3.694 8.26 8.25z")

d3.select(".icon-svg")
  .append("path")
  .attr("d", "M31.82 0.524c-3.818 0-9.151 1.522-13.014 5.385l4.588 8.359c1.963-2.491 5.008-4.090 8.426-4.090 3.459 0 6.537 1.634 8.498 4.175l4.5-8.636c-3.343-3.653-9.338-5.192-12.998-5.192zM35.22 6.662h-2.136v2.134h-2.566v-2.134h-2.136v-2.565h2.136v-2.143h2.566v2.143h2.136v2.565z")

d3.select(".icon-svg")
  .append("path")
  .attr("d", "M20.966 43.651h2.113l-3.018 10.344h23.581l-3.004-10.344h2.115l3.023 10.344h6.939l-4.736-15.672c-0.74-2.587-3.984-7.142-9.582-7.28l-12.87-0.011c-5.725 0.028-9.037 4.672-9.786 7.29l-4.828 15.672h7.037l3.016-10.343z")

d3.select(".icon-svg")
  .append("path")
  .attr("d", "M0.947 57.293h61.73v5.873h-61.73v-5.873z")

d3.select(".icon-container")
  .attr("transform", "translate(" + ((width / 2) - icon_width/2) + "," + ((height / 2) - icon_height/ 2) + ")");

d3.csv("skilled_asst.csv", type, function(error, data) {
  if (error) throw error;

console.log(data);
  console.log(pie(data));

var data_sub = [{attendant: "Doctor", percentage: 59},
                  {attendant: "Nurse", percentage: 10},
                  {attendant: "LHV", percentage: 8},
                  {attendant: "CMW", percentage: 2}];

console.log(sub_pie(data_sub));

var g = svg.selectAll(".arc")
      .data(pie(data))
    .enter().append("g")
      .attr("class", "arc");

var g_sub = svg.selectAll(".sub_arc")
      .data(sub_pie(data_sub))
    .enter().append("g")
      .attr("class", "sub_arc");

g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.attendant); });

g_sub.append("path")
      .attr("d", sub_arc)
      .style("fill", function(d) { return color_sub(d.data.attendant); });

g.append("text")
      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
      .attr("dy", ".35em")
      .text(function(d) { return d.data.attendant; })
      .style("fill", "white");
});

function type(d) {
  d.percentage = +d.percentage;
  return d;
}

</script>

https://d3js.org/d3.v3.min.js