JSFiddle - React, Tailwind, and code Playground

by yonet3d

HTML

<body>
    
</body>

JavaScript

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

var xScale = d3.scale.linear()
	.domain([0, 5])
	.range([0, 200]);

var render = function(data, r, color){
    //Bind
    var circles = svg.selectAll('circle').data(data);
    //Enter
    circles.enter().append('circle');
    //Update
    circles.attr({
    		'cx': function(d){return xScale(d)},
        	'cy': 30,
        	'r': r,
        	'fill': function(){return color || 'red'} 
    	})
}
var oldData = [1, 2, 3];
var newData = [1, 2, 3, 4, 5];
render(oldData, 10);
render(newData, 15, 'blue');