Can I project one state from "d3js.org/us-10m.v1.json" and not the whole nation?

Question

From this code at (https://bl.ocks.org/mbostock/4090848) I can access us.objects.states, .nation, or .counties but I just want to know if I can say: us.objects.states.geometries.id(Missouri FIPS code is 29)

I just want to get the state of Missouri or is there a way to narrow this down.

Or if you can give help or direction on how to manipulate this line: .data(topojson.feature(us, us.objects.states).features)

I've read the API reference on the topojson.feature function but I am still confused on how to use it.

<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>

var svg = d3.select("svg");

var path = d3.geoPath();

d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
  if (error) throw error;

  svg.append("g")
      .attr("class", "states")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
      .attr("d", path);

  svg.append("path")
      .attr("class", "state-borders")
      .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));
});

</script>

score 1 · Answer 1 · answered Jul 21 '19 at 00:45

The simplest change would be to filter for your chosen state(s):

.data(topojson.feature(us, us.objects.states).features.filter(function(d) {
  return d.id == 29;
}))

We still return an array to .data() as required, and we draw the map, just with only the chosen state. (I've removed the mesh for borders below, the state appears just out of view, you'll need to scroll):

var svg = d3.select("svg");

var path = d3.geoPath();

d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
  if (error) throw error;

  svg.append("g")
      .attr("class", "states")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.states).features.filter(function(d) {
      return d.id == 29;
    }))
    .enter().append("path")
      .attr("d", path);

});

<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>

Which brings us to the next question, how to position the state. There are plenty of options and answers on SO on how to do so, but I'll note that this file is already projected and its coordinate system is in pixels, the file is designed for a 960x600 pixel map. This is why you haven't had to use a projection so far, there is no need for a transformation or projection. But unless we are happy with the empty space where all the other states would normally be drawn, we need to fix this.

The links in the text above go into more detail, but since we're here I'll just quickly demonstrate how to apply an identity projection and use the fitSize method to showcase Missouri (I just use selection.append() and .datum() as I'm just adding one path):

var svg = d3.select("svg");

var path = d3.geoPath();

d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
  if (error) throw error;
  
  var feature = topojson.feature(us, us.objects.states)
    .features
    .filter(function(d) {  return d.id == 29; })[0]; // get a geojson object (not an array of objects)
  
  var projection = d3.geoIdentity()
    .fitSize([960,600],feature); // scale and translate the map so the feature is centered
    
  path.projection(projection);

  svg.append("path")
    .datum(feature)
    .attr("d", path); // draw the path.

});

<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>

Can I project one state from "d3js.org/us-10m.v1.json" and not the whole nation?

1 Answers1