Keep circle centered

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

background-color: #97adfa;
      }
    </style>
  </head>
  <body>
    <h2>Circle 2 - Stay centered</h2>
    <div id="circle"></div>

// Data values, [cx, cy, r]
      var data = [[
        document.getElementById("circle").clientWidth / 2,
        document.getElementById("circle").clientHeight / 2,
         15]];

// Generate the SVG element and size
      var svg = d3.select("#circle").append("svg")
        .attr("width", "100%")
        .attr("height", "100%");

// Create the circle
      var circle =  svg.selectAll("circle")
          .data(data)
            .enter().append("circle")
              .attr("cx", function(d, i) { return d[0]; })
              .attr("cy", function(d, i) { return d[1]; })
              .attr("r", function(d) { return d[2]; })
              .style("fill", "red");

// Anytime the screen is resized update 
      window.onresize = function() {
        renderCircle(data);
      };

// General Update Pattern
      function renderCircle(data) {
        if (width > document.documentElement.clientWidth) {
          counter--;
        } else if (width < document.documentElement.clientWidth) {
          counter++;
        }
        width =  document.documentElement.clientWidth;
        if (counter < 1) counter = 1;

circle.merge(circle)
          .attr("cx", function(d, i) { return document.getElementById("circle").clientWidth / 2; })
          .attr("cy", function(d, i) { return document.getElementById("circle").clientHeight / 2; })
          .attr("r", function(d) { return (d[2]); })
          .style("fill", "blue");

circle.exit().remove();
      }
    </script>
  </body>
</html>

https://d3js.org/d3.v4.min.js