D3 topojson.feature explanation

1

Hi all.

So I’m working through the D3 Choropleth Map project, and have been able to get my map to display but don’t entirely understand how.

Specifically this line:

.data(topojson.feature(county, county.objects.counties).features).enter().append("path").attr("d", d3.geoPath());

I think by looking at the topojson docs that topojson.feature(county, county.objects.counties).features is taking each individual arc from the json and attaching it as a path to the d3.geoPath().

After all of them are completed we have a map of the counties. Am I interpreting it correctly? I don’t want to skip over it and not fully understand why it works.

6 Likes
2

I think you have it right (or as right as I know it), but I want to clarify one point.

When you call the topojson.feature() function you’re inputting the 2 counties data sets into the function and creating a topojson object, which has a method called .features that you use as your D3 dataset. topojson itself never sends any info into d3, nor does it attach paths to the svg. You could break it up further to get a better look at which module does what

//topojson:
topojsonObject = topojson.feature(county, county.objects.counties); 
topojsonDataSet = topojsonObject.features; 
/*the data stored in topojsonDataSet is what you said, 
a mathematical description of the map we want to draw,
but topojson just generates that information. 
I don't know how the information it returns is formatted, 
but it's mathematical. It doesn't have to go through D3 
to generate shapes, and in theory (if you're Data from TNG)
you could use the data returned by topojson to draw a map  by hand

the process of turning those mathematical descriptions into graphics
is pure d3:*/
svg.select('whateverYouKnowThisPart')
  .data(topojsonDataSet) //if the content of data() wasn't from topojson, 
  .enter()                          //D3 would still try to draw it. 
  .append('path') //path is a type of d3 object that you won't use again in 
                          //these projects. d3 documentation has more info 
  .attr("d", d3.geoPath()); //"d" is an attribute of "path". you're setting it.
5 Likes