Need help with geoMercator

Hello r/d3js

I am starting to learn how to make visualizations with D3. One thing im trying to make is a simple map.

I have valid GEOJson. I validated with https://mapshaper.org/

Yet for some reason its just loading it as a square.

Here is all the code I have

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

d3.json("data.json", function (error, data) {
    if (error) throw error;

    // Create a Mercator projection
    var projection = d3.geoMercator();

    // Fit projection to the bounds of your GeoJSON data
    projection.fitSize([width, height], data);

    var path = d3.geoPath().projection(projection);

    svg.append("g")
        .selectAll("path")
        .data(data.features)
        .enter()
        .append("path")
        .attr("d", path)
        .attr("fill", "red")
        .attr("stroke", "black")
        .attr("stroke-width", 1);
});

and the html

``

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Map Example</title> </head> <body>

<svg width="1280" height="720"></svg>

<!-- D3 Libraries --> <script src="https://d3js.org/d3.v4.js"></script> <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script> <!-- Your custom script --> <script src="map.js"></script> </body> </html> ```

I test with a simpler file and it loads it just fine. But with the state file it just doesnt seem to wkr. Happy to provide the files, Just dont know how as I dont see file uploads on reddit