ruleta preguntados d3

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="//d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    var w = 960, h = 500, r = Math.min(w, h) / 2, ir = r - 100;
    var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d; });
    
    var ruleta = ["ciencia", "historia", "deportes", "arte", "pop", "corona", "geografia"];
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body")
    	.append("svg")
      .attr("width", w)
      .attr("height", h)
    
    var slice = (((360/ruleta.length)/360) * (2 * Math.PI));
    var initial = -Math.PI+slice;
    var pointerInit = -(Math.PI)-((45/360) * (2*Math.PI));
    var pointerEnd = -(Math.PI)+((45/360) * (2*Math.PI));
    
    var arc = d3.svg.arc()
    	.innerRadius(ir)
      .outerRadius(r)
    	.cornerRadius(10)
      .startAngle((d, i) => initial + (slice * (i+1)))
      .endAngle((d, i) => (initial + (slice * (i+1)) + slice));
    
    var pointerArc = d3.svg.arc()
    	.innerRadius(0)
      .outerRadius(r/2)
      .startAngle(pointerInit)
      .endAngle(pointerEnd);
   
    var color = d3.scale.ordinal()
    .range(["#24C36B", "#F8DF53", "#F99123", "#DB232F", "#F14CAA", "#8D40B2", "#1E71CB", "black"]);
   
    svg.selectAll(".arc")
      .data(ruleta)
    	.enter()
    	.append("g")
        .attr({
          "transform": "translate(" + w/2 + "," + h/2 + ")",
          "class": "arc"
        })
      .append("path")
      	.attr("d", arc)
      	.style("fill", color);
    
    svg.append("g")
      .attr({
        "transform": "translate(" + w/2 + "," + (h/2 - (140 + 30)) + ")",
        "class": "pointerArc"
      })
    .append("path")
      .attr({
        d: pointerArc,
        fill: "#DADADA",
      	stroke: "white",
      	"stroke-width": 5
      });
    
    svg.append("circle")
        .attr({
          cx: w/2,
          cy: h/2,
          r: ir,
          fill: "#DADADA",
      		stroke: "white",
      		"stroke-width": 5
        });
    
    svg.append("text")
      .text("GIRAR")
      .attr({
      	"font-family": "sans-serif",
      	"font-size": 46,
      	"font-weight": 900,
        x: w/2 - 80,
        y: (h/2),
        fill: "#616161"
      });
  </script>
</body>

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