I'm working on a project in d3.js, and I can't seem to make my map work. Every time I run it there are no syntax errors, but there's only a blank screen. Here's the code:

<svg id="my_dataviz" width="1000" height="1000"></svg>


<script>

// The svg
var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

// Map and projection
var path = d3.geoPath();
var projection = d3.geoMercator()
  .scale(10000)
  .center([30, -85])
  .translate([width / 2, height / 2]);

// Data and color scale
var data = d3.map();
var colorScale = d3.scaleThreshold()
  .domain([-5000, -3000, -1000, 1000, 3000, 5000])
  .range(d3.schemeReds[7]);

// Load external data and boot
d3.queue()
  .defer(d3.json, "G2.geojson")
  .defer(d3.csv, "ps.csv", function(d) { data.set(d.GEOID20, +d.PRE_SC); })
  .await(ready);

function ready(error, topo) {

  // Draw the map
  svg.append("g")
    .selectAll("path")
    .data(topo.features)
    .enter()
    .append("path")
      // draw each country
      .attr("d", d3.geoPath()
        .projection(projection)
      )
      // set the color of each country
      .attr("fill", function (d) {
        d.total = data.get(d.id) || 0;
        return colorScale(d.total);
      });
    }

</script>
</body>
</html>

I made sure that my projection was WGS 84. If I have any errors in the code please let me know! Thank you all!