Fullsize.js Prototype by curran

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

index.html

<!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>

    <script src="fullsize.js"></script>
    
    <script>

      // 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>

fullsize.js

// A utility for creating "full size" graphics programs with D3.js.
// Useful for full-screen graphics, or graphics indended for use inside iFrames.
function fullsize(render){
  
  // Append a div to the body,
  // make it fill the display using CSS,
  // store a reference to the DOM node for later use.
  var div = d3.select("body")
    .append("div")
      .style("position", "fixed")
      .style("left", "0px")
      .style("right", "0px")
      .style("top", "0px")
      .style("bottom", "0px")
    .node();

  // Append an SVG as a child of the container DOM node.
  var svg = d3.select(div)
  	.append("svg");
  
  // This function updates the size of the SVG
  // and invokes the render() function.
  function redraw(){

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

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

    // Invoke the render function passed into fullsize().
    render(svg, width, height);
  }
  
  // Draw for the first time to initialize.
  redraw();
  
  // Redraw based on the new size whenever the browser window is resized.
  window.addEventListener("resize", redraw);
}