0

I need to show few regions in US in different colors, I've generated the json from http://geojson.io/, but it is not getting populated for me.

    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/6c1242887d8bcc1304fe9872632d62a3 us_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;
}
Poulomi Basu
  • 1
  • 2
  • The problem is not clear: what is "not getting populated"? What I assume is your geojson (geotrendsmapdata.json, though the link is for a map.geojson) is not being drawn. But as you have not specified a path generator, (as you did for us.json with `.attr("d",path)` nothing should be drawn. Though if the issue is with the us.json, you have not shown how you define the path generator, nor what projection you are using, both of which are required to be able to help with us.json - and may be (likely) required to help with drawing geotrendsmapdata.json. – Andrew Reid Jan 30 '20 at 05:49
  • I've updated the problem and the code also – Poulomi Basu Jan 30 '20 at 10:22
  • I've tried with projections **d3.geoAlbers()** & **geoAlbersUsa** also – Poulomi Basu Jan 30 '20 at 10:25
  • [This](https://bl.ocks.org/Andrew-Reid/98fa153e3e0b197202a697533dc758bb) is what I get with your code (slight modifications), if this is what you see, you have a winding order issue with your geojson. Not an unusual issue, but one that shouldn't be too hard to fix as explained in: [a](https://stackoverflow.com/a/49311635/7106086), [b](https://stackoverflow.com/a/54949383/7106086), [c](https://stackoverflow.com/a/47234928/7106086). – Andrew Reid Jan 30 '20 at 16:36

0 Answers0