Demo of d3-boxes

An example of d3-boxes in action. Responds to resize.

forked from curran's block: Responding to Resize

forked from curran's block: Demo of d3-boxes

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dynamic Size Example</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://unpkg.com/d3-boxes@0.0.2/build/d3-boxes.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.6/vega.js"></script>
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-rc5/vega-lite.js"></script>
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc6/vega-embed.js"></script>
    <style>
    	body {
      	font-family: sans-serif;
    	}   
    	.vega-actions a {
      	padding: 0.2em;
    	}
      /* Make the chart container fill the page using CSS. */
      #chart {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
    </style>
  </head>
  <body>

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);
        
        var layout = {
          orientation: "vertical",
          children: [
            "En-tête",
            {
              orientation: "horizontal",
              children: [
                "BA",
                {orientation: "vertical",
              		children: ["BB1", "BB2", "BB3"]}, 
                "BC"
              ],
              size: 3 // Make this layer have a size weight of 2 (default is 1)
            }
          ]
        };
        
        var sizes = {
          "En-tête": {
            size: 0.5 // Make the "A" box have a size weight of 2 (default is 1)
          },
          "BA": {size: 0.5},
          "BC": {size: 2},
        };
        
        var box = {
          width: width,
          height: height
        };
        
        var boxes = d3.boxes(layout, sizes, box);
        
        // Have a look in the console!
        console.log(boxes);
        
        Object.keys(boxes).forEach(function (name) {
          drawBox(name, boxes[name]);
        });
        const opt = {renderer: "svg"};
        vegaEmbed(".BC", BC, opt);
      }

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

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

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

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

https://unpkg.com/d3-boxes@0.0.2/build/d3-boxes.js

https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.6/vega.js

https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-rc5/vega-lite.js

https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc6/vega-embed.js