[Solved]-Updating d3 scatterplot, new data points are not in the correct positions-d3.js

Your first set of circles gets appended to a group that is translated:

let svg = d3.select('.plot').append("svg")
  .attr('class', 'svgPlot')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform","translate(" + margin.left + "," + margin.top + ")");

In this case, the svg variable refers to a translated group. However, when you later reselect, you actually append to the root SVG element:

  let svg = d3.select('.svgPlot');

This is the origin of the difference.