pieColor

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

<body>
  
  <button id="myButton">Click</button>
  <div id="chart"></div>
  
  <script>
    console.clear()
    
    let width = window.innerWidth * 0.9
    let height = window.innerHeight * 0.9
    let chartId = "#chart"
    let radius = Math.min(width, height) / 2
    let centroid = width / 2 + "," + height / 2
    let pointerLength = (radius / 2) / 2 
    var numberOfSlices = 8
    var valueOfSlices = 100 / numberOfSlices
    var data = {}
    
    for (let i = 0; i < numberOfSlices; i++) {
      data["item" + i] = +valueOfSlices
    }
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select(chartId)
    	.append("svg")
      .attr("width", width)
      .attr("height", height)
    
    var pieG = svg
			.append("g")
    	.attr("transform", "translate(" + centroid + ")");
    
    var pointerG = svg
			.append("g")
    	.attr("transform", "translate(" + centroid + ")");
    
    var colorScale = d3.scaleSequential(d3["interpolate" + "RdYlBu"])
        .domain([0, 9]);
    
    var pie = d3.pie()
  		.value(function(d) {return d.value; })
    
    var arcGenerator = d3.arc()
  		.innerRadius(0)
  		.outerRadius(radius)
    
		var data_ready = pie(d3.entries(data))

pieG
      .selectAll('mySlices')
      .data(data_ready)
      .enter()
      .append('path')
    	.attr("class", "slice")
      .attr("d", arcGenerator)
      .style("fill", function(d,i) { return colorScale(i); })
      .attr("stroke", "white")
      .style("stroke-width", radius*0.01)
      .style("opacity", 0.7)
    
    var centerDot = pointerG.append("circle")
      .attr("r", pointerLength)
      .attr("cx", 0)
      .attr("cy", 0)
      .style("fill", "#00000")

var centerTriangle = pointerG.append("polygon")
      .attr("points", [[-pointerLength,0],[0,pointerLength*3],[pointerLength,0]])
      .style("fill", "#000000")

for (let x = 100; x >= 0; x--) {
      rotate(x);
    }
    
    function rotate(rpm) {
      if (rpm == 0) {
        pointerG.interrupt()
      } else {
        if(pointerG._groups[0][0].transform.animVal[1] == undefined){
          var newAngle = pointerG._groups[0][0].transform.animVal[0].angle + 120;

pointerG.transition().duration(20000/rpm).ease(d3.easeLinear)
            .attr("transform", "translate(" + width/2 + ", " + height/2 + ")rotate(" + newAngle + ")")
            .on("end", function() {rotate(rpm)})
        } else {
          var newAngle = pointerG._groups[0][0].transform.animVal[1].angle + 120;

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

https://d3js.org/d3-scale-chromatic.v1.min.js