geojson не может заполнить карту регионов США

Question

Мне нужно показать несколько регионов в США разными цветами, я создал json из http://geojson.io/, но он не заполняется для меня.

    const containerElement = document.querySelector('.country-map-container');
    const containerWidth = containerElement.clientWidth;
    const width = containerWidth; // 700;
    const height = 450;

    const projection = d3.geoMercator()
      .scale(700)
      .translate([width / 2, height / 1.45])
      .rotate([95, -30]);

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

    const svg = d3.select('#country-map').append('svg')
      .attr('width', width)
      .attr('height', height);

    const color = d3.scaleOrdinal([`#42C9C2`, `#0D7575`, `#FF736A`]);

    let g = svg.append('g');

    Promise.all([
      d3.json('assets/json/us.json'),
      d3.json('assets/json/US_Regions.json'),
    ]).then((data) => {

      g.selectAll('.states')
        .data(data[0].features)
        .enter()
        .append('path')
        .attr('class', 'states')
        .attr('d', path);

      g.selectAll('.region')
        .data(data[2].features)
        .enter()
        .append('path')
        .attr('class', 'region')
        .attr('d', path);

    });

us.json - https://gist.github.com/poulomibasu/6c1242887d8bcc1304fe9872632d62a3us_region.json - https://gist.github.com/poulomibasu/d3bbe40283bc1042f4fc5820f4480382

style.css -

.states {
  fill: #e8e8e8;
  stroke: white;
  stroke-width: 1;
  opacity: 0.85;
}

.region {
  fill: lightcyan;
  stroke: black;
  stroke-width: 1;
  opacity: 0.85;
}