Simple Circles

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

// Data values, [cx, cy, r]
      var data = [[75, 75, 5],[225, 75, 5], [75, 225, 5], [225, 225, 5]];

// Generate the SVG element and size
      var svg = d3.select("svg")
        .attr("width", 600)
        .attr("height", 600);

// Create the initial points
      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);
      };

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 d[0]; })
          .attr("cy", function(d, i) { return d[1]; })
          .attr("r", function(d) { return (d[2] * counter); })
          .style("fill", "blue");

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

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