D3 Examples - Dynamic Size

Dynamic Size

This example shows how to make a D3 visualization that fills up the size of the page at the time it is loaded. This is necessary when, for example, you want to be able to load your visualization into an iFrame that could be any size. This example was created to address this question on the D3 Google Group: Any advice for setting width in iframes with D3?.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dynamic Size Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <style>
​
      /* Make the chart container fill the page using CSS. */
      #chart {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
    </style>
  </head>
  <body>
​
    <div id="chart"></div>
​
    <script>
​
      // Extract the width and height that was computed by CSS.
      var chartDiv = document.getElementById("chart");
      var width = chartDiv.clientWidth;
      var height = chartDiv.clientHeight;
​
      // Use the extracted size to set the size of an SVG element.
      var svg = d3.select(chartDiv).append("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");
      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", 50)
        .style("stroke-opacity", 0.4)
        .style("stroke", "black");
​
    </script>
  </body>
</html>
​
    