JSFiddle - React, Tailwind, and code Playground

CSS

svg {
    border: 1px solid black;
    margin:5px;
}
circle{
    fill:red;
}

JavaScript

var width = 100,
    height = 100,
    radius = 6;

var drag = d3.behavior.drag()
    .on("drag", dragmove);

function dragmove(d) {
    d3.select(this).attr("cx", d3.event.x)
      .attr("cy", d3.event.y);
}

//create several svg charts
var svg = d3.select("body")
            .append("div").selectAll("svg")
            .data(d3.range(8).map(function() { 
                    return {x: width / 2, y: height / 2}; 
                }))
            .enter().append("svg")
            .attr("width", width)
            .attr("height", height);

// put some points on the maps
var dataset = [
    [57, 70], [43, 70],
    [67, 60], [33, 60],
    
    [65, 30], [35, 30]];

svg.selectAll("circle")
			   .data(dataset)
			   .enter()
			   .append("circle")
			   .attr("cx", function(d) {
			   		return d[0];
			   })
			   .attr("cy", function(d) {
			   		return d[1];
			   })
			   .attr("r", 5)
               .call(drag);