How to tweak the Zoomable Circle Pack html code to be responsive?

Question

I have been able to run the following code https://bl.ocks.org/fdlk/076469462d00ba39960f854df9acda56 successfully. Now I am trying to find a way to automatically scale the d3 plot when I switch screens (laptop to bigger monitor) or my browser window (full or small).

Can someone please guide me where to apply the tweak to make the mentioned code responsive? (The original code is supposed to be unresponsive)

I have already tried several things like using viewBox, windows events, etc. without success (see OPTIONS below). Since I am a newbie, I am sure something small is missing somewhere.

OPTION 1:

Part of Original Code:

Part-A

<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

Part-B

var svg = d3.select("svg"),
margin = 20,
diameter = +svg.attr("width"),
g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

Modified Part-A of Original Code:

<svg id="chart" width="960" height="500"
viewBox="0 0 960 500"
preserveAspectRatio="xMidYMid meet">
</svg>

Nothing added in Style (CSS).

OPTION 2:

Part of Original Code:

var svg = d3.select("svg"),
margin = 20,
diameter = +svg.attr("width"),
g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

Modified Original Code:

d3.select("div#chartId")
.append("div")
.classed("svg-container", true) //container class to make it responsive
.append("svg")
//responsive SVG needs these 2 attributes and no width and height attr
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 600 400")
//class to make it responsive
.classed("svg-content-responsive", true); 

The issue is where is "div#chartId" defined in the original code? It is simply d3.select("svg"). Also, the code below d3.select expects margin and diameter parameters.

Also added the following in Style (CSS)

.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%; /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}

OPTION 3:

Part of Original Code:

<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>  
var svg = d3.select("svg"),
margin = 20,
diameter = +svg.attr("width"),
g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

var color = d3.scaleLinear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);

Modified Original Code:

<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="chart"></div>
<script>

var chartDiv = document.getElementById("chart");
var svg = d3.select(chartDiv).append("svg");

function redraw(){

// Extract the width and height that was computed by CSS.
    var width = chartDiv.clientWidth;
    var height = chartDiv.clientHeight;

    // Use the extracted size to set the size of an SVG element.
    svg
      .attr("width", width)
      .attr("height", height);

    // Draw an X to show that the size is correct.
    var lines = svg.selectAll("line").data([
      {x1: 0, y1: 0, x2: width, y2: height},
      {x1: 0, y1: height, x2: width, y2: 0}
    ]);
    lines
      .enter().append("line")
        .style("stroke-width", 50)
        .style("stroke-opacity", 0.4)
        .style("stroke", "black")
      .merge(lines)
        .attr("x1", function (d) { return d.x1; })
        .attr("y1", function (d) { return d.y1; })
        .attr("x2", function (d) { return d.x2; })
        .attr("y2", function (d) { return d.y2; })
     ;
  }

  // Draw for the first time to initialize.
  redraw();

  // Redraw based on the new size whenever the browser window is resized.
  window.addEventListener("resize", redraw);

var color = d3.scaleLinear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);