Built with blockbuilder.org
xxxxxxxxxx
<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;
pointerG.transition().duration(20000/rpm).ease(d3.easeLinear)
.attr("transform", "translate(" + width/2 + ", " + height/2 + ")rotate(" + newAngle + ")")
.on("end", function() {rotate(rpm)})
}
}
}
</script>
</body>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-scale-chromatic.v1.min.js