Difficulty rendering a multipolygon from a GeoJSON using JQuery

Question

I'm pulling polygon data (neighborhood boundaries in San Francisco) from an API on https://data.sfgov.org/Geographic-Locations-and-Boundaries/SF-Find-Neighborhoods/pty2-tcw4/data. While I made sure on my console that I'm indeed pulling the data, I am having trouble visualizing the layer as displayed on the original page.

I kept the JS fiddle simple. I've tried different D3 methods but I keep running into dead ends, usually with a feature being undefined.

Answer 1

The data that is retrieved from the API is not in GeoJSON format. The geometry attribute should be called geometry and not the_geom (the_geom makes me think of an export from PostGIS).

So first you'll have to parse the JSON file into a proper GeoJSON file and then you can use something like:

var geojsonLayer = new L.GeoJSON(jsonParsedToGeoJSON).addTo(map);