JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/mikechambers/ExamplesByMesh/master/JavaScript/QuadTree/src/QuadTree.js"></script>
<div>
    <label>should show all four:</label><div id="test1"></div>
    <label>should show just cUL:</label><div id="test2"></div>
    <label>should show cUL and cUR:</label><div id="test3"></div>
    <label>should show cUR and cLR:</label><div id="test4"></div>

</div>

JavaScript

$(function() {
    var worldBounds = {
        x: 0,
        y: 0,
        width: 100,
        height: 100
    };
    var quadTree = new QuadTree(worldBounds, false, 4, 3);

    var cUL = {
        x: 10,
        y: 10,
        width: 1,
        height: 1,
        name: "cUL"
    };
    quadTree.insert(cUL);

    var cUR = {
        x: 90,
        y: 10,
        width: 1,
        height: 1,
        name: "cUR"
    };
    quadTree.insert(cUR);

    var cLL = {
        x: 10,
        y: 90,
        width: 1,
        height: 1,
        name: "cLL"
    };
    quadTree.insert(cLL);

    var cLR = {
        x: 90,
        y: 90,
        width: 1,
        height: 1,
        name: "cLR"
    };
    quadTree.insert(cLR);
    
    
    // test1 - rect straddles the center
    // of the world.. should get points from
    // all four quads
    var t1Rect = {
        x: 40,
        y: 40,
        width: 20,
        height: 20
    };
    $.each(quadTree.retrieve(t1Rect), function(i, v) { $('#test1').append(v.name+" "); });
    
    // test2 - rect includes just the upper-left quad..
    // show only cUL
    var t2Rect = {
        x: 5,
        y: 5,
        width: 20,
        height: 20
    };
    $.each(quadTree.retrieve(t2Rect), function(i, v) { $('#test2').append(v.name+" "); });
    
    // test3 - should only show points in upper hemisphere
    // .. cUL and cUR
    var t3Rect = {
        x: 40,
        y: 10,
        width: 20,
        height: 20
    };
    $.each(quadTree.retrieve(t3Rect), function(i, v) { $('#test3').append(v.name+" "); });      // test4 -- only points in eastern hemisphere
    var t4Rect = {
        x: 60,
        y: 40,
        width: 20,
        height: 20
    };
    $.each(quadTree.retrieve(t4Rect), function(i, v) { $('#test4').append(v.name+" "); });
});