Resizing SVG and shapes in a responsive manner

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example of Dynamically Resizing SVG Canvas and Shapes</title>

</script>

</head>

<body>

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

function draw(){

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

var circleData = [
        {"label": "Node 1", "multiplier": 1, "color":"red"},
        {"label": "Node 2", "multiplier": 3, "color":"yellow"},
        {"label": "Node 3", "multiplier": 5, "color":"green"},
        {"label": "Node 4", "multiplier": 7, "color":"blue"}
      ];

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

// Draw two lines (from corner to opposite corner)
        var lines = svg.selectAll("line")
          .data([
            {x1: 0, y1: 0, x2: width, y2: height},
            {x1: 0, y1: height, x2: width, y2: 0},
            {x1: width/2, y1: height, x2: width/2, y2: 0},
            {x1: 0, y1: height/2, x2: width, y2: height/2}
        ]);
        lines.enter().append("line");
        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; })
          .style("stroke-width", 30)
          .style("stroke-opacity", 0.5)
          .style("stroke", "maroon");

}

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

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

</script>
  </body>
</html>

Modified http://mbostock.github.com/d3/d3.js?2.4.5 to a secure url

https://mbostock.github.com/d3/d3.js?2.4.5