0

I am attempting to make different maps of NYC using d3 v4. I was able to make one by Community District. However, when I attempt to make one by ZIP code, the result is a scrambled mess.(See here) I've double-checked my JavaScript, and I haven't noticed anything wrong.

Here is my javascript: 

d3.queue()
.defer(d3.json,'./nyc_zip_code.json')
.await(ready)

function ready(error, data){
    if(error) throw error
const nycMap = topojson.feature(data,{
    type:'GeometryCollection',
    geometries: data.objects.ZIP_CODE_040114.geometries
})

//projection
const projection = d3.geoAlbersUsa()
.fitExtent([[20,20],[460,500]], nycMap)

//geopath
const geoPath = d3.geoPath()
.projection(projection)

d3.select('svg.nyc-map-zip-code').selectAll('path')
.data(nycMap.features)
.enter()
.append('path')
.attr('d', geoPath)

}

And here is the link to TopoJSON file I converted using MapShaper. My source for the original SHP file is here.

Any clues to what I am doing wrong would be wonderful.

rguttersohn
  • 464
  • 5
  • 15
  • 2
    Your javascript is fine, the issue is that your json is projected already (it is Cartesian data with units of meters, pixels, or feet), whereas you are projecting it as though it was a collection of lat longs (with units in degrees) on a sphere. [This](https://stackoverflow.com/a/42430876/7106086) has more details. – Andrew Reid Apr 29 '20 at 21:14
  • Thanks again, Andrew. This fixed it. However the map was a mirror reflection of itself. I flipped it by applying some CSS to the entire SVG rather than using .reflectY. I was having a hard time getting the map to fit in the viewbox using .reflectY. I'll see if I am still able to apply corresponding ZIP code labels correctly. – rguttersohn Apr 29 '20 at 22:18
  • @andrew perhaps this should be a new question, but I figured I'd ask you. Is it typical for topojson maps to have repeating properties such as zip codes? This obviously makes it hard to bind data from another source to each path. – rguttersohn May 01 '20 at 13:22
  • It's not necessarily unusual, depends on how the file was created and what the source data looks like. There are ways to dissolve based on a given property to have one feature per unique property value, but you should be able to still bind the appropriate data to each path either way. – Andrew Reid May 03 '20 at 22:01
  • Appreciate your response. I found a function that allows me to do just that. – rguttersohn May 04 '20 at 13:12

0 Answers0