Draw USA map region wise using D3 and angular 6

Question

I need to draw USA Map region wise in D3. It should be something similar to this.

I am taking reference from this USA map which is showing data state wise. And I am able to create this state wise chart using D3 and angular 6. But

• How to get the geojson or topojson for Region wise data.

• I did not find any chart using D3 for this region wise also.

• Which one will be helpful geoJson or topojson. (As per my understanding and this article it will be topojson.)

• I am not getting any approach to draw to this,

EDIT: I am able to create the region chart using the approach which andrew mentioned. I want to create states outlines too , but not getting any idea about that. Below is the approach which i used.

const svg = d3
  .select('#statesvg')
  .attr('viewBox', '0 0 960 600')
  .attr('width', this.width)
  .attr('height', this.height);
this.getUSData().subscribe(us => {
  svg
    .selectAll(undefined)
    .data(this.uRegionPaths)
    .enter()
    .append('path')
    .attr('d', datum => {
      const feature = topojson.merge(
        us,
        us.objects.states.geometries.filter(state => {
          return datum.contains.indexOf(this.lookup[state.id]) > -1;
        })
      );

      return path(feature);
    })
    .attr('fill', d => {
      return this.sampleRegionData[d.name].color;
    })
    .attr('stroke', 'white')
    .attr('stroke-width', 3);
});

And it looks somewhat similar to this. few states are missing as of now.(that is not an issue,)

Answer 1

Topojson is converted to geojson when passed to d3.geoPath - you can use either. However, as the topojson API exposes a merge method, topojson has a key advantage: we can use the topojson us.json file in your example to draw your map.

To draw a collection of states as one feature, we just need to merge them into one feature. To do so we use:

topojson.merge(us, us.objects.states.geometries.filter( /* some test */ )

Where we test each state to see if it belongs in the region at hand. This line will return a geojson feature containing the merged topojson features. We can then pass that to d3.geoPath .

To work with the us.json file linked to in your example, we need to consider how (and if) the states are identified in the data.

The us.json file doesn't come with an accompanying description of its meta data, but I can say that the id of each state is a numerical FIPS code. So, unless we want to specify the regions numerically, we need to translate between number and abbreviation (or some other recognizable form). I'll just use a simple object to get abbreviation from FIPS number:

var lookup = {
    "53" : "WA",
    "41" : "OR",
    "6" : "CA",
    // ...
}

And now we can specify regions, say like:

var regions = [
  {"name": "northwest", "contains":[ "WA","OR","CA" ] }
  // ...
];

Now we can draw our regions:

var lookup = {
    "53" : "WA",
    "41" : "OR",
    "6" : "CA",
    // ...
}

var regions = [
  {"name": "northwest", "contains":[ "WA","OR","CA" ] }
  // ...
];

d3.json("us.json").then(function(us) {
  svg.selectAll(null)
    .data(regions)
    .enter()
    .append("path")
    .attr("d", function(region) {
      var feature = topojson.merge(us, us.objects.states.geometries.filter(function(state) { 
         return region.contains.indexOf(lookup[state.id]) > -1; 
       }))
       return path(feature);
    })
});

If you want state outlines too - just draw the states in addition to the regions. Here's the west coast using the above method, to draw additional regions, just add them to the regions array (while also adding necessary state codes to the lookup object).