Proportional symbols map using Leaflet jQuery isn t working

Question

I am super new to this so sorry if this is super easy, but I am trying to make a proportional symbols map using Leaflet and JQuery, following this tutorial: https://neiugis.github.io/lab7/

Basically, I had my json saved as a local file, and my getJSON request looked like this: $.getJSON("CTHValue.geojson")

but I ran into an CORS error, so I decided to upload my json to an online host. Here is the link: https://api.myjson.com/bins/nh71g. However, my code still doesn't seem to work, the symbols are not showing up on my map, but I am not getting an error in the console. I need some help! My code is as follows:

    function addCTHValue() {

    $.getJSON('https://api.myjson.com/bins/nh71g')
    .done(function(data) {
    });

    function processCTHValueData(data) {

    var min = Infinity;
    var max = -Infinity; 

    for (var feature in data.features) {
        var properties = data.features[feature].properties;

      for (var attribute in properties) {
          if ( attribute = 'CTH Value' )

          {
              if (properties[attribute] < min) {
                  min = properties[attribute];
              }
              if (properties[attribute] > max) {
                  max = properties[attribute];
              }
          }
      }
  }
  return {
      min : min,
      max : max
  }
}           
    function CTHValueSymbols(data) {

      CTHValueCountries = L.geoJson(data, {

          pointToLayer: function(feature, latlng) {
              return L.circleMarker(latlng, { 
                  fillColor: "#501e65", 
                  color: '#501e65',      
                  weight: 2,             
                  fillOpacity: 0.5       
              }).on({
                    mouseover: function(e) {
                        this.openPopup();
                        this.setStyle({fillColor: 'green'});
                    },
                    mouseout: function(e) {
                        this.closePopup();
                        this.setStyle({fillColor: '#501e65'});
                    }
            });
          }
      }).addTo(map);
    }

    function calcCTHValueRadius(attributeValue) {

      var scaleFactor = 0.01; 
      var area = attributeValue * scaleFactor;

      return Math.sqrt(area/Math.PI);
    }

            $.getJSON('https://api.myjson.com/bins/nh71g')
    .done(function(data) {
        var info = processCTHValueData(data);
        calcCTHValueRadius(info.data);
    });
}

Do I need to do a XMLHttpRequest or is citing the link sufficient? I wrote the following XMLHttpRequest, but tbh I don't know what I am supposed to do with this request, like, where in my code does it go? Am I supposed to replace the link in the $.getJSON request? What do I replace it with? Do I need to create a variable for the json which I can then cite in the $.getJSON request?

    let requestURL = 'https://api.myjson.com/bins/nh71g';

    let request = new XMLHttpRequest();

    request.open('GET', requestURL);

    request.responseType = 'json';

    request.send();

If anyone can spot what is wrong I'd really appreciate it. Please let me know about the XML request too, bc idk if that's what is causing my issue.