{
const svgBackgroundColor = "#000",
circleColor = "#a3f7b5",
svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", svgBackgroundColor),
bigContainer = svg.append("g")
.attr("transform", `translate(${width/2},${height/2})`),
container = bigContainer.append("g"),
circlesContainer = bigContainer.append("g");
function update(concentricData,count){
const t = d3.transition()
.duration(500);
let circles = circlesContainer
.selectAll("circle")
.data(concentricData, d => d.id);
circles
.join(
enter => enter.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", d => d.radius)
.attr("stroke", (d,i) => colorScale(i))
.attr("stroke-width", 1)
.style("opacity", 1)
.attr("fill", "none"),
update => update.call(e => e.transition(t)
.attr("stroke-width", (d,i) => sineScaleLineWidth(Math.sin(count*i/concentricData.length)))
.style("opacity", (d,i) => sineScale(Math.sin(count*i/concentricData.length)))
)
)
}
update(concentricCircleData);
yield svg.node();
let count = 1;
d3.interval(() => {
update(concentricCircleData,count);
count ++
}, 500);
}