title: Draw USA map region wise using D3 and angular 6
body: <p>I need to draw USA Map region wise in D3. It should be something similar to this.
  <a href="https://i.stack.imgur.com/1Fe5R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Fe5R.png" alt="USA Map region wise"></a></p>
  
  <p>I am taking reference from <a href="http://bl.ocks.org/NPashaP/a74faf20b492ad377312" rel="nofollow noreferrer">this USA</a> map which is showing data state wise. And I am able to create this state wise chart using D3 and angular 6. But</p>
  
  <ul>
  <li><p>How to get the geojson or topojson for Region wise data.</p></li>
  <li><p>I did not find any chart using D3 for this region wise also.  </p></li>
  <li><p>Which one will be helpful geoJson or topojson. (As per my understanding and
  <a href="https://medium.com/@amy.degenaro/introduction-to-digital-cartography-geojson-and-d3-js-c27f066aa84" rel="nofollow noreferrer">this article</a> it will be topojson.)</p></li>
  <li><p>I am not getting any approach to draw to this,</p></li>
  </ul>
  
  <p><strong>EDIT:</strong> I am able to create the region chart using the approach which <a href="https://stackoverflow.com/users/7106086/andrew-reid">andrew</a>  mentioned. <strong>I want to create states outlines too</strong>, but not getting any idea about that. Below is the approach which i used. </p>
  
  <pre><code>const svg = d3
    .select('#statesvg')
    .attr('viewBox', '0 0 960 600')
    .attr('width', this.width)
    .attr('height', this.height);
  this.getUSData().subscribe(us =&gt; {
    svg
      .selectAll(undefined)
      .data(this.uRegionPaths)
      .enter()
      .append('path')
      .attr('d', datum =&gt; {
        const feature = topojson.merge(
          us,
          us.objects.states.geometries.filter(state =&gt; {
            return datum.contains.indexOf(this.lookup[state.id]) &gt; -1;
          })
        );
  
        return path(feature);
      })
      .attr('fill', d =&gt; {
        return this.sampleRegionData[d.name].color;
      })
      .attr('stroke', 'white')
      .attr('stroke-width', 3);
  });
  </code></pre>
  
  <p>And it looks somewhat similar to this. few states are missing as of now.(that is not an issue,)</p>
  
  <p><a href="https://i.stack.imgur.com/Zm2IK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zm2IK.png" alt="Region wise chart, few states are missing as of now"></a></p>