How can I calculate distante between rects in D3? - d3.js

Question

I'm working on this project and I need to calculate the distance between rects? Some idea?
My goal is to replicate one hart about Covid from this piece from The Washington Post: https://www.washingtonpost.com/graphics/2020/health/coronavirus-herd-immunity-simulation-vaccine/
Below the picture is the code who I used to generate this chart.
Thanks!!
export function main(){
createSVG()
build()
}
let offset = {top: 20, left: 70}
let screenWidth = 800 - offset.left
let screenHeight = 400 - offset.top
function createSVG() {
let container = d3.select('#container')
svg = container.append('svg')
.attr('id', 'canvas')
.attr('width', screenWidth + offset.left)
.attr('height', screenHeight + offset.top)
}
function build() {
let rectWidth = 15
let rectHeight = 15
let randomMovementLimit = 9
let people = []
for(let i = 0; i< 100; i++){
const cellX = i % 10
const randomX = Math.random() * randomMovementLimit - 3
const x = offset.left + cellX * (rectWidth + 10) + randomX
const cellY = Math.floor(i / 10)
const randomY = Math.random() * randomMovementLimit - 3
const y = offset.top + cellY * (rectHeight + 10) + randomY
const infected = Math.random() > 0.5
people.push({x: x, y: y, cellX: cellX, cellY: cellY, infected: infected})
}
console.log(people[0])
const infectedPeople = people.filter
const healtyPeople = people.filter
let rects = svg.selectAll('rect')
.data(people)
.enter()
.append('rect')
.attr('x', function(d,i) {
return d.x
})
.attr('y', function(d,i) {
return d.y
})
.attr('height', rectHeight)
.attr('width', rectWidth)
.style('fill', (d, i) => {
return d.infected ? "red" : "blue"
})
.attr('rx', 5)
}

Answer 1

Calculate distance from center of each rectangle using pythagorean theorem. I think but haven't tested if I remember right that the center of each rectangle is at d.x + rectWidth/2 and d.y - rectHeight/2. Initialize rectWidth and rectHeight outside of the build function so they are within scope.
Example to get newly infected rectangles at distance less than social_dist from the previously infected:
let social_dist = 6;
rects.filter(function(d,i){
for (let p of infectedPeople){
let xDist = (p.x + rectWidth/2) - (d.x + rectWidth/2);
let yDist = (p.y - rectHeight/2) - (d.y - rectHeight/2);
let dist = Math.sqrt( xDist*xDist + yDist*yDist );
if (dist < social_dist){
return true;
}
return false;
});