JSFiddle - React, Tailwind, and code Playground

by csaid

JavaScript

//Create SVG Container
var svg = d3.select("body")
    .append("svg")


//Function to update vertical position of circles with new data
function updatePositions(data) {

    var circles = svg.selectAll("circle").data(data)

    circles.enter().append("circle")

    circles.exit().remove()

    circles.attr("r", 6)
        .attr("cx", 50)
        .attr("cy", function (d) {
        return 20 * d
    })

}

//Three example datasets. This works.
setTimeout(function () {
    updatePositions([1, 2, 4, 8])
}, 1000)
setTimeout(function () {
    updatePositions([2, 5, 7])
}, 2000)
setTimeout(function () {
    updatePositions([1, 2, 3, 4, 5])
}, 3000)