Estoy trabajando en un proyecto en d3.js y parece que no puedo hacer que mi mapa funcione. Cada vez que lo ejecuto no hay errores de sintaxis, pero solo hay una pantalla en blanco. Aquí está el código:

 <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>

Me aseguré de que mi proyección fuera WGS 84. Si tengo algún error en el código, ¡házmelo saber! ¡Gracias a todos!