[Solved]-Trying to user scatterplots in a d3 chart with brush/zoom-d3.js

In your brushed and zoomed functions, you need to select your circles and apply dynamic attributes. But before you do that, you need to rename the class for your circles. Something like:

// draw dots
focus.selectAll("circle")
  .data(data)
  .enter().append("circle")
    .attr("class", "circle")

...

function brushed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
  var s = d3.event.selection || x2.range();
  x.domain(s.map(x2.invert, x2));
  focus.select(".area").attr("d", area);
  focus.select(".axis--x").call(xAxis);
  focus.selectAll(".circle")
    .attr("r", (d)=>{return (d.PTS)})
    .attr("cx", (d)=>{return x(d.date)})
    .attr("cy", (d)=>{return y(d.PTS)})

  svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
      .scale(width / (s[1] - s[0]))
      .translate(-s[0], 0));
}

function zoomed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
  var t = d3.event.transform;
  x.domain(t.rescaleX(x2).domain());
  focus.select(".area").attr("d", area);
  focus.select(".axis--x").call(xAxis);
  focus.selectAll(".circle")
    .attr("r", (d)=>{return (d.PTS)})
    .attr("cx", (d)=>{return x(d.date)})
    .attr("cy", (d)=>{return y(d.PTS)})
  context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
}