Fullsize.js Prototype

I noticed that if you search Google for "responding to resize", the first result is this Responding to Resize example I made some time back.

So, I wondered, do many people find this useful? Might there be an opportinuty to create a useful library that makes it easier to get started with "full size" graphics that respond to resize?

This example is a prototype of such a library. Would this be useful to you? If so, let me know!

forked from curran's block: Responding to Resize

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fullsize.js Prototype</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>

// Invoke the fullsize.js library.
      // This adds an SVG element to the page,
      fullsize(render);
      
      // This render function will be invoked on page load,
      // and every time the browser window resizes,
      // passing the updated width and height.
      function render(svg, width, height){
        
        // Draw an X to show that the size is correct.
        var data = [
          {x1: 0, y1: 0, x2: width, y2: height},
          {x1: 0, y1: height, x2: width, y2: 0}
        ];
        var lines = svg.selectAll("line").data(data);
        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; });
      }

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

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