D3 Examples - Visual popout

xxxxxxxxxx
 
<!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));
        }
     
    }
​
​
    var blue_circles = x_c.map(function (e, i) {
    return [x_c[i], y_c[i]];
});
    var red_circles = x_r.map(function (e, i) {
    return [x_r[i], y_r[i]];
});
        var b_circle = svg.selectAll("b_circle")
    .data(blue_circles)
    .enter()
    .append("circle");
    
    b_circle.attr("cx", function(d) {
      return d[0];
    })
                    .attr("cy", function(d) {
      return d[1];
    })
                .attr("r", 2)
                .attr("fill","blue");
    
    
        var r_rect = svg.selectAll("r_rect")
    .data(red_circles)
    .enter()
    .append("rect");
    
    r_rect.attr("x", function(d) {
      return d[0];
    })
                    .attr("y", function(d) {
      return d[1];
    })
                .attr("width", 4)
                .attr("height",4)
                .attr("fill","red");   
    
  </script>
</body>
​
    