SOURCE

const height = 220
const width = 400
const root = document.createElement("canvas")
root.width = width
root.height = height
const context = root.getContext('2d')

const dataArray = [100, 70, 20, 90]
const transitionTime = 500

const dataContainer = d3.select(
    document.createElement('custom')
)

function drawCustom(data) {
    const dataBinding = dataContainer
        .selectAll("custom.circle")
        .data(data, d => d)

    dataBinding.enter()
        .append("custom")
        .classed("circle", true)
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("radius", 0)
        .attr("fillStyle", "rgba(18, 178, 150,0.3)")
        .transition()
        .duration(transitionTime)
        .delay(function (d, i) { return i * transitionTime })
        .ease(d3.easeLinear)
        .attr("radius", d => d)
}

function drawCanvas() {
    context.clearRect(0, 0, width, height)

    const elements = dataContainer.selectAll("custom.circle")
    elements.each(function(d) {
        const node = d3.select(this)
        context.fillStyle = node.attr("fillStyle")
        context.beginPath()
        context.arc(node.attr("cx"), node.attr("cy"), node.attr("radius"), 0, 2 * Math.PI)
        context.fill()
        context.closePath()
    })
}

drawCustom(dataArray)
d3.timer(drawCanvas)



setTimeout(() => {
    document.body.append(root)
})