Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg {
width: 100%;
height: 100%;
}
</style>
</head>
<body style="background-color:#172026; font-family:'roboto'">
<svg></svg>
<script>
var index=0
var w = 200;
var padding = 50;
var arc
var colors = d3.scaleOrdinal()
.range(["#F0B69A","#EFDFB4","#D2A4AC","#9F7A93","#894483"])
var data = [
[100, 150, 200, 250, 300],
[80, 150, 200, 250, 330],
[25, 150, 200, 250,370]
];
var t = d3.transition(1000)
var svg = d3.select('svg')
.append('g')
.attr('transform', 'translate(200,200)');
function updatePie(data){
console.log(data)
arc = d3.arc()
.innerRadius(75)
.outerRadius(100)
.padAngle(.000)
.startAngle(d => d.startAngle)
.endAngle(d => d.endAngle);
var arcOver = d3.arc()
.innerRadius(75)
.outerRadius(120)
.startAngle(d => d.startAngle)
.endAngle(d => d.endAngle);
var legend = svg.append("g")
.attr("class", "legend")
.attr("height", 100)
.attr("width", 100)
.attr('transform', 'translate(0,-120)')
var legendIcon =legend.selectAll('circle') //update selections
.data(data, (d,i)=>i)
var legendText =legend.selectAll('text')
.data(data)
var pies = d3.pie()(data);
var pieChart = svg.selectAll('path')
.data(pies)
legendIcon.exit().remove(); //exit selections
svg.selectAll("circle").remove();
legendText.exit().remove()
svg.selectAll("text").remove();
pieChart.exit().remove();
var legendIconEnter=legendIcon.enter() //enter selections
.append("circle")
var legendTextEnter = legendText.enter()
.append("text")
var enter = pieChart.enter().append('path')
.attr('stroke-width', '0')
legendText = legendTextEnter.merge(legendText) //merge slections
.attr("x", w - 52)
.attr("y", function(d, i){ return i * 20 + 3;})
.text((d, i) => data[i])
.attr('fill', (d, i) => colors(i)) ;
legendIcon= legendIconEnter.merge(legendIcon)
.attr("cx", w - 65)
.attr("cy", function(d, i){ return i * 20;})
.attr("r", 3)
.attr('fill', (d, i) => colors(i))
pieChart = enter.merge(pieChart)
.attr("d", arc)
.on('mouseenter', function(d) {
d3.select(this).transition()
.duration(1)
.attr("d", arcOver);
})
.on("mouseout", function(d) {
d3.select(this).transition()
.duration(1)
.attr("d", arc);
})
.transition().duration(2500).attrTween("d", arcTween)
.attr('fill', (d, i) => colors(i))
svg.append("text")
.attr("text-anchor", "middle")
.text(data.length + ' New Cases')
.attr('fill', '#fff')
.attr('font', 'roboto')
}
setInterval(() => {
updatePie(data[index % 3]);
index += 1;
}, 3000);
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return arc(i(t));
};
}
</script>
</body>
https://d3js.org/d3.v4.min.js