{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height]);
//
const arcs = pie(piedata);
let g = svg.append("g").attr("transform", "translate(" + radius + "," + height / 2 + ")");
let path = g.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data.typevar))
.attr("class", (d,i) => "arc"+i);
path = path
.transition()
.duration(500)
.attrTween("d", arcTween);
const [arc0, arc1, arc2] = arcs.slice(0, 3)
console.log(g);
g.select("path.arc0")
.transition()
.duration(1000)
.delay(1500)
.attr("d", d => arcOver(d))
.transition()
.attr("d", d => arc(d))
g.transition()
.duration(1000)
.delay(2500)
.attr("transform", "translate(" + radius + "," + height / 2 + ") rotate(" + angle(arc1) + ")")
g.select("path.arc1")
.transition()
.duration(1000)
.delay(2700)
.attr("d", d => arcOver(d))
.transition()
.attr("d", d => arc(d))
g.transition()
.duration(1000)
.delay(3500)
.attr("transform", "translate(" + radius + "," + height / 2 + ") rotate(" + angle(arc2) + ")")
g.select("path.arc2")
.transition()
.duration(1000)
.delay(3700)
.attr("d", d => arcOver(d))
// .transition()
// .attr("d", d => arc(d))
g.selectAll('path').transition().ease(d3.easeBackIn.overshoot(1)).duration(500).delay(5500).style('opacity', 0).attr('transform', 'translate(-500, -500)')
return svg.node()
/** return Object.assign(svg.node(), {
update(data) {
const arcs = pie(data);
const change = function(d, i) {
console.log(d);
const clicked = i.__data__;
var angle = 90 - ((clicked.startAngle * (180 / Math.PI)) + ((clicked.endAngle - clicked.startAngle) * (180 / Math.PI) / 2))
g.transition()
.duration(1000)
.attr("transform", "translate(" + radius + "," + height / 2 + ") rotate(" + angle + ")")
d3.selectAll("path")
.transition()
.duration(1000)
.attr("d", arc)
d3.select(this)
.transition()
.duration(1000)
.attr("d", d => {
console.log(d);
return arcOver(clicked)
})
};
,
update => update)
// .on("click", change)
}
});**/
}
"arc"+0
piedata.slice(0, 3)
pie(piedata)[0]
angle = (piearc) => {
return 90 - ((piearc.startAngle * (180 / Math.PI)) + ((piearc.endAngle - piearc.startAngle) * (180 / Math.PI) / 2))
}
function arcTween(d) {
var i = d3.interpolate(d.startAngle, d.endAngle);
return function(t) {
d.endAngle = i(t);
return arc(d);
};
}
90 - ((0 * (180 / Math.PI)) + ((2 - 0) * (180 / Math.PI) / 2))
color = d3.scaleOrdinal()
.domain(piedata.map(d => d.typevar))
.range(['#002673', '#ffff73', '#4c81cd', '#0084a8', '#fcd27e', '#b1a9d0', '#910048', '#e69800', '#d6d6d6', '#5e4fa2'])
//.range(['#9e0142', '#d53e4f', '#f46d43', '#fdae61', '#fee08b', '#e6f598', '#abdda4', '#66c2a5', '#3288bd', '#5e4fa2'])
//.range(['#001E60', '#dA291C', '#f2A900', '#00B0B9', '#910048', '#8031A7', '#407EC9', '#658D1B', '#e35205'])
pie = d3.pie()
.padAngle(0.005)
.value(d => d.value)
.sort(null)
arc = {
return d3.arc().innerRadius(0).outerRadius(radius - 10);
}
arcOver = {
return d3.arc().innerRadius(0).outerRadius(radius + 10);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
