JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<button id="myButton">Randomize</button><br>
<svg width="400" height="400">
	<circle cx="50" cy="50" r="10" stroke="darkslategray" stroke-width="1" fill="teal"></circle>
	<circle cx="150" cy="50" r="10" stroke="darkslategray" stroke-width="1" fill="teal"></circle>
	<circle cx="210" cy="320" r="10" stroke="darkslategray" stroke-width="1" fill="teal"></circle>
	<circle cx="210" cy="30" r="10" stroke="darkslategray" stroke-width="1" fill="teal"></circle>
	<circle cx="180" cy="200" r="10" stroke="darkslategray" stroke-width="1" fill="teal"></circle>
</svg>

CSS

.axis path, line{
	stroke: gainsboro;
}

JavaScript

var xScale = d3.scaleLinear().range([20, 380]).domain([0,10]);
var yScale = d3.scaleLinear().range([20, 380]).domain([10,0]);

var xAxis = d3.axisBottom(xScale).tickSizeInner(-360);
var yAxis = d3.axisLeft(yScale).tickSizeInner(-360);

var svg = d3.select("svg");

svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0,380)")
	.call(xAxis);
	
svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(20,0)")
	.call(yAxis);

d3.selectAll("g").lower();
	
var circles = svg.selectAll("circle");

d3.select("#myButton").on("click", randomize);

function randomize(){
	var data = [];
	for(var i = 0; i<5; i++){
	data.push({x: Math.random()*10, y: Math.random()*10});
	}
	circles.data(data);
	console.log(circles.nodes());
	circles.transition().duration(1000)
	.attr("cx", function(d){ return xScale(d.x)})
	.attr("cy", function(d){ return yScale(d.y)});
}