Visual popout

Visual Popout, inspired by Figure 5.11 (f) of Visualization Analysis and Design book.

Both the squares and circles locations are randomly generated.

Frame function is inspired by David Beach's Popout work.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    
    	.frame {
    		stroke: #000000;
    		stroke-width: 7;
    		fill: none;
    	}
    
    
    
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    
    const width = w = 960;
  	const height =  h = 500;
    var svg = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h)
      const margin = { left: 30, right: 30, top:10, bottom: 30 };
  		const innerWidth = width - margin.left - margin.right;
  		const innerHeight = height - margin.top - margin.bottom;

const g = svg.append('g')
  		   .attr('transform', `translate(${margin.left},${margin.top})`);

const F_PadX = 50;
  		const F_PadY = 50;

const Frame_Width = (innerWidth - 2*F_PadX) / 3;
  		const Frame_Height = (innerHeight - F_PadY) / 2;

const frameInnerPad = 25;
  		const frameInnerWidth = Frame_Width - 2*frameInnerPad;
  		const frameInnerHeight = Frame_Height - 2*frameInnerPad;
    
    
    
    function Frame(i, j, label) {
  			const left = (i-1) * (Frame_Width + F_PadX);
  			const top = (j-1) * (Frame_Height + F_PadY);

const frame = g.append('g')
  			    .attr('transform', `translate(${left},${top})`);

frame.append('rect')
  			    .attr('x', 0)
  			    .attr('y', 0)
  			    .attr('width', Frame_Width)
  			    .attr('height', Frame_Height)
  			    .attr('class', 'frame');

frame.append('text')
  			    .attr('x', Frame_Width/2.5)
  			    .attr('y', Frame_Height + 25)
  			    .attr('class', 'label')
  			    .text(label);

const innerFrame = frame.append('g')
  			    .attr('transform', `translate(${frameInnerPad},${frameInnerPad})`);

return innerFrame;
  		}
    
    Frame(2, 1.5, "Box Frame");
    var x_c = []
    var y_c = []
    var x_r = []
    var y_r = []
    
    
    for (i = 0;  i < 100; i++) {
			if (i%2 == 0) {
        y_c.push(Math.floor((Math.random() + 0.825) * 180));
        x_c.push(Math.floor((Math.random() + 1.9) * 200));
      }
      else
        {
        y_r.push(Math.floor((Math.random() + 0.825) * 180));
        x_r.push(Math.floor((Math.random() + 1.9) * 200));
        }
     
    }

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