adamfknapp/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This example shows how to make a D3 visualization that fills up the size of the page at the time it is loaded AND whenever the page is resized by the user. This is necessary when, for example, you want to be able to load your visualization "full screen" and give users the ability to size the window however they want to. This example was created to address this question on the D3 Google Group: Any advice for setting width in iframes with D3?.
To experience the resize behavior, run this example full-screen and resize the browser.


forked from curran's block: Responding to Resize
This is a reproduction of the 'Position on Common Scale' block created by Adam Knapp and availible at https://bl.ocks.org/adamfknapp/7e78932767a8281a7e5f9624aa3bcb6c/684c451700e8e2b0d22f5728530a9ce2832a5731

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dynamic Size Example</title>
    <script src="https://d3js.org/d3.v4.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>
			//forked from http://blockbuilder.org/curran/3a68b0c81991e2e94b19
      var chartDiv = document.getElementById("chart");
      var svg = d3.select(chartDiv).append("svg");

      function redraw(){

        // Extract the width and height that was computed by CSS.
        var width = chartDiv.clientWidth;
        var height = chartDiv.clientHeight;
        var Xmarg = width/25;
        var Ymarg = height/15;
        var xpos1 = Xmarg *6;
        var xpos2 = Xmarg *16;
        var endcapmarg  = Ymarg*0.25;
        var rad = height/90

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

        var lines = svg.selectAll("line").data([
          //Line 1
        	{x1: Xmarg,       y1: Ymarg*1,             x2: width-Xmarg, y2: Ymarg*1}, //line 1
          {x1: Xmarg,       y1:(Ymarg*1)-endcapmarg, x2: Xmarg,       y2: (Ymarg*1)+ endcapmarg}, // endcap
          {x1: width-Xmarg, y1:(Ymarg*1)-endcapmarg, x2: width-Xmarg, y2: (Ymarg*1)+ endcapmarg}, // endcap

          //Line 2
          {x1: Xmarg,       y1: Ymarg*2,             x2: width-Xmarg, y2: Ymarg*2}, //line 2
          {x1: Xmarg,       y1:(Ymarg*2)-endcapmarg, x2: Xmarg,       y2: (Ymarg*2)+ endcapmarg}, // endcap
          {x1: width-Xmarg, y1:(Ymarg*2)-endcapmarg, x2: width-Xmarg, y2: (Ymarg*2)+ endcapmarg}, // endcap

          //Line 3
          {x1: Xmarg,     y1: Ymarg*4,             x2: xpos1*1.5,   y2: Ymarg*4}, //line 3
          {x1: Xmarg,     y1:(Ymarg*4)-endcapmarg, x2: Xmarg,       y2: (Ymarg*4)+ endcapmarg}, // endcap
          {x1: xpos1*1.5, y1:(Ymarg*4)-endcapmarg, x2: xpos1*1.5,   y2: (Ymarg*4)+ endcapmarg}, // endcap

          //Line 4
          {x1: xpos1,       y1: Ymarg*5,             x2: width-Xmarg,   y2: Ymarg*5},  //line 4
          {x1: xpos1,       y1:(Ymarg*5)-endcapmarg, x2: xpos1,         y2: (Ymarg*5)+ endcapmarg}, // endcap
          {x1: width-Xmarg, y1:(Ymarg*5)-endcapmarg, x2: width-Xmarg,   y2: (Ymarg*5)+ endcapmarg}, // endcap
        	]);

        var dots = svg.selectAll('circle').data([
          {cx: xpos2, cy: Ymarg*1, r: rad } , // Line 1 dot
          {cx: xpos1, cy: Ymarg*2, r: rad } , // Line 2 dot
          {cx: xpos1, cy: Ymarg*4, r: rad } , // Line 3 dot
          {cx: xpos2, cy: Ymarg*5, r: rad }   // Line 4 dot
        ]);

        lines
          .enter().append("line")
            .style("stroke-width", 2)
            .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; });

        dots
         .enter().append('circle')
        	  .attr('fill', 'black')
         .merge(dots)
            .attr("cx", function (d) { return d.cx; })
            .attr("cy", function (d) { return d.cy; })
            .attr("r", function (d) { return d.r; });

        ;
      }

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

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dynamic Size Example</title>
	<script src="https://d3js.org/d3.v4.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>
	//forked from http://blockbuilder.org/curran/3a68b0c81991e2e94b19
	var chartDiv = document.getElementById("chart");
	var svg = d3.select(chartDiv).append("svg");

	function redraw(){

	// Extract the width and height that was computed by CSS.
	var width = chartDiv.clientWidth;
	var height = chartDiv.clientHeight;
	var Xmarg = width/25;
	var Ymarg = height/15;
	var xpos1 = Xmarg *6;
	var xpos2 = Xmarg *16;
	var endcapmarg = Ymarg*0.25;
	var rad = height/90

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

	var lines = svg.selectAll("line").data([
	//Line 1
	{x1: Xmarg, y1: Ymarg1, x2: width-Xmarg, y2: Ymarg1}, //line 1
	{x1: Xmarg, y1:(Ymarg1)-endcapmarg, x2: Xmarg, y2: (Ymarg1)+ endcapmarg}, // endcap
	{x1: width-Xmarg, y1:(Ymarg1)-endcapmarg, x2: width-Xmarg, y2: (Ymarg1)+ endcapmarg}, // endcap

	//Line 2
	{x1: Xmarg, y1: Ymarg2, x2: width-Xmarg, y2: Ymarg2}, //line 2
	{x1: Xmarg, y1:(Ymarg2)-endcapmarg, x2: Xmarg, y2: (Ymarg2)+ endcapmarg}, // endcap
	{x1: width-Xmarg, y1:(Ymarg2)-endcapmarg, x2: width-Xmarg, y2: (Ymarg2)+ endcapmarg}, // endcap

	//Line 3
	{x1: Xmarg, y1: Ymarg4, x2: xpos11.5, y2: Ymarg*4}, //line 3
	{x1: Xmarg, y1:(Ymarg4)-endcapmarg, x2: Xmarg, y2: (Ymarg4)+ endcapmarg}, // endcap
	{x1: xpos11.5, y1:(Ymarg4)-endcapmarg, x2: xpos11.5, y2: (Ymarg4)+ endcapmarg}, // endcap

	//Line 4
	{x1: xpos1, y1: Ymarg5, x2: width-Xmarg, y2: Ymarg5}, //line 4
	{x1: xpos1, y1:(Ymarg5)-endcapmarg, x2: xpos1, y2: (Ymarg5)+ endcapmarg}, // endcap
	{x1: width-Xmarg, y1:(Ymarg5)-endcapmarg, x2: width-Xmarg, y2: (Ymarg5)+ endcapmarg}, // endcap
	]);

	var dots = svg.selectAll('circle').data([
	{cx: xpos2, cy: Ymarg*1, r: rad } , // Line 1 dot
	{cx: xpos1, cy: Ymarg*2, r: rad } , // Line 2 dot
	{cx: xpos1, cy: Ymarg*4, r: rad } , // Line 3 dot
	{cx: xpos2, cy: Ymarg*5, r: rad } // Line 4 dot
	]);

	lines
	.enter().append("line")
	.style("stroke-width", 2)
	.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; });

	dots
	.enter().append('circle')
	.attr('fill', 'black')
	.merge(dots)
	.attr("cx", function (d) { return d.cx; })
	.attr("cy", function (d) { return d.cy; })
	.attr("r", function (d) { return d.r; });

	;
	}

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