Why is the map displayed by d3.js cut in half although the JSON file contains every (polygon) path?

Question

UPDATE (SOLUTION -- Thanks to altocumulus): geoAlbersUSA() clips one map to its bounds. Using geoMercator() with the appropriate scale() and transform() solved the problem.

I'm currently trying to display a map of the US and Mexico using d3. After creating the JSON file I need (see below -- powered by mapshaper), I have been trying to project it in one of my webpages.

However, when I use d3.js to project it, this is what I see:

As you may have noticed, Mexico is cut in half. I really don't understand why. Would you have any tips?

Current JS code:

//Create SVG
var svg_map_0 = d3.select('#mapSVG')
            .append('svg')
            .attr('height',svgHeight/2)
            .attr('width',svgWidth*0.6)

//Create another SVG to avoid jumpiness 
var svg_map = svg_map_0.append('g')

//Enable Zoom 
svg_map_0.call (d3.behavior.zoom()
    .translate ([0, 0])
    .scale (1.0)
    .scaleExtent([0.5, 4])
    .on("zoom", function() {
        svg_map.attr("transform","translate(" + Math.max(-400*d3.event.scale,Math.min(300/d3.event.scale,d3.event.translate[0])) + "," +  Math.max(-200*d3.event.scale,Math.min(150/d3.event.scale,d3.event.translate[1])) + ") scale(" +  d3.event.scale + ")");
    })
).on("dblclick.zoom", null);

//Create projection
var projection = d3.geoAlbersUsa()
                   .translate([svgWidth/3, svgHeight/4.5])
                   .scale([650]);

//Define path generator
var path = d3.geoPath()
             .projection(projection);

//Create function and call data
function map(d,ranking_value) {
d3.json('data/test.json', function(error, json) {
    if (error) throw error;

svg_map.selectAll('path')
               .data(json.features)
               .enter()
               .append('path')
               .attr('d', path)
               .attr('id', 'path_id_map')
               .style('stroke', '#000000')
               .attr('fill','#EAEAEA')
 )}}

Current CSS code:

#mapSVG {
width: calc(60% - 1px);
height: 50%;
overflow: hidden;
background-color:#FFF5D1;
border: 1px solid #A32020;
border-right:0;
float:left;
}

Screenshot of Chrome Elements:

Other Screenshots:

Thank you for your help,

Remark: 1- In the CSS code the height is not 100% because the map is not the only element in the webpage. 2- The JSON file has been saved there: JSFiddle