expandingAnimatedNodes2 = {
const radius = 8
const container = d3.select(DOM.svg(width+margin.left+margin.right,
height+margin.top+margin.bottom))
container.style("background-color", "white")
const arcGroup = container
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
const redcol = d3.rgb("252", "0", "8");
const animatedNodes = arcGroup.selectAll("nodes")
.data(nodes)
.enter().append("circle")
.attr("cx", d => xScale(d.name))
.attr("cy", height-50)
.attr("r", radius)
.attr("fill", redcol)
.attr("opacity", 1)
container.transition().duration(50).style("background-color", "black")
animatedNodes
.transition(d3.easeBounce)
.duration(1000)
.attr("r", 20).attr('opacity', 0.3)
.transition()
.ease(d3.easeLinear)
.duration(2000)
.attr("opacity", 0)
.on("end", function() {
container.transition().duration(1000).style("background-color", "white");
})
return container.node();
}