Render geoJSON with d3
Ended up getting some help from a developer friend of mine and the answer was so much simpler than my question made it out to be.
Seems as though d3.json() is natively suited to read the structure of my geoJSON file without using datum() All that was needed was to call:
d3.json("CZ90.zip.geojson", function(error, geoData) { d3.select("svg").append("path") .attr("d", path(geoData));}Note: this is using d3.v4
Here is the full script that was able to successfully render the map:
<!DOCTYPE html><meta charset="utf-8"><style> path { fill: #ccc; stroke: #fff; stroke-linejoin: round; }</style><svg width="960" height="500"></svg><script src="//d3js.org/d3.v4.min.js"></script><script>var width = 960;var height = 620;var chosenProjection = d3.geoMercator() .scale(600) .translate([1300, 450]) var path = d3.geoPath() .projection(chosenProjection);d3.json("CZ90.zip.geojson", function(error, geoData) { d3.select("svg").append("path") .attr("d", path(geoData));});</script>Hope this helps someone else stuck on such a simple roadblock!
I may be missing something here, but if you take a look at the topojson documentation, you'll note that topojson.feature:
Returns the GeoJSON Feature or FeatureCollection for the specified object in the given topology. If the specified object is a GeometryCollection, a FeatureCollection is returned, and each geometry in the collection is mapped to a Feature. Otherwise, a Feature is returned.
And in the d3 documentation you'll note that a d3 geopath:
Renders the given object, which may be any GeoJSON feature
So in regards to:
I realize I'm calling "topojson.feature" instead of something geoJSON specific
You are using something geoJSON specific already, you would only use topojson.js to convert your topoJSON back to geoJSON so that it can be used in a D3 map. So in response to your question:
What is the correct way to target this layer in the .datum call?
The correct way is to simply use:
.datum(us) // feature collection or single featureThis will append a single path, but if you want to append multiple paths with the same dataset (say for different coloring or mouse interaction):
.data(us.features) // feature collection