Pyramid Pie Chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
   body {
   background-color: lightgrey;
     }

svg {
    width: 100%;
    height: 100%;
    position: center;
     }
    
    .slice:hover{
      fill:red;
    }
  </style>
</head>

<body>
  <svg width="960" height="500"></svg>
  <script>
var margin = {top: 30, right: 30, bottom: 50, left: 30};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var radius = Math.min(width, height) / 2;

var color = d3.scaleOrdinal(["#0095D9", "#9C9536", "#F5E837"]);

var data = [
            {"type":"Sky","pop":0.75},
            {"type":"Shady side of pyramid","pop":0.07},
            {"type":"Sunny side of pyramid","pop":0.18}
            ];

var g = d3.select("svg")
        .append("g")
        .attr("transform", "translate(" + width / 1.8 + "," + height / 1.6 + ")");

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

</script>
</body>

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