Old school D3 from simpler times

All examples By author By category About

tomshanley

Full window Github gist

matrix inside circle

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { 
      margin: 50;
    }
    circle {
      fill: none;
      stroke: black;
			stroke-width: 2px;
   	}
    rect {
      stroke: black;
			stroke-width: 1px;
   	}
  </style>
</head>

<body>
  
  <div id="chart"></div>
  <div id="count"></div>
  
  <script>
    
    console.clear()
    
    let radius = 250
    let diameter = radius * 2
    let margin = 20
    let squareWidth = 30
    let n = Math.floor(diameter / squareWidth)
    let offset = (diameter - (n * squareWidth)) / 2
    let width = diameter
    let height = width
    let numberOfSquaresInsideCircle = 0

let svg = d3.select("#chart").append("svg")
    	.attr("width", width + (margin * 2))
    	.attr("height", height + (margin * 2))
    
    let g = svg.append("g")
    	.attr("transform", "translate(" + margin + ", " + margin + ")")
    
    for (var i = 0; i < n; i++) {
      for (var j = 0; j < n; j++) {
        
        let x = (i * squareWidth) + offset
        let y = (j * squareWidth) + offset
        
        let fill = ""
        
        // here i'm basing the square's colour on whether its in the circle
        // you could choose to not append the rect at all, or something similar
        
        if(isSquareOutsideCircle(x, y, squareWidth, radius)) {
          fill = "red"
        } else {
          fill = "grey"
          numberOfSquaresInsideCircle = numberOfSquaresInsideCircle + 1
        }
        
      	g.append("rect")
        	.attr("x", x)
        	.attr("y", y)
        	.attr("width", squareWidth)
        	.attr("height", squareWidth)
        	.style("fill", fill)
        	.attr("id", "cell-" + i + "-" + j)
    	}
    }
    
    let squares = d3.selectAll("rect")
    
    let circle = g.append("circle")
    	.attr("cx", radius)
    	.attr("cy", radius)
    	.attr("r", radius)
    
    console.log(numberOfSquaresInsideCircle)
    
    d3.select("#count")
    	.text(numberOfSquaresInsideCircle)
     
    function isSquareOutsideCircle(squareX, squareY, squareW, circleR) {
      
      	let outside1 = isPointOutsideCircle(squareX, squareY, circleR)
        let outside2 = isPointOutsideCircle((squareX + squareW), squareY, circleR)
        let outside3 = isPointOutsideCircle(squareX, (squareY + squareW), circleR)
        let outside4 = isPointOutsideCircle((squareX + squareW), (squareY + squareW), circleR)
        
        return outside1 | outside2 | outside3 | outside4 ? true : false
      
    }
    
    function isPointOutsideCircle(x, y, r) {
      return hypothenuese(
          Math.abs(r - x), 
          Math.abs(r - y))
        	>
            r
        ? true : false
    }
    
    function hypothenuese(side1, side2) {
      return Math.sqrt((side1 * side1) + (side2 * side2))
    }

</script>
</body>

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