JSFiddle - React, Tailwind, and code Playground

by dirtyd77

CSS

svg{
    border: 1px solid;
}
div{
    border: 1px solid purple;
    height: 100px;
    width: 100%;
}
circle{
    fill: blue;
    stroke: steelblue;
    stroke-width: 1;
}

JavaScript

var svg = d3.select('body')
.append('svg').
attr({
    height: 300,
    width: 300
});

var data = [
    {
        id: 'item1',
        value: 2
    },
    {
        id: 'item1',
        value: 8
    },
    {
        id: 'item2',
        value: 4
    }
];

function update(){
    var circles = svg.selectAll('circle').data(data, function(d){
        return d.id;   
    });

circles
.enter()
.append('circle')
.attr({
    cx: 0,
    cy: 0,
    r: 0
});

circles.exit()
.transition()
.attr({
    cx: 0,
    cy: 0,
    r: 0
})
.remove();

circles
.transition()
.duration(2000)
.attr({
    cx: function (d, i){
        return (i + 1) * 50;
    },
    cy: function (d, i){
        return (i + 1) * 25;
    },
    r: function (d, i){
        return (i + 1) * 2;
    }
});
}

update();

setTimeout(function (){
    data[0].id = 'item0';
    data[0].value = 6;
    data.splice(2, 0, {
        id: 'item3',
        value: 10
    });
   update();
}, 3000);